/* =========================================
   RESET
========================================= */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --chilli-red: #c51f24;
    --chilli-red-dark: #8f1115;
    --chilli-red-light: #e13a3f;
    --chilli-soft: #fff1f1;
    --white: #ffffff;
    --text-dark: #222222;
    --text-light: #686868;
    --border: #eeeeee;
    --page-background: #ffffff;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    color: var(--text-dark);
    background: var(--page-background);
    overflow-x: hidden;
}

body.search-is-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input {
    font: inherit;
}

button {
    border: 0;
}

ul {
    list-style: none;
}

svg {
    display: block;
}

.chilli-container {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}


/* =========================================
   HEADER
========================================= */

.chilli-header {
    position: relative;
    z-index: 1000;
    width: 100%;
    background: var(--white);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.chilli-menu-link:hover, .chilli-menu-link.is-active {
    color: #1f5e3b !important;
}
/* =========================================
   TOP BAR
========================================= */

.chilli-topbar {
    width: 100%;
    min-height: 31px;
    color: var(--white);
    background: #1f5e3b;
}

.chilli-topbar-inner {
    min-height: 31px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.chilli-delivery {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    line-height: 1;
}

.chilli-delivery svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.chilli-quality-list {
    display: flex;
    align-items: center;
    font-size: 10px;
    white-space: nowrap;
}

.chilli-quality-list li {
    display: flex;
    align-items: center;
}

.chilli-quality-list li:not(:last-child)::after {
    content: "";
    width: 1px;
    height: 10px;
    margin-inline: 12px;
    background: rgba(255, 255, 255, 0.55);
}


/* =========================================
   MAIN NAVBAR
========================================= */

.chilli-navbar {
    width: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--border);
}

.chilli-navbar-inner {
    min-height: 78px;
    display: grid;
    grid-template-columns: 190px 1fr 145px;
    align-items: center;
    column-gap: 28px;
}


/* =========================================
   LOGO
========================================= */

.chilli-logo {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.chilli-logo-icon {
    width: 37px;
    height: 44px;
    flex-shrink: 0;
}

.chilli-logo-icon svg {
    width: 100%;
    height: 100%;
}

.chilli-logo-content {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.chilli-logo-content strong {
    color: var(--chilli-red);
    font-size: 24px;
    letter-spacing: -0.5px;
}

.chilli-logo-content small {
    margin-top: 5px;
    color: #333333;
    font-size: 10px;
    font-weight: 700;
}


/* =========================================
   DESKTOP NAVIGATION
========================================= */

.chilli-navigation {
    height: 78px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.chilli-menu {
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 4px;
}

.chilli-menu-item {
    position: relative;
    display: flex;
    align-items: stretch;
}

.chilli-menu-link {
    position: relative;
    min-width: 68px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #252525;
    background: transparent;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}

.chilli-menu-link:hover,
.chilli-menu-link.is-active {
    color: var(--chilli-red);
}

.chilli-menu-link.is-active::after {
    content: "";
    position: absolute;
    right: 15px;
    bottom: 10px;
    left: 15px;
    height: 2px;
    border-radius: 20px;
    background: #1f5e3b;
}

.chilli-category-button svg {
    width: 10px;
    height: 10px;
    transition: transform 0.25s ease;
}

.chilli-has-dropdown:hover .chilli-category-button svg,
.chilli-has-dropdown:focus-within .chilli-category-button svg {
    transform: rotate(180deg);
}


/* =========================================
   DESKTOP DROPDOWN
========================================= */

.chilli-dropdown {
    position: absolute;
    top: calc(100% - 7px);
    left: 50%;
    width: 210px;
    padding: 9px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}

.chilli-dropdown::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 12px;
    height: 12px;
    background: var(--white);
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
    transform: translateX(-50%) rotate(45deg);
}

.chilli-has-dropdown:hover .chilli-dropdown,
.chilli-has-dropdown:focus-within .chilli-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.chilli-dropdown a {
    position: relative;
    z-index: 1;
    display: block;
    padding: 11px 13px;
    border-radius: 6px;
    color: #333333;
    font-size: 12px;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        padding-left 0.2s ease;
}

.chilli-dropdown a:hover {
    padding-left: 17px;
    color: var(--chilli-red);
    background: var(--chilli-soft);
}


/* =========================================
   HEADER ICONS
========================================= */

.chilli-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.chilli-action-button {
    position: relative;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #353535;
    background: transparent;
    cursor: pointer;
    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}

.chilli-action-button:hover {
    color: var(--chilli-red);
    background: var(--chilli-soft);
    transform: translateY(-2px);
}

.chilli-action-button svg {
    width: 20px;
    height: 20px;
}

.chilli-cart-count {
    position: absolute;
    top: 1px;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding-inline: 4px;
    border: 2px solid var(--white);
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background: var(--chilli-red);
    font-size: 9px;
    font-weight: 700;
}


/* =========================================
   MOBILE BUTTON
========================================= */

.chilli-mobile-toggle {
    width: 42px;
    height: 42px;
    border-radius: 7px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    background: var(--chilli-soft);
    cursor: pointer;
}

.chilli-mobile-toggle span {
    width: 21px;
    height: 2px;
    border-radius: 20px;
    background: var(--chilli-red);
    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.chilli-mobile-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.chilli-mobile-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.chilli-mobile-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* =========================================
   MOBILE NAVIGATION
========================================= */

.chilli-mobile-navigation {
    display: none;
    background: var(--white);
    border-top: 1px solid var(--border);
    box-shadow: 0 14px 25px rgba(0, 0, 0, 0.08);
}

.chilli-mobile-navigation.is-open {
    display: block;
}

.chilli-mobile-menu {
    width: min(100%, 1180px);
    margin-inline: auto;
    padding: 10px 20px 20px;
}

.chilli-mobile-menu > a,
.chilli-mobile-dropdown-button {
    width: 100%;
    min-height: 48px;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #292929;
    background: transparent;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.chilli-mobile-menu > a:hover,
.chilli-mobile-menu > a.is-active {
    color: var(--chilli-red);
}

.chilli-mobile-dropdown-button svg {
    width: 12px;
    height: 12px;
    transition: transform 0.25s ease;
}

.chilli-mobile-dropdown-button.is-open svg {
    transform: rotate(180deg);
}

.chilli-mobile-dropdown {
    display: none;
    padding: 5px 0 8px 15px;
    background: #fff7f7;
}

.chilli-mobile-dropdown.is-open {
    display: block;
}

.chilli-mobile-dropdown a {
    display: block;
    padding: 11px 12px;
    color: #555555;
    font-size: 13px;
}

.chilli-mobile-dropdown a:hover {
    color: var(--chilli-red);
}


/* =========================================
   SEARCH POPUP
========================================= */

.chilli-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;
    padding: 25px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: rgba(0, 0, 0, 0.62);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.chilli-search-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.chilli-search-form {
    width: min(650px, 100%);
    margin-top: 90px;
    padding: 18px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    transform: translateY(-15px);
    transition: transform 0.25s ease;
}

.chilli-search-overlay.is-open .chilli-search-form {
    transform: translateY(0);
}

.chilli-search-form input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid #dddddd;
    border-radius: 7px;
    color: var(--text-dark);
    outline: none;
}

.chilli-search-form input:focus {
    border-color: var(--chilli-red);
    box-shadow: 0 0 0 3px rgba(197, 31, 36, 0.12);
}

.chilli-search-submit,
.chilli-search-close {
    height: 48px;
    border-radius: 7px;
    cursor: pointer;
}

.chilli-search-submit {
    padding: 0 22px;
    color: var(--white);
    background: var(--chilli-red);
    font-weight: 700;
}

.chilli-search-submit:hover {
    background: var(--chilli-red-dark);
}

.chilli-search-close {
    width: 48px;
    flex-shrink: 0;
    color: #333333;
    background: #f1f1f1;
    font-size: 23px;
}


/* =========================================
   HOME HERO
========================================= */

.home-hero {
    min-height: 590px;
    display: flex;
    align-items: center;
    background:
        radial-gradient(
            circle at 84% 48%,
            rgba(197, 31, 36, 0.2),
            transparent 30%
        ),
        linear-gradient(
            100deg,
            #ffffff 0%,
            #fff8f8 56%,
            #ffe4e4 100%
        );
}

.home-hero-content {
    max-width: 700px;
    padding: 95px 0;
}

.home-small-title {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--chilli-red);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.home-hero h1 {
    margin-bottom: 22px;
    color: var(--text-dark);
    font-size: clamp(45px, 7vw, 56px) !important;
    line-height: 1.05;
    letter-spacing: -2px;
}

.home-hero h1 span {
    display: block;
    color: var(--chilli-red);
}

.home-hero p {
    max-width: 610px;
    margin-bottom: 32px;
    color: var(--text-light);
    font-size: 17px;
    line-height: 1.8;
}

.home-hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
}

.home-primary-button,
.home-outline-button {
    min-height: 52px;
    padding: 0 29px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        transform 0.25s ease;
}

.home-primary-button {
    color: var(--white);
    background: var(--chilli-red);
}

.home-primary-button:hover {
   background: #dba036 !important;
    border-color: #dba036 !important;
    transform: translateY(-3px);
}

.home-outline-button {
    border: 2px solid var(--chilli-red);
    color: var(--chilli-red);
    background: transparent;
}

.home-outline-button:hover {
    color: var(--white);
    background: var(--chilli-red);
    transform: translateY(-3px);
}


/* =========================================
   HOME FEATURES
========================================= */

.home-features {
    padding: 50px 0;
    background: var(--white);
}

.home-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.home-feature-card {
    min-height: 130px;
    padding: 25px;
    border: 1px solid var(--border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--white);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.home-feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(197, 31, 36, 0.12);
}

.home-feature-icon {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--chilli-soft);
    font-size: 25px;
}

.home-feature-card h2 {
    margin-bottom: 7px;
    color: var(--text-dark);
    font-size: 17px;
}

.home-feature-card p {
    color: var(--text-light);
    font-size: 13px;
    line-height: 1.6;
}


/* =========================================
   FOOTER
========================================= */

.chilli-footer {
    padding: 24px 20px;
    color: var(--white);
    background: var(--chilli-red-dark);
    text-align: center;
}

.chilli-footer p {
    font-size: 13px;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 1050px) {
    .chilli-navbar-inner {
        grid-template-columns: 175px 1fr 135px;
        column-gap: 12px;
    }

    .chilli-menu-link {
        min-width: auto;
        padding-inline: 10px;
        font-size: 11px;
    }

    .chilli-menu-link.is-active::after {
        right: 10px;
        left: 10px;
    }
}


@media (max-width: 880px) {
    .chilli-container {
        width: min(100% - 30px, 1180px);
    }

    .chilli-navbar-inner {
        min-height: 70px;
        display: flex;
        justify-content: space-between;
    }

    .chilli-navigation {
        display: none;
    }

    .chilli-actions {
        margin-left: auto;
        margin-right: 7px;
    }

    .chilli-mobile-toggle {
        display: flex;
    }

    .home-feature-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 640px) {
    .chilli-topbar-inner {
        justify-content: center;
        min-height: 34px;
    }

    .chilli-quality-list {
        display: none;
    }

    .chilli-delivery {
        font-size: 10px;
    }

    .chilli-navbar-inner {
        min-height: 66px;
    }

    .chilli-logo-icon {
        width: 31px;
        height: 38px;
    }

    .chilli-logo-content strong {
        font-size: 20px;
    }

    .chilli-logo-content small {
        font-size: 9px;
    }

    .chilli-action-button {
        width: 34px;
        height: 34px;
    }

    .chilli-action-button svg {
        width: 18px;
        height: 18px;
    }

    .chilli-account-button {
        display: none;
    }

    .home-hero {
        min-height: 530px;
    }

    .home-hero-content {
        padding: 70px 0;
    }

    .home-hero h1 {
        letter-spacing: -1px;
    }

    .home-hero p {
        font-size: 16px;
    }

    .chilli-search-form {
        margin-top: 45px;
        flex-wrap: wrap;
    }

    .chilli-search-form input {
        flex: 1;
        min-width: 190px;
    }
}


@media (max-width: 480px) {
    .chilli-container {
        width: calc(100% - 26px);
    }

    .chilli-logo {
        gap: 5px;
    }

    .chilli-logo-icon {
        width: 28px;
    }

    .chilli-logo-content strong {
        font-size: 18px;
    }

    .chilli-actions {
        gap: 0;
        margin-right: 4px;
    }

    .chilli-mobile-toggle {
        width: 38px;
        height: 38px;
    }

    .home-hero-content {
        padding: 60px 0;
    }

    .home-hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .home-primary-button,
    .home-outline-button {
        width: 100%;
    }

    .home-feature-card {
        padding: 20px;
    }

    .chilli-search-submit {
        flex: 1;
    }
}

/* =========================================
   HOME HERO WITH BACKGROUND IMAGE
========================================= */

.home-hero {
    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: 650px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #260708;
}


/* Background image */

.home-hero-background {
    position: absolute;
    inset: 0;
    z-index: -4;
    background-image: linear-gradient(90deg, rgba(18, 2, 3, 0.94) 0%, rgb(31 94 59) 42%, rgba(40, 4, 5, 0.42) 68%, rgba(20, 2, 3, 0.25) 100%), var(--home-hero-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.08);
    animation: homeHeroBackgroundZoom 14s ease-in-out infinite alternate;
}

/* Dark lower overlay */

.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(0, 0, 0, 0.15) 65%,
            rgba(0, 0, 0, 0.38) 100%
        );

    pointer-events: none;
}


/* Decorative chilli-red glow */

.home-hero-glow {
    position: absolute;
    z-index: -2;
    border-radius: 50%;
    filter: blur(20px);
    pointer-events: none;
}

.home-hero-glow-one {
    top: 80px;
    left: -130px;
    width: 330px;
    height: 330px;
    background: rgb(31 94 59);
    animation: homeGlowFloatOne 7s ease-in-out infinite;
}

.home-hero-glow-two {
    right: 8%;
    bottom: -160px;
    width: 380px;
    height: 380px;
    background: rgb(31 94 59);
    animation: homeGlowFloatTwo 9s ease-in-out infinite;
}


/* Container */

.home-hero-container {
    position: relative;
    z-index: 2;
}


/* Text area */

.home-hero-content {
    width: min(690px, 100%);
    padding: 110px 0;

    opacity: 0;
    transform: translateY(35px);
    animation: homeContentEntrance 1s ease forwards;
}


/* Small title */

.home-small-title {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 11px;

    margin-bottom: 21px;

    color: #efff2f;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 2.2px;
    line-height: 1.4;
    text-transform: uppercase;

    opacity: 0;
    transform: translateX(-30px);
    animation: homeSlideFromLeft 0.8s ease 0.2s forwards;
}

.home-small-title::before {
    content: "";
    width: 34px;
    height: 2px;
    border-radius: 20px;
    background: #efff2f;
}


/* Main heading */

.home-hero h1 {
    margin: 0 0 23px;

    color: #ffffff;
    font-size: clamp(48px, 7vw, 88px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -3px;

    text-shadow: 0 5px 24px rgba(0, 0, 0, 0.38);

    opacity: 0;
    transform: translateY(30px);
    animation: homeFadeUp 0.9s ease 0.38s forwards;
}

.home-hero h1 span {
    display: block;
    margin-top: 5px;
    color: #efff2f;

    text-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 25px rgba(197, 31, 36, 0.25);
}


/* Description */

.home-hero p {
    max-width: 610px;
    margin: 0 0 34px;

    color: rgba(255, 255, 255, 0.84);
    font-size: 17px;
    line-height: 1.8;

    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);

    opacity: 0;
    transform: translateY(25px);
    animation: homeFadeUp 0.9s ease 0.56s forwards;
}


/* Buttons */

.home-hero-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;

    opacity: 0;
    transform: translateY(25px);
    animation: homeFadeUp 0.9s ease 0.72s forwards;
}

.home-primary-button,
.home-outline-button {
    position: relative;
    min-height: 54px;
    padding: 0 29px;
    border-radius: 7px;

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

    font-size: 14px;
    font-weight: 700;

    overflow: hidden;

    transition:
        color 0.3s ease,
        border-color 0.3s ease,
        background-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* Primary button */

.home-primary-button {
    color: #232721;
    background: #efff2f;
    border: 2px solid #efff2f;
    box-shadow: 0 10px 28px rgba(197, 31, 36, 0.32);
}

.home-primary-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;

    width: 80%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent
        );

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

.home-primary-button:hover::before {
    left: 145%;
}

.home-primary-button:hover {
    background: #951216;
    border-color: #951216;
    transform: translateY(-4px);
    box-shadow: 0 15px 34px rgba(197, 31, 36, 0.42);
}

.home-primary-button span {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.home-primary-button:hover span {
    transform: translateX(5px);
}


/* Outline button */

.home-outline-button {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(7px);
}

.home-outline-button:hover {
    color: #ffffff;
    background: #d89d34;
    border-color: #d89d34;
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24);
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes homeHeroBackgroundZoom {
    0% {
        transform: scale(1.08) translate3d(0, 0, 0);
    }

    100% {
        transform: scale(1.15) translate3d(-1.5%, -1%, 0);
    }
}

@keyframes homeContentEntrance {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

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

@keyframes homeSlideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

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

@keyframes homeFadeUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

@keyframes homeGlowFloatOne {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(35px, 25px) scale(1.12);
    }
}

@keyframes homeGlowFloatTwo {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-35px, -25px) scale(1.1);
    }
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {
    .home-hero {
        min-height: 600px;
    }

    .home-hero-background {
        background-position: 65% center;
    }

    .home-hero-content {
        max-width: 620px;
        padding: 95px 0;
    }

    .home-hero h1 {
        letter-spacing: -2px;
    }
}


@media (max-width: 640px) {
    .home-hero {
        min-height: 570px;
    }

    .home-hero-background {
        background-image:
            linear-gradient(
                90deg,
                rgba(20, 2, 3, 0.92) 0%,
                rgba(24, 3, 4, 0.84) 65%,
                rgba(28, 4, 5, 0.65) 100%
            ),
            var(--home-hero-image);

        background-position: 62% center;
    }

    .home-hero-content {
        padding: 75px 0;
    }

    .home-small-title {
        margin-bottom: 16px;
        font-size: 12px;
        letter-spacing: 1.6px;
    }

    .home-small-title::before {
        width: 25px;
    }

    .home-hero h1 {
        margin-bottom: 19px;
        font-size: clamp(43px, 13vw, 64px);
        letter-spacing: -1.5px;
    }

    .home-hero p {
        margin-bottom: 28px;
        font-size: 15px;
        line-height: 1.7;
    }
}


@media (max-width: 480px) {
    .home-hero {
        min-height: 600px;
    }

    .home-hero-content {
        padding: 65px 0;
    }

    .home-hero-buttons {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .home-primary-button,
    .home-outline-button {
        width: 100%;
    }
}


/* Disable animation for users who prefer reduced motion */

@media (prefers-reduced-motion: reduce) {
    .home-hero-background,
    .home-hero-content,
    .home-small-title,
    .home-hero h1,
    .home-hero p,
    .home-hero-buttons,
    .home-hero-glow {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .home-primary-button,
    .home-outline-button {
        transition: none;
    }
}
/*
---------------------------------

second section css category 

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


/* =========================================
   SHOP BY CUISINE OR CATEGORY
========================================= */

.spice-category-section {
    width: 100%;
    padding: 13px 0 11px;
    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #f5eadb 0%,
            #f2e5d3 50%,
            #f5eadb 100%
        );

    border-top: 1px solid rgba(91, 57, 27, 0.08);
    border-bottom: 1px solid rgba(91, 57, 27, 0.08);
}
section#shopCategories {
    padding: 32px 0px 32px 0px !important;
}
.spice-category-container {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;

    display: grid;
    grid-template-columns: 155px minmax(0, 1fr);
    align-items: center;
    gap: 22px;
}


/* =========================================
   LEFT HEADING
========================================= */

.spice-category-heading {
    min-width: 0;
    padding-top: 2px;
}

.spice-category-heading h2 {
    margin: 0;

    color: #1f5e3b;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.55;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.spice-category-heading h2 span {
    display: block;
}


/* Decorative divider */

.spice-heading-decoration {
    width: 83px;
    height: 17px;
    margin-top: 3px;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.spice-decoration-line {
    width: 48px;
    height: 1px;
    display: block;
    background: #1f5e3b;
}

.spice-decoration-dot {
    display: block;
    border-radius: 50%;
    background: #1f5e3b;
}

.spice-dot-small {
    width: 3px;
    height: 3px;
}

.spice-dot-large {
    width: 5px;
    height: 5px;
}


/* =========================================
   CATEGORY LIST
========================================= */

.spice-category-list {
    min-width: 0;

    display: grid;
    grid-template-columns: repeat(8, minmax(75px, 1fr));
    align-items: start;
    gap: 13px;
}

.spice-category-item {
    min-width: 0;

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

    color: #50331b;
    text-align: center;
    text-decoration: none;

    transform-origin: center;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


/* =========================================
   CIRCULAR IMAGE
========================================= */

.spice-category-image {
    position: relative;

    width: 67px;
    height: 67px;
    padding: 3px;

    display: block;

    border: 2px solid #94cb30;
    border-radius: 50%;

    background: #efff2f;

    box-shadow:
        0 3px 7px rgba(70, 42, 18, 0.24),
        inset 0 0 0 2px rgba(255, 255, 255, 0.45);

    overflow: hidden;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.35s ease;
}

.spice-category-image::after {
    content: "";
    position: absolute;
    inset: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.26),
            transparent 38%
        );

    pointer-events: none;
}

.spice-category-image img {
    width: 100%;
    height: 100%;

    display: block;

    border-radius: 50%;
    object-fit: cover;
    object-position: center;

    transition:
        transform 0.5s ease,
        filter 0.4s ease;
}


/* Category name */

.spice-category-name {
    max-width: 94px;
    margin-top: 6px;

    display: block;

    color: #1f5e3b;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;

    transition:
        color 0.3s ease,
        letter-spacing 0.3s ease;
}


/* =========================================
   HOVER ANIMATION
========================================= */

.spice-category-item:hover {
    color: #164229;
    transform: translateY(-4px);
}

.spice-category-item:hover .spice-category-image {
    border-color: #164229;

    transform:
        translateY(-2px)
        scale(1.07)
        rotate(1.5deg);

    box-shadow:
        0 9px 18px rgba(81, 41, 20, 0.28),
        0 0 0 4px rgba(162, 29, 34, 0.08);
}

.spice-category-item:hover .spice-category-image img {
    transform: scale(1.13);
    filter: saturate(1.08) contrast(1.04);
}

.spice-category-item:hover .spice-category-name {
    color: #153221;
    letter-spacing: 0.15px;
}


/* =========================================
   ENTRANCE ANIMATION
========================================= */

.reveal-category {
    opacity: 0;
    transform: translateY(22px);
}

.reveal-category.is-visible {
    animation:
        spiceCategoryReveal
        0.7s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;

    animation-delay:
        calc(var(--animation-order, 0) * 0.08s);
}

.spice-category-heading.reveal-category.is-visible {
    animation-delay: 0s;
}

@keyframes spiceCategoryReveal {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.96);
    }

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


/* Subtle image movement */

.spice-category-item:nth-child(odd)
.spice-category-image {
    animation: spiceImageFloat 4.8s ease-in-out infinite;
}

.spice-category-item:nth-child(even)
.spice-category-image {
    animation: spiceImageFloat 4.8s ease-in-out 0.7s infinite;
}

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

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

.spice-category-item:hover .spice-category-image {
    animation-play-state: paused;
}


/* =========================================
   SMALL DESKTOP
========================================= */

@media (max-width: 1050px) {
    .spice-category-container {
        grid-template-columns: 140px minmax(0, 1fr);
        gap: 15px;
    }

    .spice-category-heading h2 {
        font-size: 13px;
    }

    .spice-category-list {
        gap: 8px;
    }

    .spice-category-image {
        width: 59px;
        height: 59px;
    }

    .spice-category-name {
        max-width: 80px;
        font-size: 8px;
    }
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 850px) {
    .spice-category-section {
        padding: 22px 0;
    }

    .spice-category-container {
        width: min(100% - 30px, 1180px);

        grid-template-columns: 1fr;
        gap: 18px;
    }

    .spice-category-heading {
        text-align: center;
    }

    .spice-category-heading h2 {
        font-size: 16px;
        line-height: 1.35;
    }

    .spice-category-heading h2 span {
        display: inline;
    }

    .spice-heading-decoration {
        margin: 7px auto 0;
        justify-content: center;
    }

    .spice-category-list {
        grid-template-columns: repeat(4, 1fr);
        gap: 23px 12px;
    }

    .spice-category-image {
        width: 76px;
        height: 76px;
    }

    .spice-category-name {
        max-width: 100px;
        margin-top: 8px;
        font-size: 11px;
    }
}


/* =========================================
   MOBILE HORIZONTAL SLIDER
========================================= */

@media (max-width: 560px) {
    .spice-category-section {
        padding: 19px 0 13px;
    }

    .spice-category-container {
        width: 100%;
        gap: 15px;
    }

    .spice-category-heading {
        padding-inline: 18px;
    }

    .spice-category-heading h2 {
        font-size: 15px;
    }

    .spice-category-list {
        width: 100%;
        padding: 0 18px 12px;

        display: flex;
        align-items: flex-start;
        gap: 17px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .spice-category-list::-webkit-scrollbar {
        display: none;
    }

    .spice-category-item {
        width: 80px;
        min-width: 80px;
        flex: 0 0 80px;

        scroll-snap-align: start;
    }

    .spice-category-image {
        width: 70px;
        height: 70px;
    }

    .spice-category-name {
        max-width: 80px;
        font-size: 10px;
        white-space: normal;
    }
}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media (max-width: 360px) {
    .spice-category-heading h2 {
        font-size: 14px;
    }

    .spice-category-list {
        gap: 14px;
    }

    .spice-category-item {
        width: 74px;
        min-width: 74px;
        flex-basis: 74px;
    }

    .spice-category-image {
        width: 64px;
        height: 64px;
    }
}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .reveal-category,
    .reveal-category.is-visible,
    .spice-category-image {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .spice-category-item,
    .spice-category-image,
    .spice-category-image img {
        transition: none;
    }
}


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


3rd section css

--------------------------------------

*/

/* =========================================
   OUR STORY SECTION
========================================= */

.story-section {
    --story-chilli: #bd1e24;
    --story-chilli-dark: #8f1115;
    --story-brown: #3e2819;
    --story-brown-light: #6b4a34;
    --story-cream: #fbfaf5;
    --story-stat-bg: #f2f1e8;
    --story-border: #e5e2d8;
    --story-white: #ffffff;

    width: 100%;
    background: var(--story-cream);
    overflow: hidden;
}


/* =========================================
   MAIN THREE-COLUMN LAYOUT
========================================= */

.story-main-grid {
    width: 100%;
    min-height: 420px;

    display: grid;
    grid-template-columns:
        minmax(320px, 38%)
        minmax(320px, 32%)
        minmax(280px, 30%);

    align-items: stretch;
}


/* =========================================
   LEFT IMAGE
========================================= */

.story-image-column {
    min-width: 0;
}

.story-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 420px;
    overflow: hidden;
}

.story-main-image {
    width: 100%;
    height: 100%;
    min-height: 420px;

    display: block;

    object-fit: cover;
    object-position: center;

    transform: scale(1.03);

    transition:
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.7s ease;
}

.story-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent 65%,
            rgba(251, 250, 245, 0.38) 100%
        );

    pointer-events: none;
}

.story-image-wrapper:hover .story-main-image {
    transform: scale(1.1);
    filter: saturate(1.08);
}


/* Chilli floating badge */

.story-image-badge {
    position: absolute;
    right: 22px;
    bottom: 22px;

    width: 54px;
    height: 54px;

    border: 3px solid rgba(255, 255, 255, 0.8);
    border-radius: 50%;

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

    background: var(--story-chilli);
    box-shadow: 0 12px 28px rgba(78, 23, 19, 0.3);

    font-size: 27px;

    animation: storyBadgeFloat 4s ease-in-out infinite;
}


/* =========================================
   CENTER CONTENT
========================================= */

.story-content-column {
    min-width: 0;
    padding: 68px 46px 58px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(189, 30, 36, 0.06),
            transparent 32%
        ),
        var(--story-cream);
}

.story-small-title {
    margin-bottom: 15px;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #060605;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.story-small-title svg {
    width: 17px;
    height: 17px;
}

.story-content-column h2 {
    margin: 0 0 20px;

    color: #1f5e3b;
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 700;
    line-height: 1.13;
    letter-spacing: -1px;
}

.story-content-column h2 span {
    display: block;
    color: #020202;
}

.story-content-column p {
    max-width: 560px;
    margin: 0 0 27px;

    color: #000000;
    font-size: 14px;
    line-height: 1.8;
}


/* Story button */

.story-button {
    position: relative;

    width: fit-content;
    min-height: 49px;
    padding: 0 23px;

    border: 2px solid #efff2f;
    border-radius: 5px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    color: black;
    background:  #efff2f;

    font-size: 13px;
    font-weight: 700;

    box-shadow: 0 9px 22px rgba(189, 30, 36, 0.22);
    overflow: hidden;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.story-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.32),
            transparent
        );

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

.story-button:hover::before {
    left: 145%;
}

.story-button:hover {
    background: #1f5e3b;
    border-color: #1f5e3b;
    transform: translateY(-3px);

    box-shadow: 0 14px 30px rgba(143, 17, 21, 0.3);
}

.story-button svg {
    width: 17px;
    height: 17px;

    transition: transform 0.3s ease;
}

.story-button:hover svg {
    transform: translateX(4px);
}


/* =========================================
   RIGHT FEATURES
========================================= */

.story-features-column {
    min-width: 0;
    padding: 48px 40px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;

    background:
        linear-gradient(
            135deg,
            #fffdf8 0%,
            #f5f1e7 100%
        );
}

.story-feature-item {
    min-height: 90px;
    padding: 12px 14px;

    border: 1px solid transparent;
    border-radius: 10px;

    display: flex;
    align-items: center;
    gap: 17px;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.story-feature-item:hover {
    border-color: rgba(189, 30, 36, 0.14);

    background: rgba(255, 255, 255, 0.75);

    box-shadow: 0 10px 25px rgba(65, 38, 18, 0.08);

    transform: translateX(7px);
}


/* Circular feature icon */

.story-feature-icon {
    width: 67px;
    height: 67px;
    flex: 0 0 67px;

    border: 1px solid #ddd8ca;
    border-radius: 50%;

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

    color: #1f5e3b;
    background: #fffdf8;

    box-shadow:
        0 4px 12px rgba(80, 50, 25, 0.08),
        inset 0 0 0 5px rgba(189, 30, 36, 0.035);

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.4s ease,
        border-color 0.3s ease;
}

.story-feature-icon svg {
    width: 33px;
    height: 33px;
}

.story-feature-item:hover .story-feature-icon {
    color: var(--story-white);
    background: #153522;
    border-color: #153522;
    transform: rotate(-7deg) scale(1.06);
}

.story-feature-content h3 {
    margin: 0 0 5px;

    color: var(--story-brown);
    font-size: 14px;
    font-weight: 800;
}
.story-feature-content h3
 {
    color: black;
 }
.story-feature-content p {
    margin: 0;

    color: black;
    font-size: 11px;
    line-height: 1.5;
}


/* =========================================
   BOTTOM STATISTICS
========================================= */

.story-statistics {
    width: 100%;
    padding: 20px 0;

    background:
        linear-gradient(
            90deg,
            #f3f1e7 0%,
            #eeeade 50%,
            #f3f1e7 100%
        );

    border-top: 1px solid var(--story-border);
    border-bottom: 1px solid var(--story-border);
}

.story-stats-container {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
}

.story-stat-item {
    min-height: 75px;
    padding: 8px 30px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.story-stat-item:not(:last-child) {
    border-right: 1px solid #dcd6c8;
}

.story-stat-item:hover {
    transform: translateY(-4px);
}

.story-stat-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

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

    color: #1f5e3b;

    transition:
        transform 0.4s ease,
        color 0.3s ease;
}

.story-stat-icon svg {
    width: 43px;
    height: 43px;
}

.story-stat-item:hover .story-stat-icon {
    color: #05c95c;
    transform: rotate(-6deg) scale(1.08);
}

.story-stat-item strong {
    display: block;
    margin-bottom: 4px;

    color: black;
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.story-stat-item span {
    display: block;

    color: black;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
}


/* =========================================
   SCROLL REVEAL ANIMATION
========================================= */

.story-reveal {
    opacity: 0;
    transform: translateY(30px);
}

.story-reveal.is-visible {
    animation:
        storyRevealAnimation
        0.8s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;

    animation-delay:
        calc(var(--story-order, 0) * 0.12s);
}

@keyframes storyRevealAnimation {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }

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

@keyframes storyBadgeFloat {
    0%,
    100% {
        transform: translateY(0) rotate(-4deg);
    }

    50% {
        transform: translateY(-9px) rotate(4deg);
    }
}


/* =========================================
   RESPONSIVE: SMALL DESKTOP
========================================= */

@media (max-width: 1100px) {
    .story-main-grid {
        grid-template-columns:
            minmax(300px, 37%)
            minmax(300px, 34%)
            minmax(260px, 29%);
    }

    .story-content-column {
        padding: 55px 32px;
    }

    .story-features-column {
        padding: 38px 24px;
    }

    .story-feature-icon {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
    }

    .story-feature-icon svg {
        width: 29px;
        height: 29px;
    }

    .story-stat-item {
        padding-inline: 18px;
    }
}


/* =========================================
   RESPONSIVE: TABLET
========================================= */

@media (max-width: 900px) {
    .story-main-grid {
        grid-template-columns: 1fr 1fr;
    }

    .story-image-column {
        grid-column: 1;
        grid-row: 1;
    }

    .story-content-column {
        grid-column: 2;
        grid-row: 1;

        padding: 50px 35px;
    }

    .story-features-column {
        grid-column: 1 / -1;

        padding: 28px 30px;

        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }

    .story-feature-item {
        min-height: 150px;
        padding: 20px 15px;

        flex-direction: column;
        justify-content: center;

        text-align: center;
    }

    .story-feature-item:hover {
        transform: translateY(-5px);
    }

    .story-stats-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .story-stat-item:nth-child(2) {
        border-right: 0;
    }

    .story-stat-item:nth-child(-n + 2) {
        border-bottom: 1px solid #dcd6c8;
    }
}


/* =========================================
   RESPONSIVE: MOBILE
========================================= */

@media (max-width: 640px) {
    .story-main-grid {
        display: block;
    }

    .story-image-wrapper,
    .story-main-image {
        min-height: 330px;
        height: 330px;
    }

    .story-image-overlay {
        background:
            linear-gradient(
                180deg,
                transparent 65%,
                rgba(251, 250, 245, 0.4) 100%
            );
    }

    .story-image-badge {
        right: 17px;
        bottom: 17px;

        width: 48px;
        height: 48px;

        font-size: 23px;
    }

    .story-content-column {
        padding: 44px 22px;
        text-align: center;
    }

    .story-small-title {
        justify-content: center;
    }

    .story-content-column h2 {
        font-size: 34px;
    }

    .story-content-column h2 span {
        display: inline;
    }

    .story-content-column p {
        font-size: 14px;
    }

    .story-button {
        margin-inline: auto;
    }

    .story-features-column {
        padding: 25px 18px;

        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .story-feature-item {
        min-height: 100px;
        padding: 14px;

        flex-direction: row;
        justify-content: flex-start;

        text-align: left;
    }

    .story-feature-icon {
        width: 60px;
        height: 60px;
        flex-basis: 60px;
    }

    .story-stats-container {
        width: calc(100% - 28px);
    }

    .story-stat-item {
        min-height: 105px;
        padding: 15px 8px;

        flex-direction: column;
        gap: 8px;

        text-align: center;
    }

    .story-stat-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .story-stat-icon svg {
        width: 38px;
        height: 38px;
    }

    .story-stat-item strong {
        font-size: 17px;
    }
}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media (max-width: 380px) {
    .story-image-wrapper,
    .story-main-image {
        min-height: 285px;
        height: 285px;
    }

    .story-content-column {
        padding: 38px 17px;
    }

    .story-content-column h2 {
        font-size: 30px;
    }

    .story-feature-content h3 {
        font-size: 13px;
    }

    .story-feature-content p {
        font-size: 10px;
    }
}


/* Reduced motion accessibility */

@media (prefers-reduced-motion: reduce) {
    .story-reveal,
    .story-reveal.is-visible,
    .story-image-badge {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .story-main-image,
    .story-button,
    .story-feature-item,
    .story-feature-icon,
    .story-stat-item,
    .story-stat-icon {
        transition: none;
    }
}

/*





4th section







*/
/* =========================================
   BEST SELLERS
========================================= */
/* ==================================================
   BIG RESPONSIVE BEST SELLERS SECTION
================================================== */

.best-sellers-section {
    --best-chilli: #b82025;
    --best-chilli-dark: #7f1014;
    --best-brown: #3b2718;
    --best-brown-soft: #75563e;
    --best-cream: #f3e6d4;
    --best-card: #fffaf1;
    --best-line: #d7b991;
    --best-gold: #d18a0e;
    --best-white: #ffffff;
    --best-green: #245c34;

    width: 100%;
    padding: 55px 0 65px;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(184, 32, 37, 0.05),
            transparent 26%
        ),
        linear-gradient(
            100deg,
            #f7edde 0%,
            #f1e1ca 50%,
            #f7edde 100%
        );

    border-top: 1px solid rgba(59, 39, 24, 0.09);
    border-bottom: 1px solid rgba(59, 39, 24, 0.09);

    overflow: hidden;
}

.best-sellers-container {
    width: min(1400px, calc(100% - 60px));
    margin-inline: auto;
}


/* ==================================================
   SECTION HEADING
================================================== */

.best-sellers-header {
    min-height: 52px;
    margin-bottom: 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.best-title-area {
    min-width: 0;
    flex: 1;

    display: flex;
    align-items: center;
    gap: 20px;
}

.best-title-area h2 {
    margin: 0;

    color: #1f5e3b;
    font-size: clamp(26px, 2.2vw, 38px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.best-title-line {
    width: 100%;
    height: 2px;

    display: block;

        background: linear-gradient(90deg, #1f5e3b, var(--best-line), transparent);
}

.best-view-all {
    min-height: 43px;
    padding: 0 18px;

    border: 1px solid rgba(59, 39, 24, 0.3);
    border-radius: 5px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    color: var(--best-brown);
    background: rgba(255, 255, 255, 0.3);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    white-space: nowrap;

    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.best-view-all svg {
    width: 17px;
    height: 17px;

    transition: transform 0.3s ease;
}

.best-view-all:hover {
    color: var(--best-white);
    background: var(--best-chilli);
    border-color: var(--best-chilli);
    transform: translateY(-2px);
}

.best-view-all:hover svg {
    transform: translateX(4px);
}


/* ==================================================
   PRODUCTS GRID
================================================== */

.best-products-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 24px;
}


/* ==================================================
   PRODUCT CARD
================================================== */

.best-product-card {
    position: relative;
    min-width: 0;
    min-height: 475px;
    padding: 16px;

    border: 1px solid rgba(87, 53, 29, 0.13);
    border-radius: 10px;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            145deg,
            #fffdf8 0%,
            var(--best-card) 100%
        );

    box-shadow:
        0 6px 18px rgba(69, 40, 18, 0.08);

    overflow: hidden;

    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}

.best-product-card::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;

    width: 220px;
    height: 220px;

    border-radius: 50%;

    background: rgba(184, 32, 37, 0.045);

    transition:
        transform 0.5s ease,
        background-color 0.5s ease;
}

.best-product-card:hover {
    border-color: rgba(184, 32, 37, 0.34);

    box-shadow:
        0 22px 45px rgba(83, 43, 21, 0.18);

    transform: translateY(-10px);
}

.best-product-card:hover::before {
    background: rgba(184, 32, 37, 0.09);
    transform: scale(1.25);
}


/* ==================================================
   BADGE
================================================== */

.best-product-badge {
    position: absolute;
    top: 18px;
    left: 0;
    z-index: 5;

    min-height: 27px;
    padding: 0 15px;

    display: inline-flex;
    align-items: center;

    color: var(--best-white);
    background: #1f5e3b;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;

    box-shadow:
        0 5px 13px rgba(128, 17, 21, 0.25);
}

.best-product-badge::after {
    content: "";
    position: absolute;
    top: 0;
    right: -12px;

    border-top: 13.5px solid transparent;
    border-bottom: 13.5px solid transparent;
    border-left: 12px solid #1f5e3b;
}


/* ==================================================
   PRODUCT IMAGE
================================================== */

.best-product-image {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 250px;
    padding: 12px;

    border-radius: 8px;

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

    background:
        radial-gradient(
            circle at center,
            #ffffff 0%,
            #fbf1e2 72%,
            #f1dfc7 100%
        );

    overflow: hidden;
}

.best-product-image::after {
    content: "";
    position: absolute;
    right: 18%;
    bottom: 14px;
    left: 18%;

    height: 17px;

    border-radius: 50%;

    background: rgba(59, 39, 24, 0.16);
    filter: blur(9px);

    transform: scaleX(0.7);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

.best-product-image img {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 100%;

    display: block;

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

    filter:
        drop-shadow(0 9px 8px rgba(58, 35, 17, 0.15));

    transition:
        filter 0.45s ease,
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.best-product-card:hover .best-product-image img {
    filter:
        saturate(1.1)
        contrast(1.04)
        drop-shadow(0 14px 11px rgba(58, 35, 17, 0.2));

    transform:
        translateY(-8px)
        scale(1.09);
}

.best-product-card:hover .best-product-image::after {
    opacity: 0.7;
    transform: scaleX(0.92);
}


/* ==================================================
   PRODUCT CONTENT
================================================== */

.best-product-content {
    position: relative;
    z-index: 2;

    flex: 1;
    padding: 18px 4px 2px;

    display: flex;
    flex-direction: column;
}

.best-product-content h3 {
    min-height: 48px;
    margin: 0 0 7px;

    color: #1f5e3b;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
}

.best-product-content h3 a {
    color: inherit;

    transition: color 0.3s ease;
}

.best-product-content h3 a:hover {
    color: var(--best-chilli);
}

.best-product-size {
    min-height: 20px;
    margin-bottom: 8px;

    display: block;

    color: #1f5e3b;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}


/* ==================================================
   RATING
================================================== */

.best-product-rating {
    min-height: 24px;
    margin-bottom: 9px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.best-product-stars {
    color: var(--best-gold);
    font-size: 15px;
    line-height: 1;
    letter-spacing: -1px;
}

.best-product-reviews {
    color: black;
    font-size: 11px;
    font-weight: 600;
}


/* ==================================================
   PRICE
================================================== */

.best-product-price {
    margin-bottom: 14px;

    display: block;

    color: #1f5e3b;
    font-size: 20px;
    font-weight: 800;
}


/* ==================================================
   WHATSAPP BUTTON
================================================== */

.best-add-cart {
    position: relative;

    width: 100%;
    min-height: 47px;
    margin-top: auto;
    padding: 0 18px;

    border: 0;
    border-radius: 6px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    color: var(--best-white);
    background: linear-gradient(100deg, #1f5e3b, #1f5e3b);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.65px;
    text-transform: uppercase;

    cursor: pointer;
    overflow: hidden;

    box-shadow:
        0 7px 16px rgba(59, 39, 24, 0.16);

    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.best-add-cart::before {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.35),
            transparent
        );

    transform: skewX(-25deg);

    transition: left 0.7s ease;
}

.best-add-cart:hover::before {
    left: 150%;
}

.best-add-cart:hover {
    background:
        linear-gradient(
            100deg,
            var(--best-green),
            #1b4828
        );

    box-shadow:
        0 12px 25px rgba(36, 92, 52, 0.3);

    transform: translateY(-3px);
}

.best-add-cart svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;

    transition: transform 0.3s ease;
}

.best-add-cart:hover svg {
    transform:
        translateX(3px)
        scale(1.08);
}

.best-add-cart.is-added {
    background: var(--best-green);
}

.best-add-cart:disabled {
    cursor: default;
}


/* ==================================================
   EMPTY MESSAGE
================================================== */

.best-empty-message {
    grid-column: 1 / -1;

    padding: 45px 20px;

    color: var(--best-brown-soft);
    background: var(--best-card);

    border: 1px solid rgba(59, 39, 24, 0.1);
    border-radius: 8px;

    text-align: center;
}


/* ==================================================
   ENTRANCE ANIMATION
================================================== */

.best-reveal {
    opacity: 0;
    transform:
        translateY(35px)
        scale(0.96);
}

.best-reveal.is-visible {
    animation:
        bestSellerLargeReveal
        0.8s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;

    animation-delay:
        calc(var(--best-delay, 0) * 100ms);
}

@keyframes bestSellerLargeReveal {
    from {
        opacity: 0;

        transform:
            translateY(35px)
            scale(0.96);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* ==================================================
   LARGE TABLET / SMALL DESKTOP
================================================== */

@media (max-width: 1200px) {
    .best-sellers-container {
        width: min(1120px, calc(100% - 40px));
    }

    .best-products-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
    }

    .best-product-image {
        height: 245px;
    }
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 850px) {
    .best-sellers-section {
        padding: 45px 0 55px;
    }

    .best-sellers-container {
        width: min(100% - 30px, 800px);
    }

    .best-sellers-header {
        margin-bottom: 23px;
    }

    .best-title-area h2 {
        font-size: 26px;
    }

    .best-products-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .best-product-card {
        min-height: 455px;
    }

    .best-product-image {
        height: 220px;
    }

    .best-product-content h3 {
        font-size: 17px;
    }
}


/* ==================================================
   MOBILE HORIZONTAL PRODUCT SLIDER
================================================== */

@media (max-width: 600px) {
    .best-sellers-section {
        padding: 38px 0 42px;
    }

    .best-sellers-container {
        width: 100%;
    }

    .best-sellers-header {
        min-height: 45px;
        margin-bottom: 20px;
        padding-inline: 18px;
    }

    .best-title-area {
        gap: 10px;
    }

    .best-title-area h2 {
        font-size: 23px;
    }

    .best-title-line {
        display: none;
    }

    .best-view-all {
        min-height: 38px;
        padding: 0 13px;
        font-size: 10px;
    }

    .best-products-list {
        width: 100%;
        padding: 0 18px 20px;

        display: flex;
        align-items: stretch;
        gap: 16px;

        overflow-x: auto;
        overflow-y: visible;

        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .best-products-list::-webkit-scrollbar {
        display: none;
    }

    .best-product-card {
        width: min(82vw, 310px);
        min-width: min(82vw, 310px);
        min-height: 455px;
        flex: 0 0 min(82vw, 310px);

        padding: 14px;

        scroll-snap-align: center;
    }

    .best-product-image {
        height: 225px;
    }

    .best-product-content {
        padding-top: 16px;
    }

    .best-product-content h3 {
        min-height: 45px;
        font-size: 17px;
    }

    .best-product-price {
        font-size: 19px;
    }

    .best-add-cart {
        min-height: 48px;
        font-size: 12px;
    }
}


/* ==================================================
   VERY SMALL MOBILE
================================================== */

@media (max-width: 380px) {
    .best-sellers-header {
        padding-inline: 14px;
    }

    .best-title-area h2 {
        font-size: 20px;
    }

    .best-products-list {
        padding-inline: 14px;
        gap: 13px;
    }

    .best-product-card {
        width: 86vw;
        min-width: 86vw;
        flex-basis: 86vw;
    }

    .best-product-image {
        height: 205px;
    }
}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {
    .best-reveal,
    .best-reveal.is-visible {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .best-product-card,
    .best-product-image img,
    .best-add-cart,
    .best-view-all {
        transition: none;
    }
}
.best-add-cart.is-loading {
    cursor: wait;
    opacity: 0.82;

    background:
        linear-gradient(
            100deg,
            #245c34,
            #173d23
        );
}

.best-add-cart.is-loading svg {
    animation:
        whatsappButtonPulse
        0.8s
        ease-in-out
        infinite alternate;
}

@keyframes whatsappButtonPulse {
    from {
        transform: scale(0.9);
        opacity: 0.6;
    }

    to {
        transform: scale(1.12);
        opacity: 1;
    }
}

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

5th section

----------------------------------------

*/

/* ==================================================
   RESET
================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --spice-red: #c51f24;
    --spice-red-light: #f34246;
    --spice-red-dark: #7f1014;

    --spice-gold: #d99a31;
    --spice-gold-light: #f2c56d;

    --spice-brown: #3a2118;
    --spice-brown-light: #775141;

    --spice-black: #090909;
    --spice-dark: #10100f;
    --spice-card: #19130f;

    --spice-white: #ffffff;
    --spice-muted: #9d948c;
}

html {
    scroll-behavior: smooth;
}

body {
  

    background: #050505;
    color: var(--spice-white);
}

img {
    display: block;
    max-width: 100%;
}


/* ==================================================
   HERO
================================================== */

.spice-hero {
    position: relative;
    isolation: isolate;

    width: 100%;
    min-height: 760px;

    display: flex;
    align-items: center;

    overflow: hidden;

      background: radial-gradient(circle at 78% 25%, rgba(197, 31, 36, 0.12), transparent 24%), radial-gradient(circle at 10% 30%, rgba(217, 154, 49, 0.08), transparent 25%), linear-gradient(110deg, #141414 0%, #000000 45%, #215d3b 100%);
}


/* Fine grid */

.spice-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: -5;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size: 60px 60px;

    opacity: 0.5;
}


/* Top subtle glow */

.spice-hero::after {
    content: "";

    position: absolute;
    top: -130px;
    right: 5%;

    width: 480px;
    height: 300px;

    z-index: -4;

    background: rgba(217, 154, 49, 0.1);

    filter: blur(100px);
}


/* ==================================================
   SHELL
================================================== */

.spice-shell {
    position: relative;
    z-index: 4;

    width: min(1260px, calc(100% - 60px));

    margin-inline: auto;

    padding: 65px 0 45px;
}


/* ==================================================
   LEFT BIG SPICE
================================================== */

.spice-left-visual {
    position: absolute;

    top: -60px;
    left: -100px;

    z-index: 2;

    width: 390px;

    pointer-events: none;
}

.spice-left-main-image {
    width: 100%;

    filter:
        drop-shadow(
            0 30px 35px rgba(0,0,0,0.6)
        )
        saturate(1.1);

    animation:
        spiceLeftFloat
        7s ease-in-out
        infinite;
}


/* ==================================================
   BACKGROUND GLOW
================================================== */

.spice-bg-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;
}

.glow-one {
    left: -180px;
    bottom: -100px;

    width: 450px;
    height: 450px;

    background:
        rgba(197, 31, 36, 0.12);
}

.glow-two {
    right: 3%;
    top: 15%;

    width: 330px;
    height: 330px;

    background:
        rgba(217, 154, 49, 0.08);
}


/* ==================================================
   TECH LINES
================================================== */

.spice-tech-lines {
    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;
}

.tech-line {
    position: absolute;

    display: block;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(217,154,49,0.22),
            transparent
        );
}

.line-one {
    top: 18%;
    left: 20%;

    width: 44%;
    height: 1px;
}

.line-two {
    top: 18%;
    left: 62%;

    width: 1px;
    height: 210px;

    background:
        linear-gradient(
            transparent,
            rgba(217,154,49,0.25),
            transparent
        );
}

.line-three {
    bottom: 15%;
    left: 24%;

    width: 36%;
    height: 1px;
}

.line-four {
    top: 36%;
    right: 14%;

    width: 1px;
    height: 270px;

    background:
        linear-gradient(
            transparent,
            rgba(197,31,36,0.22),
            transparent
        );
}


/* ==================================================
   TOP FLOW
================================================== */

.spice-top-flow {
    width: 520px;

    margin: 0 auto 40px;

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

.spice-flow-item {
    flex: 0 0 auto;
}

.spice-flow-circle {
    width: 49px;
    height: 49px;

    border: 1px solid #efff2f;
    border-radius: 50%;

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

    padding: 6px;

    background:
        linear-gradient(
            145deg,
            #201a14,
            #0f0e0d
        );

    box-shadow:
        0 0 0 6px rgba(255,255,255,0.015),
        0 8px 25px rgba(0,0,0,0.4);
}

.spice-flow-circle img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.spice-flow-last {
    color: #efff2f;
}

.spice-flow-last svg {
    width: 23px;
    height: 23px;
}

.spice-flow-line {
    width: 92px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(217,154,49,0.15),
            rgba(217,154,49,0.5),
            rgba(217,154,49,0.15)
        );
}


/* ==================================================
   MAIN GRID
================================================== */

.spice-main-layout {
    display: grid;

    grid-template-columns:
        minmax(260px, 0.9fr)
        minmax(340px, 1.05fr)
        minmax(250px, 0.8fr);

    align-items: center;

    gap: 45px;
}


/* ==================================================
   COPY
================================================== */

.spice-copy {
    max-width: 390px;
}

.spice-eyebrow {
    display: inline-block;

    margin-bottom: 16px;

    color: #efff2f;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 2.2px;

    text-transform: uppercase;
}

.spice-copy h1 {
    margin-bottom: 22px;

    color: #e5ded8;

    font-size: clamp(38px, 4vw, 58px);

    font-weight: 700;

    line-height: 1.06;

    letter-spacing: -2px;
}

.spice-copy h1 span {
    display: block;

    margin-top: 4px;

    color: #1b492e;
}

.spice-copy p {
    margin-bottom: 25px;

    color: #98918b;

    font-size: 14px;

    line-height: 1.8;
}

.spice-copy-accent {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #c7b8aa;

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.9px;
}

.accent-line {
    width: 30px;
    height: 1px;

    background:
        #e1ff2f;
}

.accent-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #1c482f;
}


/* ==================================================
   PRODUCT AREA
================================================== */

.spice-product-area {
    position: relative;

    min-height: 455px;

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

.spice-product-glow {
    position: absolute;

    width: 310px;
    height: 310px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(197,31,36,0.14),
            rgba(217,154,49,0.04) 45%,
            transparent 72%
        );

    filter: blur(25px);

    animation:
        spiceGlowPulse
        4s ease-in-out
        infinite;
}


/* ==================================================
   PRODUCT CARD
================================================== */

.spice-product-card {
    position: relative;
    z-index: 3;

    width: 300px;
    height: 415px;

    padding: 25px 24px;

    border: 1px solid rgba(217,154,49,0.2);

    border-radius: 28px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

   background: linear-gradient(145deg, rgb(33 93 59), rgb(13 30 19) 48%, rgba(16, 13, 11, 0.98));

    box-shadow:
        -12px 30px 70px rgba(0,0,0,0.65),
        inset 0 1px 0 rgba(255,255,255,0.09);

    transform:
        rotate(7deg)
        perspective(900px)
        rotateY(-7deg);

    transition:
        transform 0.5s cubic-bezier(.22,1,.36,1),
        box-shadow 0.5s ease;
}

.spice-product-card:hover {
    transform:
        rotate(2deg)
        perspective(900px)
        rotateY(0deg)
        translateY(-12px);

    box-shadow:
        -5px 40px 80px rgba(0,0,0,0.7),
        0 0 40px rgba(197,31,36,0.13);
}

.spice-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    color: #cbbbad;
}

.spice-card-brand {
    color: #ffffff;

    font-size: 25px;
    font-weight: 700;

    letter-spacing: -1px;
}

.spice-card-mark {
    font-size: 11px;

    opacity: 0.65;
}


/* Product ring */

.spice-card-image-area {
    flex: 1;

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

.spice-card-ring {
    width: 195px;
    height: 195px;

    border: 2px solid rgb(225 255 47);

    border-radius: 50%;

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

    background:
        radial-gradient(
            circle,
            rgba(197,31,36,0.2),
            rgba(217,154,49,0.05) 55%,
            transparent
        );

    box-shadow:
        0 0 0 8px rgba(217,154,49,0.03),
        0 0 45px rgba(197,31,36,0.18);

    animation:
        spiceRingPulse
        4s ease-in-out
        infinite;
}

.spice-card-product-image {
    width: 145px;
    height: 145px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 20px 15px rgba(0,0,0,0.5)
        );

    animation:
        spicePackFloat
        4s ease-in-out
        infinite;
}

.spice-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.spice-card-bottom div {
    display: flex;
    flex-direction: column;

    gap: 4px;
}

.spice-card-bottom span {
    color: #827870;

    font-size: 9px;

    text-transform: uppercase;
}

.spice-card-bottom strong {
    color: #efff2f;

    font-size: 12px;
}


/* ==================================================
   RIGHT AREA
================================================== */

.spice-right-area {
    position: relative;
}

.spice-info-card {
    position: relative;

    padding: 28px;

    border: 1px solid rgba(255,255,255,0.055);

    border-radius: 6px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.035),
            rgba(255,255,255,0.01)
        );

    backdrop-filter: blur(8px);

    transform:
        rotate(-5deg);

    box-shadow:
        0 18px 45px rgba(0,0,0,0.25);

    transition:
        transform 0.4s ease,
        border-color 0.4s ease;
}

.spice-info-card:hover {
    transform:
        rotate(0deg)
        translateY(-5px);

    border-color:
        rgba(197,31,36,0.25);
}

.spice-info-number {
    display: block;

    margin-bottom: 15px;

    color: #e1ff2f
    ;

    font-size: 11px;

    letter-spacing: 2px;
}

.spice-info-card h2 {
    margin-bottom: 12px;

    color: #e1d7cf;

    font-size: 18px;

    font-weight: 600;
}

.spice-info-card p {
    color: #817a74;

    font-size: 12px;

    line-height: 1.7;
}

.spice-info-line {
    width: 45px;
    height: 2px;

    margin-top: 20px;

    display: block;

    background: linear-gradient(90deg, #e9f92e, #1b492f);
}


/* Side spice images */

.spice-side-spices {
    position: absolute;

    top: -135px;
    right: -5px;

    display: flex;

    gap: 10px;

    opacity: 0.75;
}

.spice-side-spices img {
    width: 52px;
    height: 52px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 12px rgba(0,0,0,0.5)
        );

    animation:
        spiceSmallFloat
        4.5s ease-in-out
        infinite;
}

.spice-side-spices img:nth-child(2) {
    animation-delay: 0.8s;
}


/* ==================================================
   BOTTOM FEATURES
================================================== */

.spice-bottom-features {
    width: fit-content;

    margin-top: 40px;

    padding: 10px;

    border: 1px solid rgba(255,255,255,0.06);

    border-radius: 4px;

    display: flex;
    align-items: center;

    background:
        rgba(255,255,255,0.018);
}

.spice-mini-feature {
    min-width: 150px;

    padding: 8px 18px;

    display: flex;
    align-items: center;

    gap: 10px;

    color: #91867d;

    font-size: 10px;
}

.spice-mini-feature:not(:last-child) {
    border-right:
        1px solid rgba(255,255,255,0.06);
}

.spice-mini-icon {
    width: 32px;
    height: 32px;

    border-radius: 50%;

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

    color: #efff2f;

    background:
        rgba(197,31,36,0.08);

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}

.spice-mini-icon svg {
    width: 16px;
    height: 16px;
}

.spice-mini-feature:hover
.spice-mini-icon {
    transform:
        scale(1.12)
        rotate(-5deg);

    background:
        rgba(197,31,36,0.18);
}


/* ==================================================
   REVEAL ANIMATIONS
================================================== */

.reveal-left,
.reveal-right,
.reveal-up,
.reveal-card,
.reveal-top {
    opacity: 0;
}

.reveal-left.is-visible {
    animation:
        revealFromLeft
        1s cubic-bezier(.22,1,.36,1)
        forwards;
}

.reveal-right.is-visible {
    animation:
        revealFromRight
        1s cubic-bezier(.22,1,.36,1)
        forwards;
}

.reveal-up.is-visible {
    animation:
        revealFromBottom
        0.9s cubic-bezier(.22,1,.36,1)
        forwards;
}

.reveal-card.is-visible {
    animation:
        revealCard
        1.1s cubic-bezier(.22,1,.36,1)
        forwards;
}

.reveal-top.is-visible {
    animation:
        revealTop
        0.7s cubic-bezier(.22,1,.36,1)
        forwards;

    animation-delay:
        calc(var(--delay, 0) * 120ms);
}


/* ==================================================
   KEYFRAMES
================================================== */

@keyframes revealFromLeft {
    from {
        opacity: 0;

        transform:
            translateX(-70px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}

@keyframes revealFromRight {
    from {
        opacity: 0;

        transform:
            translateX(70px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}

@keyframes revealFromBottom {
    from {
        opacity: 0;

        transform:
            translateY(35px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

@keyframes revealCard {
    from {
        opacity: 0;

        transform:
            translateY(50px)
            rotate(15deg)
            scale(0.88);
    }

    to {
        opacity: 1;

        transform:
            rotate(7deg)
            perspective(900px)
            rotateY(-7deg)
            scale(1);
    }
}

@keyframes revealTop {
    from {
        opacity: 0;

        transform:
            translateY(-25px)
            scale(0.8);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes spiceLeftFloat {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(-3deg);
    }

    50% {
        transform:
            translateY(18px)
            rotate(3deg);
    }
}

@keyframes spicePackFloat {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

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

@keyframes spiceSmallFloat {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(0);
    }

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

@keyframes spiceRingPulse {
    0%,
    100% {
        box-shadow:
            0 0 0 8px rgba(217,154,49,0.03),
            0 0 35px rgba(197,31,36,0.12);
    }

    50% {
        box-shadow:
            0 0 0 14px rgba(217,154,49,0.04),
            0 0 55px rgba(197,31,36,0.25);
    }
}

@keyframes spiceGlowPulse {
    0%,
    100% {
        transform:
            scale(0.9);

        opacity: 0.55;
    }

    50% {
        transform:
            scale(1.1);

        opacity: 1;
    }
}


/* ==================================================
   RESPONSIVE 1100px
================================================== */

@media (max-width: 1100px) {

    .spice-left-visual {
        width: 300px;

        left: -110px;
    }

    .spice-shell {
        width:
            min(
                100% - 40px,
                1000px
            );
    }

    .spice-main-layout {
        grid-template-columns:
            minmax(220px, 0.8fr)
            minmax(290px, 1fr)
            minmax(220px, 0.75fr);

        gap: 28px;
    }

    .spice-product-card {
        width: 260px;
        height: 380px;
    }

    .spice-card-ring {
        width: 170px;
        height: 170px;
    }

    .spice-card-product-image {
        width: 128px;
        height: 128px;
    }
}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 850px) {

    .spice-hero {
        min-height: auto;
    }

    .spice-shell {
        width: min(100% - 32px, 760px);

        padding:
            80px 0 55px;
    }

    .spice-left-visual {
        width: 240px;

        top: -70px;
        left: -90px;

        opacity: 0.58;
    }

    .spice-top-flow {
        width: min(100%, 500px);

        margin-bottom: 55px;
    }

    .spice-flow-line {
        flex: 1;

        min-width: 25px;

        max-width: 75px;
    }

    .spice-main-layout {
        grid-template-columns:
            1fr 1fr;

        gap: 45px 30px;
    }

    .spice-copy {
        max-width: none;
    }

    .spice-product-area {
        min-height: 430px;
    }

    .spice-right-area {
        grid-column:
            1 / -1;

        width: min(500px, 100%);

        margin-inline: auto;
    }

    .spice-side-spices {
        top: -70px;
    }

    .spice-bottom-features {
        width: 100%;

        justify-content: center;

        margin-top: 55px;
    }

    .spice-mini-feature {
        min-width: 0;

        flex: 1;

        justify-content: center;
    }
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .spice-shell {
        width:
            calc(100% - 28px);

        padding:
            65px 0 40px;
    }

    .spice-left-visual {
        width: 180px;

        top: -50px;
        left: -70px;

        opacity: 0.42;
    }

    .spice-top-flow {
        width: 100%;

        margin-bottom: 40px;
    }

    .spice-flow-circle {
        width: 41px;
        height: 41px;
    }

    .spice-flow-line {
        min-width: 10px;
    }

    .spice-main-layout {
        display: flex;
        flex-direction: column;

        gap: 50px;
    }

    .spice-copy {
        width: 100%;

        text-align: center;
    }

    .spice-copy h1 {
        font-size:
            clamp(
                41px,
                13vw,
                58px
            );
    }

    .spice-copy-accent {
        justify-content: center;
    }

    .spice-product-area {
        width: 100%;

        min-height: 430px;
    }

    .spice-product-card {
        width: min(280px, 82vw);

        height: 390px;
    }

    .spice-right-area {
        width: 100%;
    }

    .spice-info-card {
        transform: none;

        text-align: center;
    }

    .spice-side-spices {
        display: none;
    }

    .spice-bottom-features {
        margin-top: 45px;

        padding: 5px;

        display: grid;
        grid-template-columns:
            1fr;
    }

    .spice-mini-feature {
        width: 100%;

        min-height: 55px;

        justify-content: flex-start;
    }

    .spice-mini-feature:not(:last-child) {
        border-right: 0;

        border-bottom:
            1px solid
            rgba(255,255,255,0.06);
    }
}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation:
            none !important;

        transition:
            none !important;
    }

    .reveal-left,
    .reveal-right,
    .reveal-up,
    .reveal-card,
    .reveal-top {
        opacity: 1;
    }
}


/* ==================================================
   6th section
================================================== */

/* ==================================================
   RESET
================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --gift-red: #a4161a;
    --gift-red-main: #bd1e24;
    --gift-red-dark: #781013;

    --gift-brown: #3d281b;
    --gift-brown-soft: #725442;

    --gift-gold: #bd8122;
    --gift-gold-light: #dfae55;

    --gift-cream: #faf4e8;
    --gift-cream-dark: #f1e5d2;

    --gift-white: #ffffff;
}

body {

    

    background: #ffffff;
    color: var(--gift-brown);
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}


/* ==================================================
   MAIN SECTION
================================================== */

.gift-section {
    width: 100%;

    background:
        linear-gradient(
            180deg,
            #fffaf1,
            #f8f0e3
        );

    overflow: hidden;
}


/* ==================================================
   TOP GRID
================================================== */

.gift-top-grid {
    min-height: 375px;

    display: grid;

    grid-template-columns:
        minmax(300px, 31%)
        minmax(360px, 42%)
        minmax(270px, 27%);

    align-items: stretch;
}


/* ==================================================
   LEFT PROMOTIONAL PANEL
================================================== */

.gift-promo-panel {
    position: relative;

    min-width: 0;

    padding: 48px 48px;

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

    color: var(--gift-white);

   background: radial-gradient(circle at 90% 30%, rgba(255, 255, 255, 0.09), transparent 30%), linear-gradient(135deg, #18452c 0%, #2c6444 55%, #0a1a10 100%);

    overflow: hidden;
}

.gift-promo-panel::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,0.018) 0,
            rgba(255,255,255,0.018) 1px,
            transparent 1px,
            transparent 7px
        );

    pointer-events: none;
}

.gift-promo-panel::after {
    content: "";

    position: absolute;

    right: -80px;
    bottom: -100px;

    width: 240px;
    height: 240px;

    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 50%;
}

.gift-promo-inner {
    position: relative;
    z-index: 2;

    max-width: 420px;

    text-align: center;
}

.gift-eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color: #f8d496;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.gift-promo-inner h2 {
    margin-bottom: 15px;

    color: #ffffff;


    
    font-size: clamp(28px, 3vw, 44px);

    font-weight: 700;

    line-height: 1.04;
}

.gift-promo-inner h2 span {
    display: block;

    color: #f6e2c1;
}

.gift-promo-inner p {
    max-width: 380px;

    margin: 0 auto 22px;

    color: rgba(255,255,255,0.82);

    font-size: 12px;

    line-height: 1.7;
}


/* ==================================================
   BUTTON
================================================== */

.gift-shop-button {
    position: relative;

    min-height: 43px;

    padding: 0 22px;

    border-radius: 3px;

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

    gap: 8px;

    color: #4b2d16;

    background:
        linear-gradient(
            180deg,
            #e3a93e,
            #c48821
        );

    box-shadow:
        0 7px 18px rgba(65,25,15,0.3);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 0.6px;

    text-transform: uppercase;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.gift-shop-button::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 65%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.45),
            transparent
        );

    transform: skewX(-24deg);

    transition: left 0.7s ease;
}

.gift-shop-button:hover::before {
    left: 145%;
}

.gift-shop-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 25px rgba(65,25,15,0.38);
}

.gift-shop-button svg {
    width: 15px;
    height: 15px;

    transition: transform 0.3s ease;
}

.gift-shop-button:hover svg {
    transform: translateX(4px);
}


/* ==================================================
   DECORATIVE CHILLI
================================================== */

.gift-chilli-decoration {
    position: absolute;

    right: 18px;
    bottom: 14px;

    display: flex;

    gap: 4px;

    opacity: 0.15;

    font-size: 37px;

    transform: rotate(-17deg);
}


/* ==================================================
   CENTER IMAGE
================================================== */

.gift-image-panel {
    min-width: 0;

    background: #3a2118;
}

.gift-image-wrapper {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 375px;

    overflow: hidden;
}

.gift-main-image {
    width: 100%;
    height: 100%;

    min-height: 375px;

    object-fit: cover;
    object-position: center;

    transform: scale(1.02);

    transition:
        transform 1.1s cubic-bezier(.22,1,.36,1),
        filter 0.7s ease;
}

.gift-image-wrapper:hover
.gift-main-image {
    transform: scale(1.08);

    filter:
        saturate(1.08)
        contrast(1.03);
}


/* Image dark vignette */

.gift-image-wrapper::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(50,20,12,0.15),
            transparent 42%,
            rgba(50,20,12,0.13)
        );

    pointer-events: none;
}


/* Premium badge */

.gift-image-badge {
    position: absolute;

    top: 23px;
    left: 23px;

    z-index: 3;

    min-height: 27px;

    padding: 0 12px;

    border-radius: 30px;

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

    color: #ffffff;

    background:
        rgba(164,22,26,0.92);

    backdrop-filter: blur(4px);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


/* Moving shine */

.gift-image-shine {
    position: absolute;

    top: -50%;
    left: -80%;

    z-index: 2;

    width: 45%;
    height: 200%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.18),
            transparent
        );

    transform:
        rotate(20deg);

    animation:
        giftImageShine
        7s ease-in-out
        infinite;
}


/* ==================================================
   RIGHT BENEFITS
================================================== */

.gift-benefits-panel {
    min-width: 0;

    padding: 40px 35px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 16px;

    background:
        linear-gradient(
            140deg,
            #fffaf0,
            #f4eadb
        );
}

.gift-benefit-item {
    min-height: 76px;

    padding: 11px;

    display: flex;
    align-items: center;

    gap: 15px;

    border-radius: 8px;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.gift-benefit-item:hover {
    transform: translateX(7px);

    background:
        rgba(255,255,255,0.75);

    box-shadow:
        0 10px 24px rgba(82,53,29,0.08);
}


/* Feature icon */

.gift-benefit-icon {
    width: 49px;
    height: 49px;

    flex: 0 0 49px;

    border:
        1px solid
        rgba(61,40,27,0.15);

    border-radius: 50%;

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

    color: #19452c;

    background:
        #fffaf1;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        color 0.35s ease;
}

.gift-benefit-icon svg {
    width: 25px;
    height: 25px;
}

.gift-benefit-item:hover
.gift-benefit-icon {
    color: #ffffff;

    background:
        var(--gift-red-main);

    transform:
        scale(1.08)
        rotate(-5deg);
}

.gift-benefit-copy h3 {
    margin-bottom: 4px;

    color: black;


    font-size: 17px;

    font-weight: 700;
}

.gift-benefit-copy p {
    color: black;

    font-size: 13px;

    line-height: 1.45;
}


/* ==================================================
   TESTIMONIAL AREA
================================================== */

.gift-testimonials {
    position: relative;

    width: 100%;

    padding: 25px 0 28px;

    background:
        linear-gradient(
            90deg,
            #fbf4e7 0%,
            #f4e8d4 50%,
            #fbf4e7 100%
        );

    border-top:
        1px solid
        rgba(92,61,35,0.1);
}

.gift-testimonial-container {
    position: relative;

    width:
        min(
            1250px,
            calc(100% - 60px)
        );

    margin-inline: auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 0;
}


/* ==================================================
   REVIEW CARD
================================================== */

.gift-review-card {
    position: relative;

    min-height: 145px;

    padding: 10px 42px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.gift-review-card:not(:last-of-type) {
    border-right:
        1px solid
        rgba(82,51,27,0.13);
}

.gift-review-heading {
    margin-bottom: 7px;

    display: block;

    color: var(--gift-brown);


    font-size: 11px;

    font-weight: 700;

    text-align: center;

    text-transform: uppercase;
}

.gift-quote-mark {
    position: absolute;

    top: 8px;
    left: 22px;

    color:
        rgb(17 48 30);


    font-size: 60px;

    line-height: 1;
}

.gift-review-text {
    position: relative;
    z-index: 2;

    min-height: 48px;

    margin-bottom: 12px;

    color: black;


    font-size: 10px;

    font-style: italic;

    line-height: 1.6;
}


/* Review footer */

.gift-review-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;
}

.gift-review-person {
    display: flex;
    align-items: center;

    gap: 8px;
}

.gift-review-person img {
    width: 30px;
    height: 30px;

    border-radius: 50%;

    object-fit: cover;

    border:
        1px solid
        rgba(164,22,26,0.25);
}

.gift-review-person strong {
    display: block;

    margin-bottom: 2px;

    color: black;

    font-size: 8px;

    font-weight: 700;
}

.gift-review-person span {
    display: block;

    color: black;

    font-size: 11px;
}

.gift-review-stars {
    color: var(--gift-gold);

    font-size: 10px;

    letter-spacing: -1px;
}


/* ==================================================
   LEAF DECORATIONS
================================================== */

.gift-leaf-decoration {
    position: absolute;

    z-index: 0;

    font-size: 50px;

    opacity: 0.16;

    pointer-events: none;
}

.gift-leaf-left {
    left: -25px;
    top: 15px;

    transform:
        rotate(-30deg);
}

.gift-leaf-right {
    right: -25px;
    bottom: 5px;

    transform:
        scaleX(-1)
        rotate(-30deg);
}


/* ==================================================
   REVEAL STATES
================================================== */

.gift-reveal-left,
.gift-reveal-right,
.gift-reveal-up {
    opacity: 0;
}

.gift-reveal-left.is-visible {
    animation:
        giftRevealLeft
        0.9s
        cubic-bezier(.22,1,.36,1)
        forwards;
}

.gift-reveal-right.is-visible {
    animation:
        giftRevealRight
        0.8s
        cubic-bezier(.22,1,.36,1)
        forwards;

    animation-delay:
        calc(
            var(--gift-delay, 0)
            * 100ms
        );
}

.gift-reveal-up.is-visible {
    animation:
        giftRevealUp
        0.85s
        cubic-bezier(.22,1,.36,1)
        forwards;

    animation-delay:
        calc(
            var(--gift-delay, 0)
            * 100ms
        );
}


/* ==================================================
   KEYFRAMES
================================================== */

@keyframes giftRevealLeft {

    from {
        opacity: 0;

        transform:
            translateX(-50px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}

@keyframes giftRevealRight {

    from {
        opacity: 0;

        transform:
            translateX(40px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}

@keyframes giftRevealUp {

    from {
        opacity: 0;

        transform:
            translateY(35px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}

@keyframes giftImageShine {

    0%,
    70% {
        left: -80%;
    }

    100% {
        left: 140%;
    }

}


/* ==================================================
   RESPONSIVE - SMALL DESKTOP
================================================== */

@media (max-width: 1050px) {

    .gift-top-grid {
        grid-template-columns:
            31% 40% 29%;
    }

    .gift-promo-panel {
        padding: 35px 25px;
    }

    .gift-benefits-panel {
        padding: 30px 20px;
    }

    .gift-review-card {
        padding-inline: 30px;
    }

}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 850px) {

    .gift-top-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .gift-promo-panel {
        min-height: 330px;
    }

    .gift-image-panel {
        min-height: 330px;
    }

    .gift-image-wrapper,
    .gift-main-image {
        min-height: 330px;
    }

    .gift-benefits-panel {
        grid-column:
            1 / -1;

        padding:
            25px 30px;

        display: grid;

        grid-template-columns:
            repeat(3, 1fr);

        gap: 10px;
    }

    .gift-benefit-item {
        min-height: 125px;

        flex-direction: column;

        justify-content: center;

        text-align: center;
    }

    .gift-benefit-item:hover {
        transform:
            translateY(-5px);
    }

    .gift-testimonial-container {
        width:
            min(
                100% - 35px,
                800px
            );

        grid-template-columns:
            1fr;
    }

    .gift-review-card {
        min-height: 135px;

        padding:
            25px 45px;
    }

    .gift-review-card:not(:last-of-type) {
        border-right: 0;

        border-bottom:
            1px solid
            rgba(82,51,27,0.13);
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .gift-top-grid {
        display: block;
    }

    .gift-promo-panel {
        min-height: 340px;

        padding:
            45px 22px;
    }

    .gift-promo-inner h2 {
        font-size:
            clamp(
                31px,
                10vw,
                42px
            );
    }

    .gift-promo-inner p {
        font-size: 12px;
    }

    .gift-image-panel {
        min-height: 300px;
    }

    .gift-image-wrapper,
    .gift-main-image {
        min-height: 300px;
        height: 300px;
    }

    .gift-benefits-panel {
        padding:
            24px 17px;

        display: flex;

        flex-direction: column;

        gap: 7px;
    }

    .gift-benefit-item {
        min-height: 85px;

        padding: 12px;

        flex-direction: row;

        justify-content: flex-start;

        text-align: left;
    }

    .gift-benefit-item:hover {
        transform:
            translateX(5px);
    }

    .gift-benefit-icon {
        width: 52px;
        height: 52px;

        flex-basis: 52px;
    }

    .gift-testimonials {
        padding:
            18px 0;
    }

    .gift-testimonial-container {
        width:
            calc(100% - 24px);
    }

    .gift-review-card {
        padding:
            27px 28px;

        min-height: 155px;
    }

    .gift-review-text {
        font-size: 11px;
    }

    .gift-review-footer {
        align-items: flex-end;
    }

    .gift-leaf-decoration {
        display: none;
    }

}


/* ==================================================
   VERY SMALL MOBILE
================================================== */

@media (max-width: 380px) {

    .gift-promo-panel {
        padding:
            38px 17px;
    }

    .gift-review-card {
        padding:
            25px 20px;
    }

    .gift-quote-mark {
        left: 8px;
    }

}


/* ==================================================
   ACCESSIBILITY
================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation:
            none !important;

        transition:
            none !important;
    }

    .gift-reveal-left,
    .gift-reveal-right,
    .gift-reveal-up {
        opacity: 1;
        transform: none;
    }

}
p.gift-review-text {
    font-size: 16px;
}
strong.font {
    font-size: 16px;
}


/* ==================================================
  7th section
================================================== */

/* ==================================================
   PREMIUM SPICES - REFERENCE STYLE
================================================== */

.psp-section {
    --psp-red: #c51f24;
    --psp-red-light: #ea3e43;
    --psp-red-dark: #7d1014;

    --psp-gold: #d5a52c;
    --psp-gold-light: #f0cb59;

    --psp-bg: #060b07;
    --psp-card: #181b18;
    --psp-card-light: #22251f;

    --psp-text: #f4eee6;
    --psp-muted: #aba297;

    width: 100%;
    padding: 70px 0 55px;

    color: var(--psp-text);

    background: radial-gradient(circle at 15% 18%, rgba(197, 31, 36, 0.11), transparent 28%), radial-gradient(circle at 80% 70%, rgba(213, 165, 44, 0.05), transparent 28%), linear-gradient(120deg, #0c2115, #11311f 55%, #1b4c30);

    overflow: hidden;
}

.psp-container {
    width: min(1280px, calc(100% - 50px));
    margin-inline: auto;
}


/* ==================================================
   HEADING
================================================== */

.psp-heading {
    max-width: 900px;
    margin-bottom: 36px;
}

.psp-eyebrow {
    display: inline-block;
    margin-bottom: 10px;

    color: #ddeb2c;

    font-size: 16px;
    font-weight: 800;

    letter-spacing: 2px;
    text-transform: uppercase;
}

.psp-heading h2 {
    margin: 0 0 13px;

    color: #ffffff;

    

    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.08;

    letter-spacing: -1.3px;
}

.psp-heading h2 span {
    display: block;

    color: white;
}

.psp-heading p {
    max-width: 820px;

    color: var(--psp-muted);

    font-size: 17px;
    line-height: 1.75;
}


/* ==================================================
   MAIN LAYOUT
================================================== */

.psp-products-layout {
    display: grid;

    grid-template-columns:
        minmax(360px, 1fr)
        minmax(480px, 1.45fr);

    gap: 18px;
}


/* ==================================================
   FEATURED CARD
================================================== */

.psp-featured-card {
    position: relative;

    min-height: 610px;
    padding: 28px;

    border:
        1px solid rgb(26 66 40);

    border-radius: 8px;

    display: flex;
    flex-direction: column;

    background: radial-gradient(circle at 55% 42%, rgba(197, 31, 36, 0.17), transparent 32%), linear-gradient(145deg, #1d452a, #1d442a 58%, #0f120f);

    box-shadow:
        0 18px 55px rgba(0,0,0,0.28);

    overflow: hidden;

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease,
        border-color 0.4s ease;
}

.psp-featured-card:hover {
    transform: translateY(-8px);

    border-color:
        rgb(221 235 44);

    box-shadow:
        0 30px 65px rgba(0,0,0,0.45);
}


/* Featured label */

.psp-featured-label {
    position: absolute;
    top: 19px;
    left: 0;

    z-index: 5;

    min-height: 31px;
    padding: 0 15px;

    display: inline-flex;
    align-items: center;

    color: #ffffff;
    background: #102f1e;

    font-size: 16px;
    font-weight: 700;
}


/* Featured heading */

.psp-featured-header {
    margin-top: 28px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 15px;
}

.psp-product-type {
    display: block;
    margin-bottom: 6px;

    color: #ddeb2c;

    font-size: 16px;
    font-weight: 700;
}

.psp-featured-header h3 {
    color: #ffffff;

   

    font-size: 28px;
    line-height: 1.15;
}

.psp-featured-header h3 span {
    display: block;

    color: white;
}

.psp-product-number {
    color: var(--psp-muted);

    font-size: 16px;
}


/* ==================================================
   FEATURED IMAGE
================================================== */

.psp-featured-image-area {
    position: relative;

    flex: 1;

    min-height: 300px;

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

.psp-featured-glow {
    position: absolute;

    width: 290px;
    height: 290px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(197,31,36,0.28),
            rgba(213,165,44,0.05) 45%,
            transparent 70%
        );

    filter: blur(22px);

    animation:
        pspGlowPulse
        4s ease-in-out
        infinite;
}

.psp-featured-image {
    position: relative;
    z-index: 2;

    width: 86%;
    height: 285px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 24px 18px rgba(0,0,0,0.55)
        );

    transition:
        transform 0.55s cubic-bezier(.22,1,.36,1);
}

.psp-featured-card:hover
.psp-featured-image {
    transform:
        translateY(-9px)
        scale(1.06);
}


/* Floating information */

.psp-floating-info {
    position: absolute;

    right: 5px;
    bottom: 35px;

    z-index: 3;

    padding: 11px 14px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius: 5px;

    background:
        rgba(8,10,8,0.78);

    backdrop-filter: blur(8px);
}

.psp-floating-info span {
    display: block;
    margin-bottom: 3px;

    color: var(--psp-muted);

    font-size: 16px;
}

.psp-floating-info strong {
    color: var(--psp-red-light);

    font-size: 18px;
}


/* Description */

.psp-featured-description {
    margin-bottom: 21px;

    color: var(--psp-muted);

    font-size: 16px;
    line-height: 1.7;
}


/* Footer */

.psp-featured-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 15px;
}

.psp-featured-price span {
    display: block;
    margin-bottom: 4px;

    color: var(--psp-muted);

    font-size: 16px;
}

.psp-featured-price strong {
    color: var(--psp-gold-light);

    font-size: 25px;
}


/* ==================================================
   FEATURED BUTTONS
================================================== */

.psp-featured-buttons {
    display: flex;
    align-items: center;
    gap: 9px;
}

.psp-shop-button,
.psp-whatsapp-button {
    min-height: 47px;
    padding: 0 17px;

    border: 0;
    border-radius: 4px;

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

    gap: 8px;

    color: #ffffff;

    font-size: 16px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.psp-shop-button {
    background: black;
}

.psp-shop-button:hover {
    background: var(--psp-red-dark);

    transform: translateY(-3px);
}

.psp-shop-button svg,
.psp-whatsapp-button svg {
    width: 19px;
    height: 19px;
}

.psp-whatsapp-button {
    background: #1e6a3c;
}

.psp-whatsapp-button:hover {
    background: #15552e;

    transform: translateY(-3px);

    box-shadow:
        0 10px 24px rgba(30,106,60,0.3);
}


/* ==================================================
   RIGHT 2 x 2 GRID
================================================== */

.psp-small-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    grid-template-rows:
        repeat(2, minmax(280px, auto));

    gap: 18px;
}


/* ==================================================
   SMALL CARD
================================================== */

.psp-small-card {
    position: relative;

    min-width: 0;
    min-height: 295px;

    padding: 15px;

    border:
        1px solid
        rgba(255,255,255,0.07);

    border-radius: 7px;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            145deg,
            #20221e,
            #141713
        );

    overflow: hidden;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}

.psp-small-card:hover {
    transform: translateY(-6px);

    border-color:
        rgb(216 231 44);

    box-shadow:
        0 20px 40px rgba(0,0,0,0.3);
}


/* Badge */

.psp-card-badge {
    position: absolute;

    top: 11px;
    right: 11px;

    z-index: 5;

    min-height: 27px;
    padding: 0 9px;

    border-radius: 3px;

    display: inline-flex;
    align-items: center;

    color: #ffffff;
    background: #102f1e;

    font-size: 16px;
    font-weight: 700;
}


/* Small image */

.psp-small-image-area {
    position: relative;

    min-height: 135px;

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

.psp-small-glow {
    position: absolute;

    width: 130px;
    height: 130px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(197,31,36,0.16),
            transparent 70%
        );
}

.psp-small-image-area img {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 125px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 12px 12px rgba(0,0,0,0.42)
        );

    transition:
        transform 0.45s ease;
}

.psp-small-card:hover
.psp-small-image-area img {
    transform:
        translateY(-5px)
        scale(1.08);
}


/* Small card content */

.psp-small-content {
    flex: 1;

    display: flex;
    flex-direction: column;
}

.psp-small-content h3 {
    margin-bottom: 6px;

    color: #ffffff;

   

    font-size: 21px;
    line-height: 1.25;
}

.psp-small-content p {
    margin-bottom: 13px;

    color: var(--psp-muted);

    font-size: 16px;
    line-height: 1.5;
}


/* Small footer */

.psp-small-footer {
    margin-top: auto;

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

    gap: 10px;
}

.psp-small-footer > strong {
    color: var(--psp-gold-light);

    font-size: 21px;
}

.psp-small-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}


/* Shop */

.psp-small-shop {
    min-height: 39px;
    padding: 0 12px;

    border-radius: 3px;

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

    color: #ffffff;
    background: black;

    font-size: 16px;
    font-weight: 700;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.psp-small-shop:hover {
    background: var(--psp-red-dark);

    transform: translateY(-2px);
}


/* WhatsApp */

.psp-small-whatsapp {
    min-width: 42px;
    min-height: 39px;

    padding: 0 8px;

    border: 0;
    border-radius: 3px;

    color: #ffffff;
    background: #1e6a3c;

    font-size: 16px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.psp-small-whatsapp:hover {
    background: #15552e;

    transform: translateY(-2px);
}


/* ==================================================
   BOTTOM COLLECTION BUTTON
================================================== */

.psp-bottom-action {
    margin-top: 26px;

    display: flex;
    justify-content: center;
}

.psp-view-all {
    min-height: 48px;
    padding: 0 22px;

    border:
        1px solid rgb(24 62 40);

    border-radius: 4px;

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

    gap: 8px;

    color: #ffffff;

    background:
        rgba(197,31,36,0.06);

    font-size: 16px;
    font-weight: 700;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.psp-view-all:hover {
    background: #cf932b;

    transform: translateY(-3px);
}

.psp-view-all svg {
    width: 19px;
    height: 19px;
}


/* ==================================================
   SCROLL ANIMATION
================================================== */

.psp-reveal {
    opacity: 0;

    transform:
        translateY(30px)
        scale(0.98);
}

.psp-reveal.is-visible {
    animation:
        pspReveal
        0.8s
        cubic-bezier(.22,1,.36,1)
        forwards;

    animation-delay:
        calc(
            var(--psp-delay, 0)
            * 110ms
        );
}

@keyframes pspReveal {

    from {
        opacity: 0;

        transform:
            translateY(30px)
            scale(0.98);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes pspGlowPulse {

    0%,
    100% {
        transform: scale(0.9);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}


/* ==================================================
   RESPONSIVE - SMALL DESKTOP
================================================== */

@media (max-width: 1050px) {

    .psp-products-layout {
        grid-template-columns:
            minmax(330px, 0.9fr)
            minmax(430px, 1.2fr);
    }

    .psp-featured-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .psp-shop-button,
    .psp-whatsapp-button {
        width: 100%;
    }

}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 850px) {

    .psp-section {
        padding:
            55px 0;
    }

    .psp-container {
        width:
            min(
                100% - 30px,
                800px
            );
    }

    .psp-products-layout {
        grid-template-columns:
            1fr;
    }

    .psp-featured-card {
        min-height: 560px;
    }

    .psp-small-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .psp-section {
        padding:
            45px 0;
    }

    .psp-container {
        width:
            calc(100% - 26px);
    }

    .psp-heading {
        margin-bottom:
            28px;
    }

    .psp-heading h2 {
        font-size:
            clamp(
                31px,
                10vw,
                43px
            );
    }

    .psp-heading p {
        font-size: 16px;
    }

    .psp-featured-card {
        min-height: auto;

        padding:
            22px 17px;
    }

    .psp-featured-image-area {
        min-height:
            290px;
    }

    .psp-featured-image {
        width: 95%;
        height: 250px;
    }

    .psp-floating-info {
        right: 0;
    }

    .psp-featured-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .psp-featured-buttons {
        width: 100%;
    }

    .psp-small-grid {
        grid-template-columns:
            1fr;
    }

    .psp-small-card {
        min-height: 360px;

        padding:
            17px;
    }

    .psp-small-image-area {
        min-height:
            165px;
    }

    .psp-small-image-area img {
        height:
            150px;
    }

}


/* ==================================================
   VERY SMALL MOBILE
================================================== */

@media (max-width: 380px) {

    .psp-heading h2 {
        font-size:
            30px;
    }

    .psp-small-footer {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .psp-small-actions {
        width: 100%;
    }

    .psp-small-shop {
        flex: 1;
    }

    .psp-small-whatsapp {
        min-width: 65px;
    }

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    .psp-reveal,
    .psp-reveal.is-visible {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .psp-featured-glow {
        animation: none;
    }
}
article.psp-small-card.psp-reveal.is-visible {
    background: #1c3c26 !important;
}

/* ==================================================
   8th section
================================================== */

/* ==================================================
   NEW SPICE ARRIVALS
   DARK BROWN + CHILLI RED
================================================== */

.dh-spice-arrivals {
    --dh-red: #b91e23;
    --dh-red-light: #e34146;
    --dh-red-dark: #721014;

    --dh-brown: #381a12;
    --dh-brown-mid: #542012;
    --dh-brown-light: #773018;

    --dh-orange: #c76a31;
    --dh-orange-light: #e89250;

    --dh-gold: #dfa85d;
    --dh-cream: #f2ddc9;

    --dh-dark: #070d0d;
    --dh-dark-soft: #0d1413;

    --dh-white: #ffffff;
    --dh-muted: #d0bdb1;

    position: relative;

    width: 100%;

    padding: 70px 0 60px;

    color: var(--dh-white);

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(185, 30, 35, 0.16),
            transparent 34%
        ),
        radial-gradient(
            circle at 15% 65%,
            rgba(119, 48, 24, 0.10),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #091011 0%,
            #060c0c 100%
        );

    overflow: hidden;
}


/* Fine luxury texture */

.dh-spice-arrivals::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.3;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.018) 1px,
            transparent 1px
        );

    background-size:
        52px 52px;
}


.dh-spice-wrap {
    position: relative;
    z-index: 2;

    width:
        min(
            1260px,
            calc(100% - 50px)
        );

    margin-inline: auto;
}


/* ==================================================
   HEADING
================================================== */

.dh-spice-heading {
    width: min(760px, 100%);

    margin:
        0 auto 40px;

    text-align: center;
}


.dh-spice-overline {
    display: inline-block;

    margin-bottom: 8px;

    color: #ddeb2c;

    font-size: 16px;
    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.dh-spice-heading h2 {
    margin: 0;

    color: var(--dh-cream);

   

    font-size:
        clamp(
            34px,
            4vw,
            50px
        );

    font-weight: 700;

    line-height: 1.08;

    text-transform: uppercase;

    text-shadow:
        0 4px 18px
        rgba(0, 0, 0, 0.35);
}


/* Reference-style lines */

.dh-spice-heading-line {
    width: 150px;

    margin:
        16px auto 18px;

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

    gap: 9px;
}


.dh-spice-heading-line span {
    width: 58px;
    height: 1px;

    background: linear-gradient(90deg, transparent, #ddeb2c);
}


.dh-spice-heading-line span:last-child {
    background: linear-gradient(90deg, #ddeb2c, transparent);
}


.dh-spice-heading-line i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #143924;

    box-shadow:
        0 0 15px
        rgba(199, 106, 49, 0.5);
}


.dh-spice-heading p {
    margin: 0;

    color: white;

    font-size: 17px;

    line-height: 1.75;
}


/* ==================================================
   GRID
================================================== */

.dh-spice-grid {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    align-items: stretch;

    gap: 16px;
}


/* ==================================================
   CARD
================================================== */

.dh-spice-card {
    position: relative;

    min-width: 0;

    border:
        1px solid
        rgba(255, 255, 255, 0.06);

    border-radius: 4px;

    background:
        #111312;

    overflow: hidden;

    box-shadow:
        0 14px 35px
        rgba(0, 0, 0, 0.28);

    transition:
        transform 0.4s
        cubic-bezier(.22, 1, .36, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
}


.dh-spice-card:hover {
    transform:
        translateY(-10px);

    border-color:
        rgb(245 251 176);

    box-shadow:
        0 28px 60px
        rgba(0, 0, 0, 0.42),
        0 0 25px
        rgba(185, 30, 35, 0.08);
}


/* ==================================================
   MAIN BROWN CARD AREA
================================================== */

.dh-spice-card-main {
    position: relative;

    min-height: 475px;

    padding:
        34px 21px 23px;

    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;

   background: radial-gradient(circle at 50% 70%, rgba(227, 65, 70, 0.14), transparent 33%), linear-gradient(180deg, #0f2d1d 0%, #194027 35%, #102e1d 68%, #1c482d 100%);

    overflow: hidden;
}


/* Dark chilli gradient */

.dh-spice-card-main::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            145deg,
            rgba(0, 0, 0, 0.16),
            transparent 45%,
            rgba(185, 30, 35, 0.12)
        );

    pointer-events: none;
}


/* Texture */

.dh-spice-card-main::after {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.18;

    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.025) 0,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px,
            transparent 7px
        );

    pointer-events: none;
}


/* Number */

.dh-spice-number {
    position: absolute;

    top: 14px;
    right: 15px;

    z-index: 3;

    color:
        rgba(255, 255, 255, 0.30);

    font-size: 16px;
    font-weight: 800;
}


/* Label */

.dh-spice-label {
    position: relative;
    z-index: 3;

    margin-bottom: 8px;

    color: #f7fdb1;

    font-size: 16px;
    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


/* Heading */

.dh-spice-card h3 {
    position: relative;
    z-index: 3;

    margin:
        0 0 13px;

    color: #ffffff;

    

    font-size: 26px;
    font-weight: 700;

    line-height: 1.12;

    text-transform: uppercase;
}


.dh-spice-card h3 span {
    display: block;

    color: #f7fdb1;
}


/* Description */

.dh-spice-card p {
    position: relative;
    z-index: 3;

    min-height: 77px;

    margin:
        0 0 14px;

    color:
        rgba(255, 255, 255, 0.84);

    font-size: 16px;

    line-height: 1.55;
}


/* ==================================================
   PRODUCT IMAGE
================================================== */

.dh-spice-product-visual {
    position: relative;

    width: 100%;

    min-height: 155px;

    margin-top: auto;

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


.dh-spice-product-glow {
    position: absolute;

    width: 150px;
    height: 100px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(237, 146, 80, 0.24),
            rgba(185, 30, 35, 0.09) 50%,
            transparent 75%
        );

    filter:
        blur(20px);

    animation:
        dhSpiceGlow
        4s ease-in-out
        infinite;
}


.dh-spice-product-visual img {
    position: relative;
    z-index: 3;

    width: 100%;
    height: 145px;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(
            0 16px 12px
            rgba(31, 7, 4, 0.40)
        );

    transition:
        transform 0.5s
        cubic-bezier(.22, 1, .36, 1),
        filter 0.5s ease;
}


.dh-spice-card:hover
.dh-spice-product-visual img {
    transform:
        translateY(-9px)
        scale(1.09);

    filter:
        drop-shadow(
            0 21px 18px
            rgba(31, 7, 4, 0.50)
        )
        saturate(1.08);
}


/* ==================================================
   BUTTON
================================================== */

.dh-spice-button {
    position: relative;
    z-index: 3;

    min-width: 145px;
    min-height: 46px;

    margin-top: 13px;

    padding:
        0 20px;

    border:
        1px solid rgb(0 0 0 / 22%);

    border-radius: 30px;

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

    gap: 8px;

    color: #ffffff;

    background:
        linear-gradient(180deg, #060c0d, #070d0d);

    box-shadow:
        0 7px 18px
        rgba(47, 11, 5, 0.26);

    font-size: 16px;
    font-weight: 700;

    overflow: hidden;

    transition:
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* Shine */

.dh-spice-button::before {
    content: "";

    position: absolute;

    top: 0;
    left: -130%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.30),
            transparent
        );

    transform:
        skewX(-24deg);

    transition:
        left 0.7s ease;
}


.dh-spice-button:hover::before {
    left: 145%;
}


.dh-spice-button:hover {
    background: #263925;
    transform: translateY(-3px);
    box-shadow: 0 11px 24px rgb(43 64 42);
}


.dh-spice-button svg {
    width: 18px;
    height: 18px;

    transition:
        transform 0.3s ease;
}


.dh-spice-button:hover svg {
    transform:
        translateX(4px);
}


/* ==================================================
   BOTTOM PHOTO STRIP
================================================== */

.dh-spice-card-bottom {
    position: relative;

    width: 100%;
    height: 125px;

    overflow: hidden;

    background:
        #15100d;
}


.dh-spice-card-bottom img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.55s ease,
        filter 0.55s ease;
}


.dh-spice-card-bottom::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.06),
            rgba(0, 0, 0, 0.35)
        );

    pointer-events: none;
}


.dh-spice-card:hover
.dh-spice-card-bottom img {
    transform:
        scale(1.08);

    filter:
        saturate(1.08)
        contrast(1.04);
}


/* ==================================================
   PRICE
================================================== */

.dh-spice-price {
    position: absolute;

    top: 12px;
    left: 50%;

    z-index: 4;

    min-width: 88px;
    min-height: 36px;

    padding:
        0 14px;

    border:
        1px solid
        rgba(255, 255, 255, 0.17);

    border-radius: 30px;

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

    transform:
        translateX(-50%);

    color: #ffffff;

    background:
        rgba(90, 20, 16, 0.88);

    backdrop-filter:
        blur(5px);

    box-shadow:
        0 5px 14px
        rgba(0, 0, 0, 0.30);

    font-size: 16px;
    font-weight: 800;
}


/* ==================================================
   VIEW ALL
================================================== */

.dh-spice-footer {
    margin-top: 34px;

    display: flex;
    justify-content: center;
}


.dh-spice-view-all {
    min-height: 50px;

    padding:
        0 25px;

    border: 1px solid rgb(15 44 28);

    border-radius: 4px;

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

    gap: 9px;

    color: #ffffff;

    background:
        rgb(44 65 43);

    font-size: 16px;
    font-weight: 700;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.dh-spice-view-all:hover {
    background:
        #cd922a;

    border-color: #cd922a;

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 25px
        rgba(185, 30, 35, 0.24);
}


.dh-spice-view-all svg {
    width: 20px;
    height: 20px;
}


/* ==================================================
   ENTRANCE ANIMATION
================================================== */

.dh-spice-reveal {
    opacity: 0;

    transform:
        translateY(35px)
        scale(0.97);
}


.dh-spice-reveal.is-visible {
    animation:
        dhSpiceReveal
        0.8s
        cubic-bezier(.22, 1, .36, 1)
        forwards;

    animation-delay:
        calc(
            var(--delay, 0)
            * 120ms
        );
}


@keyframes dhSpiceReveal {

    from {
        opacity: 0;

        transform:
            translateY(35px)
            scale(0.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


@keyframes dhSpiceGlow {

    0%,
    100% {
        transform:
            scale(0.9);

        opacity: 0.65;
    }

    50% {
        transform:
            scale(1.12);

        opacity: 1;
    }

}


/* ==================================================
   RESPONSIVE — SMALL DESKTOP
================================================== */

@media (max-width: 1050px) {

    .dh-spice-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 20px;
    }


    .dh-spice-card-main {
        min-height: 485px;
    }


    .dh-spice-product-visual {
        min-height: 170px;
    }


    .dh-spice-product-visual img {
        height: 160px;
    }

}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 760px) {

    .dh-spice-arrivals {
        padding:
            55px 0 48px;
    }


    .dh-spice-wrap {
        width:
            min(
                100% - 30px,
                700px
            );
    }


    .dh-spice-heading {
        margin-bottom:
            32px;
    }


    .dh-spice-heading h2 {
        font-size:
            36px;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 580px) {

    .dh-spice-arrivals {
        padding:
            45px 0 40px;
    }


    .dh-spice-wrap {
        width:
            calc(100% - 26px);
    }


    .dh-spice-heading h2 {
        font-size:
            clamp(
                30px,
                10vw,
                38px
            );
    }


    .dh-spice-heading p {
        font-size:
            16px;
    }


    .dh-spice-grid {
        grid-template-columns:
            1fr;

        gap: 20px;
    }


    .dh-spice-card {
        width: 100%;
        max-width: 430px;

        margin-inline: auto;
    }


    .dh-spice-card-main {
        min-height: auto;

        padding:
            33px 20px 25px;
    }


    .dh-spice-card p {
        min-height:
            auto;
    }


    .dh-spice-product-visual {
        min-height:
            190px;

        margin-top:
            10px;
    }


    .dh-spice-product-visual img {
        height:
            175px;
    }


    .dh-spice-button {
        width: 100%;

        min-height:
            49px;
    }


    .dh-spice-card-bottom {
        height:
            150px;
    }

}


/* ==================================================
   VERY SMALL MOBILE
================================================== */

@media (max-width: 380px) {

    .dh-spice-card h3 {
        font-size:
            23px;
    }


    .dh-spice-heading-line {
        width:
            120px;
    }


    .dh-spice-heading-line span {
        width:
            44px;
    }

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    .dh-spice-reveal,
    .dh-spice-reveal.is-visible {
        opacity: 1;

        transform: none;

        animation: none;
    }


    .dh-spice-product-glow {
        animation: none;
    }


    .dh-spice-card,
    .dh-spice-product-visual img,
    .dh-spice-card-bottom img {
        transition: none;
    }

}


/* ==================================================
   SPICE FOOTER
================================================== */

.spice-footer {
    --footer-bg: #120d0b;
    --footer-bg-dark: #0c0908;

    --footer-brown: #24140f;
    --footer-brown-soft: #38251d;

    --footer-red: #c51f24;
    --footer-red-dark: #801014;

    --footer-gold: #d58b2a;
    --footer-gold-light: #efb858;

    --footer-cream: #f4e7d8;
    --footer-muted: #b9a89c;

    position: relative;

    width: 100%;

    padding:
        70px 0 0;

    color: var(--footer-cream);

   background: radial-gradient(circle at 8% 20%, rgba(197, 31, 36, 0.10), transparent 26%), radial-gradient(circle at 90% 65%, rgba(213, 139, 42, 0.07), transparent 27%), linear-gradient(135deg, #123521 0%, #0f110d 45%, #1a482e 100%) !important;

    overflow: hidden;
}


/* Decorative top chilli-red line */

.spice-footer::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

       background: linear-gradient(90deg, transparent, #448549, #ddeb2c, #448549, transparent);
}


/* Fine texture */

.spice-footer::after {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.16;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

    pointer-events: none;
}


/* ==================================================
   DECORATIVE SPICE IMAGE
================================================== */

.spice-footer-decoration {
    position: absolute;

    right: -80px;
    bottom: -40px;

    width: 360px;

    opacity: 0.10;

    pointer-events: none;

    transform:
        rotate(-12deg);
}


.spice-footer-decoration img {
    width: 100%;
    display: block;

    filter:
        saturate(1.15)
        sepia(0.18);
}


/* ==================================================
   CONTAINER
================================================== */

.spice-footer-container {
    position: relative;

    z-index: 2;

    width:
        min(
            1280px,
            calc(100% - 50px)
        );

    margin-inline: auto;
}


/* ==================================================
   GRID
================================================== */

.spice-footer-grid {
    display: grid;

    grid-template-columns:
        1.55fr
        repeat(3, 0.8fr);

    gap: 55px;

    padding-bottom: 50px;
}


/* ==================================================
   BRAND
================================================== */

.spice-footer-brand {
    max-width: 390px;
}


.spice-footer-logo {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 22px;
}


.spice-footer-logo-icon {
    width: 48px;
    height: 48px;

    border-radius: 10px;

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

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--footer-red),
            var(--footer-red-dark)
        );

    box-shadow:
        0 8px 22px
        rgba(197, 31, 36, 0.25);
}


.spice-footer-logo-icon svg {
    width: 29px;
    height: 29px;
}


.spice-footer-logo-text {
    width: 188px;
    display: flex;
    flex-direction: column;

    line-height: 1.1;
}


.spice-footer-logo-text strong {
    color: var(--footer-gold-light);

  

    font-size: 24px;
}


.spice-footer-logo-text small {
    margin-top: 5px;

    color: var(--footer-muted);

    font-size: 16px;
}


.spice-footer-about {
    max-width: 360px;

    margin-bottom: 24px;

    color: #ffffff;

    font-size: 16px;

    line-height: 1.7;
}


/* ==================================================
   SOCIAL ICONS
================================================== */

.spice-footer-social {
    display: flex;
    align-items: center;

    gap: 10px;
}


.spice-footer-social a {
    width: 43px;
    height: 43px;

    border:
        1px solid
        var(--footer-brown-soft);

    border-radius: 50%;

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

    color: #ddeb2d;

    background:
        rgba(255, 255, 255, 0.025);

    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.spice-footer-social svg {
    width: 19px;
    height: 19px;
}


.spice-footer-social a:hover {
    color: #ffffff;

    background:
        var(--footer-red);

    border-color:
        var(--footer-red);

    transform:
        translateY(-4px);

    box-shadow:
        0 9px 20px
        rgba(197, 31, 36, 0.22);
}


/* ==================================================
   COLUMNS
================================================== */

.spice-footer-column h3 {
    position: relative;

    margin:
        8px 0 22px;

    padding-left: 18px;

    color: #ddeb2c;

  

    font-size: 20px;
}


.spice-footer-column h3::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:
        #266831;

    transform:
        translateY(-50%);
}


.spice-footer-column ul {
    list-style: none;

    margin: 0;
    padding: 0;
}


.spice-footer-column li {
    margin-bottom: 13px;
}


.spice-footer-column a {
    position: relative;

    color: #ffffff;

    font-size: 16px;

    transition:
        color 0.3s ease,
        padding-left 0.3s ease;
}


.spice-footer-column a::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 0;
    height: 1px;

    background:
        var(--footer-red);

    transform:
        translateY(-50%);

    transition:
        width 0.3s ease;
}


.spice-footer-column a:hover {
    padding-left: 17px;

    color: #ffffff;
}


.spice-footer-column a:hover::before {
    width: 10px;
}


/* ==================================================
   NEWSLETTER
================================================== */

.spice-footer-newsletter {
    margin-bottom: 36px;

    padding:
        26px 30px;

    border:
        1px solid
        var(--footer-brown-soft);

    border-radius: 9px;

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

    gap: 30px;

    background:
        linear-gradient(
            120deg,
            rgba(197, 31, 36, 0.08),
            rgba(255, 255, 255, 0.018)
        );
}


.spice-newsletter-small {
    display: block;

    margin-bottom: 6px;

    color: var(--footer-red);

    font-size: 16px;
    font-weight: 800;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.spice-footer-newsletter h3 {
    margin: 0;

    color: var(--footer-cream);

   

    font-size: 23px;
}


/* Form */

.spice-newsletter-form {
    width: min(520px, 100%);

    display: grid;

    grid-template-columns:
        1fr auto;
}


.spice-newsletter-form input {
    min-width: 0;
    height: 50px;

    padding:
        0 17px;

    border:
        1px solid
        var(--footer-brown-soft);

    border-right: 0;

    border-radius:
        5px 0 0 5px;

    outline: none;

    color: #ffffff;

    background:
        #0c0908;

    font-size: 16px;
}


.spice-newsletter-form input::placeholder {
    color: #8e7f75;
}


.spice-newsletter-form input:focus {
    border-color:
        var(--footer-red);
}


.spice-newsletter-form button {
    min-height: 50px;

    padding:
        0 20px;

    border: 0;

    border-radius:
        0 5px 5px 0;

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

    gap: 8px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--footer-red),
            var(--footer-red-dark)
        );

    font-size: 16px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.spice-newsletter-form button:hover {
    box-shadow:
        0 8px 22px
        rgba(197, 31, 36, 0.27);
}


.spice-newsletter-form button svg {
    width: 18px;
    height: 18px;
}


/* ==================================================
   BOTTOM
================================================== */

.spice-footer-bottom {
    min-height: 76px;

        border-top: 1px solid #ddeb2c;

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

    gap: 25px;
}


.spice-footer-bottom p {
    margin: 0;

    color: #ffffff;

    font-size: 16px;
}


.spice-footer-bottom-links {
    display: flex;
    align-items: center;

    gap: 25px;
}


.spice-footer-bottom-links a {
    color: #ffffff;

    font-size: 16px;

    transition:
        color 0.3s ease;
}


.spice-footer-bottom-links a:hover {
    color:
        var(--footer-red-light);
}


/* ==================================================
   REVEAL ANIMATION
================================================== */

.footer-reveal {
    opacity: 0;

    transform:
        translateY(28px);
}


.footer-reveal.is-visible {
    animation:
        footerReveal
        0.75s
        cubic-bezier(.22, 1, .36, 1)
        forwards;

    animation-delay:
        calc(
            var(--footer-delay, 0)
            * 120ms
        );
}


@keyframes footerReveal {

    from {
        opacity: 0;

        transform:
            translateY(28px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* ==================================================
   SMALL DESKTOP
================================================== */

@media (max-width: 1050px) {

    .spice-footer-grid {
        grid-template-columns:
            1.3fr
            repeat(3, 0.75fr);

        gap: 30px;
    }

}


/* ==================================================
   TABLET
================================================== */

@media (max-width: 850px) {

    .spice-footer {
        padding-top:
            55px;
    }


    .spice-footer-container {
        width:
            min(
                100% - 34px,
                800px
            );
    }


    .spice-footer-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap:
            40px 30px;
    }


    .spice-footer-brand {
        max-width:
            100%;
    }


    .spice-footer-newsletter {
        align-items:
            stretch;

        flex-direction:
            column;
    }


    .spice-newsletter-form {
        width: 100%;
    }


    .spice-footer-bottom {
        padding:
            22px 0;

        align-items:
            flex-start;

        flex-direction:
            column;
    }

}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 580px) {

    .spice-footer {
        padding-top:
            45px;
    }


    .spice-footer-container {
        width:
            calc(100% - 28px);
    }


    .spice-footer-grid {
        grid-template-columns:
            1fr;

        gap: 34px;
    }


    .spice-footer-brand {
        text-align: center;
    }


    .spice-footer-logo {
        justify-content:
            center;
    }


    .spice-footer-about {
        margin-inline:
            auto;
    }


    .spice-footer-social {
        justify-content:
            center;
    }


    .spice-footer-column {
        text-align:
            center;
    }


    .spice-footer-column h3 {
        width: fit-content;

        margin:
            0 auto 20px;
    }


    .spice-footer-newsletter {
        padding:
            22px 18px;

        text-align:
            center;
    }


    .spice-newsletter-form {
        display: flex;
        flex-direction: column;

        gap: 9px;
    }


    .spice-newsletter-form input,
    .spice-newsletter-form button {
        width: 100%;

        border:
            1px solid
            var(--footer-brown-soft);

        border-radius: 5px;
    }


    .spice-footer-bottom {
        align-items:
            center;

        text-align:
            center;
    }


    .spice-footer-bottom-links {
        flex-direction:
            column;

        gap: 12px;
    }


    .spice-footer-decoration {
        width: 230px;

        opacity: 0.05;
    }

}


/* ==================================================
   REDUCED MOTION
================================================== */

@media (prefers-reduced-motion: reduce) {

    .footer-reveal,
    .footer-reveal.is-visible {
        opacity: 1;

        transform: none;

        animation: none;
    }

}


/* =====================================================
   COLORS
===================================================== */

:root {
    --green: #1f673f;
    --green-dark: #15502f;
    --green-hover: #104326;
    --cream: #f7ead6;
    --cream-light: #fffaf2;
    --cream-image: #f6e8d2;
    --brown: #39281c;
    --gold: #d7940c;
    --border: #dfcfb7;
    --muted: #7f705e;
}


/* =====================================================
   RESET
===================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f7ead6;
    color: #35271c;
}


/* =====================================================
   NEW COMPACT HEADER BANNER
===================================================== */

.shop-page-banner {
    position: relative;

    width: 100%;

    height: 391px;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: linear-gradient(rgb(15 65 38 / 42%), rgba(15, 65, 38, 0.78)), url(../images/indian-condiments-with-copy-space-view.webp);
}


.shop-page-banner::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d7940c,
            transparent
        );
}


.shop-page-banner-container {
    position: relative;

    z-index: 2;

    width: min(1200px, 92%);

    margin: auto;
}


.banner-small-title {
    display: block;

    margin-bottom: 6px;

    color: #f2dcae;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.5px;
}


.shop-page-banner h1 {
    margin: 0 0 8px;

    color: #ffffff;


    font-size: 48px !important;

    line-height: 1;

    font-weight: 700;
}


.banner-breadcrumb {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: rgba(255,255,255,.78);

    font-size: 11px;
}


.banner-breadcrumb a {
    color: #f2dcae;

    text-decoration: none;

    transition: .2s;
}


.banner-breadcrumb a:hover {
    color: #ffffff;
}


/* DECORATION */

.banner-decoration {
    position: absolute;

    width: 180px;
    height: 180px;

    border: 1px solid rgba(255,255,255,.08);

    border-radius: 50%;
}


.banner-decoration-left {
    left: -75px;
    top: -80px;
}


.banner-decoration-right {
    right: -75px;
    bottom: -100px;
}


/* =====================================================
   SHOP SECTION - REDUCED HEIGHT
===================================================== */

.shop-section {
    width: 100%;

    min-height: 100vh;

    padding: 38px 25px 80px;

    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(255,255,255,.55),
            transparent 26%
        ),
        #f7ead6;
}


.shop-container {
    width: 100%;

    max-width: 1450px;

    margin: 0 auto;
}


/* =====================================================
   SMALLER SHOP HEADING
===================================================== */

.shop-header {
    margin-bottom: 28px;
}


.small-heading {
    display: block;

    color: var(--green);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2.3px;

    margin-bottom: 7px;
}


.shop-header h2 {
    margin: 0 0 8px;


    color: var(--green);

    font-size: clamp(27px, 2.7vw, 36px);

    line-height: 1.08;

    font-weight: 700;
}


.shop-header h2 span {
    color: #9a6730;
}


.shop-header p {
    max-width: 610px;

    margin: 0;

    color: #746655;

    font-size: 16px;

    line-height: 1.65;
}


/* =====================================================
   MAIN LAYOUT
===================================================== */

.shop-layout {
    display: grid;

    grid-template-columns: 280px minmax(0, 1fr);

    gap: 35px;

    align-items: start;
}


/* =====================================================
   FILTER SIDEBAR
===================================================== */

.filter-sidebar {
    background: rgba(255, 250, 242, .96);

    padding: 25px;

    border-radius: 9px;

    border: 1px solid rgba(67, 49, 29, .08);

    box-shadow:
        0 12px 30px
        rgba(66, 48, 29, .07);

    position: sticky;

    top: 20px;
}


.filter-heading {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    padding-bottom: 20px;

    margin-bottom: 23px;

    border-bottom: 1px solid var(--border);
}


.filter-heading span {
    display: block;

    font-size: 10px;


    font-weight: 800;

    color: var(--green);

    margin-bottom: 4px;
}


.filter-heading h2 {

    font-size: 23px;

    color: var(--green-dark);
}


.clear-btn {
    border: none;

    background: transparent;

    color: #7d6d5a;

    font-size: 10px;

    font-weight: 700;

    cursor: pointer;

    border-bottom: 1px solid #9f8c73;

    padding-bottom: 2px;
}


.clear-btn:hover {
    color: var(--green);
}


/* =====================================================
   FILTER GROUP
===================================================== */

.filter-group {
    margin-bottom: 21px;
}


.filter-group label {
    display: block;

    color: var(--green-dark);

    font-size: 13px;

    font-weight: 800;


    margin-bottom: 9px;
}


.filter-group input,
.filter-group select {
    width: 100%;

    height: 42px;

    background: #fffdf8;

    border: 1px solid #dcccb4;

    border-radius: 5px;

    outline: none;

    color: #49392b;

    font-size: 12px;

    padding: 0 12px;

    transition: .25s ease;
}


.filter-group input:focus,
.filter-group select:focus {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px
        rgba(31,103,63,.08);
}


/* =====================================================
   SEARCH
===================================================== */

.search-box {
    position: relative;
}


.search-box input {
    padding-right: 42px;
}


.search-icon {
    position: absolute;

    right: 14px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--green);

    font-size: 19px;

    pointer-events: none;
}


/* =====================================================
   PRICE
===================================================== */

.price-filter {
    display: grid;

    grid-template-columns: 1fr auto 1fr;

    gap: 7px;

    align-items: center;
}


.price-input {
    display: flex;

    align-items: center;

    height: 42px;

    border: 1px solid #dcccb4;

    border-radius: 5px;

    background: #fffdf8;

    overflow: hidden;
}


.price-input span {
    color: var(--green);

    font-size: 12px;

    font-weight: bold;

    padding-left: 9px;
}


.price-input input {
    height: 40px;

    min-width: 0;

    border: none;

    background: transparent;

    padding: 0 5px;
}


.price-input input:focus {
    box-shadow: none;
}


.price-line {
    color: #9a876f;
}


.price-input input::-webkit-inner-spin-button,
.price-input input::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}


/* =====================================================
   FILTER BUTTON
===================================================== */

.apply-filter-btn {
    width: 100%;

    min-height: 46px;

    border: none;

    border-radius: 5px;

    background: var(--green);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    font-weight: 800;

    font-size: 13px;


    cursor: pointer;

    transition: .25s;
}


.apply-filter-btn:hover {
    background: var(--green-dark);

    transform: translateY(-2px);
}


.reset-btn {
    display: block;

    margin: 13px auto 0;

    border: none;

    background: transparent;

    color: #7f6e59;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .7px;

    cursor: pointer;
}


/* =====================================================
   PRODUCT TOOLBAR
===================================================== */

.products-area {
    min-width: 0;
}


.products-toolbar {
    display: flex;

    justify-content: space-between;

    align-items: center;

    min-height: 46px;

    padding-bottom: 13px;

    margin-bottom: 15px;

    border-bottom: 1px solid #dac5a7;
}


.result-count {
    color: #766855;

    font-size: 16px;
}


.result-count strong {
    color: var(--green);

    font-size: 14px;
}


.desktop-sort {
    display: flex;

    align-items: center;

    gap: 9px;
}


.desktop-sort label {
    color: #6e5d4a;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;
}


.desktop-sort select {
    min-width: 165px;

    height: 34px;

    border: 1px solid #d5c4ac;

    border-radius: 5px;

    padding: 0 10px;

    background: rgba(255,253,248,.8);

    color: #554536;

    font-size: 13px;

    outline: none;
}


/* =====================================================
   PRODUCT GRID
===================================================== */

.products-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 22px;
}


/* =====================================================
   PRODUCT CARD
===================================================== */

.product-card {
    min-width: 0;

    padding: 12px;

    background: #fffdf8;

    border-radius: 8px;

    border: 1px solid rgba(69,49,29,.07);

    box-shadow:
        0 10px 26px
        rgba(68,47,23,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.product-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 18px 35px
        rgba(68,47,23,.14);
}


/* IMAGE */

.product-image-box {
    position: relative;

    height: 225px;

    overflow: hidden;

    border-radius: 7px;

    background: var(--cream-image);
}


.product-image-box img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .6s ease;
}


.product-card:hover .product-image-box img {
    transform: scale(1.055);
}


/* BESTSELLER */

.bestseller {
    position: absolute;

    z-index: 2;

    left: 0;

    top: 12px;

    min-width: 90px;

    height: 23px;

    display: flex;

    align-items: center;

    padding-left: 12px;

    padding-right: 20px;

    color: #fff;

    background: var(--green);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: .4px;

    clip-path:
        polygon(
            0 0,
            87% 0,
            100% 50%,
            87% 100%,
            0 100%
        );
}


/* PRODUCT INFO */

.product-info {
    padding: 13px 3px 3px;
}


.product-info h3 {
    min-height: 42px;


    color: var(--green);

    font-size: 16px;

    line-height: 1.3;

    margin-bottom: 12px;
}


.weight {
    color: var(--green);

    font-size: 10px;

    margin-bottom: 9px;
}


.rating {
    display: flex;

    align-items: center;

    gap: 5px;

    margin-bottom: 7px;
}


.stars {
    color: var(--gold);

    font-size: 11px;

    letter-spacing: -1px;
}


.reviews {
    color: #2c241b;

    font-size: 8px;

    font-weight: bold;
}


.price {
    color: var(--green);

    font-size: 18px;

    font-weight: 800;

    margin-bottom: 11px;
}


/* =====================================================
   WHATSAPP
===================================================== */

.whatsapp-btn {
    width: 100%;

    min-height: 45px;

    padding: 0 15px;

    border: none;

    border-radius: 5px;

    background: var(--green);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 13px !important;

    font-weight: 800;

    letter-spacing: .5px;

    cursor: pointer;

    transition: .25s;
}


.whatsapp-btn:hover {
    background: var(--green-hover);

    transform: translateY(-2px);

    box-shadow:
        0 7px 18px
        rgba(31,103,63,.25);
}


.cart-icon {
    font-size: 15px;
}


/* =====================================================
   HIDE PRODUCTS
===================================================== */

.product-card.hidden {
    display: none;
}


/* =====================================================
   NO PRODUCTS
===================================================== */

.no-products {
    min-height: 350px;

    display: none;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background: rgba(255,253,248,.9);

    border: 1px solid var(--border);

    border-radius: 8px;

    padding: 35px;
}


.no-products.show {
    display: flex;
}


.empty-icon {
    width: 70px;
    height: 70px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: 16px;

    background: #f3e4cd;

    color: var(--green);

    font-size: 32px;
}


.no-products h3 {
    color: var(--green);


    font-size: 22px;

    margin-bottom: 7px;
}


.no-products p {
    color: #796956;

    font-size: 12px;

    margin-bottom: 18px;
}


.no-products button {
    border: none;

    border-radius: 5px;

    padding: 13px 22px;

    background: var(--green);

    color: #fff;

    font-size: 9px;

    font-weight: 800;

    cursor: pointer;
}


/* =====================================================
   MOBILE FILTER
===================================================== */

.mobile-filter-btn {
    display: none;

    width: 100%;

    min-height: 46px;

    border: none;

    border-radius: 5px;

    margin-bottom: 18px;

    background: var(--green);

    color: #fff;

    font-weight: 800;

    font-size: 10px;

    align-items: center;

    justify-content: center;

    gap: 9px;

    cursor: pointer;
}


.mobile-filter-header {
    display: none;
}


.filter-overlay {
    display: none;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1200px) {

    .shop-layout {
        grid-template-columns:
            245px minmax(0, 1fr);

        gap: 22px;
    }


    .products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 850px) {

    .shop-page-banner {
        height: 125px;
    }


    .shop-page-banner h1 {
        font-size: 29px;
    }


    .banner-small-title {
        font-size: 10px;
    }


    .shop-section {
        padding:
            28px 16px 60px;
    }


    .shop-header {
        margin-bottom: 22px;
    }


    .shop-header h2 {
        font-size: 27px;
    }


    .shop-header p {
        font-size: 12px;
    }


    .shop-layout {
        display: block;
    }


    .mobile-filter-btn {
        display: flex;
    }


    .filter-sidebar {
        position: fixed;

        z-index: 5001;

        left: 0;

        top: 0;

        width: min(340px, 90vw);

        height: 100vh;

        overflow-y: auto;

        border-radius: 0;

        padding: 20px 23px 40px;

        transform: translateX(-110%);

        transition: transform .35s ease;
    }


    .filter-sidebar.active {
        transform: translateX(0);
    }


    .mobile-filter-header {
        display: flex;

        align-items: center;

        justify-content: space-between;

        margin-bottom: 20px;

        padding-bottom: 15px;

        border-bottom: 1px solid var(--border);
    }


    .mobile-filter-header h3 {
        color: var(--green);


        font-size: 17px;
    }


    .mobile-filter-header button {
        width: 34px;
        height: 34px;

        border-radius: 50%;

        border: none;

        background: #f1e1c9;

        color: var(--green);

        font-size: 24px;

        cursor: pointer;
    }


    .filter-overlay {
        display: block;

        position: fixed;

        z-index: 5000;

        inset: 0;

        background: rgba(0,0,0,.5);

        opacity: 0;

        visibility: hidden;

        transition: .3s;
    }


    .filter-overlay.active {
        opacity: 1;

        visibility: visible;
    }

}


/* =====================================================
   PHONE
===================================================== */

@media (max-width: 600px) {

    .shop-page-banner {
        height: 105px;
    }


    .shop-page-banner h1 {
        font-size: 25px;

        margin-bottom: 6px;
    }


    .banner-small-title {
        font-size: 7px;

        letter-spacing: 2px;

        margin-bottom: 5px;
    }


    .banner-breadcrumb {
        font-size: 9px;
    }


    .shop-section {
        padding:
            23px 12px 50px;
    }


    .shop-header {
        margin-bottom: 18px;
    }


    .small-heading {
        font-size: 8px;

        margin-bottom: 5px;
    }


    .shop-header h2 {
        font-size: 23px;

        margin-bottom: 7px;
    }


    .shop-header p {
        font-size: 11px;

        line-height: 1.55;
    }


    .desktop-sort {
        display: none;
    }


    .products-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    .product-card {
        padding: 8px;
    }


    .product-image-box {
        height: 155px;
    }


    .product-info {
        padding: 10px 2px 2px;
    }


    .product-info h3 {
        min-height: 37px;

        font-size: 13px;

        margin-bottom: 10px;
    }


    .weight {
        font-size: 8px;

        margin-bottom: 7px;
    }


    .stars {
        font-size: 8px;
    }


    .reviews {
        font-size: 7px;
    }


    .price {
        font-size: 15px;

        margin-bottom: 9px;
    }


    .whatsapp-btn {
        min-height: 40px;

        padding: 0 8px;

        font-size: 7px;
    }


    .cart-icon {
        font-size: 12px;
    }


    .bestseller {
        top: 8px;

        min-width: 67px;

        height: 20px;

        padding-left: 7px;

        font-size: 5.5px;
    }

}


/* =====================================================
   VERY SMALL
===================================================== */

@media (max-width: 390px) {

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


    .product-image-box {
        height: 260px;
    }


    .product-info h3 {
        min-height: auto;

        font-size: 16px;
    }


    .whatsapp-btn {
        font-size: 9px;
    }

}


/* =========================================================
   ABOUT PAGE
========================================================= */


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #f7ead6;

    color: #3d2d20;
}


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --about-green: #1f673f;

    --about-dark-green: #15502f;

    --about-deep-green: #0f4126;

    --about-cream: #f7ead6;

    --about-light-cream: #fffaf2;

    --about-gold: #d7940c;

    --about-brown: #3d2d20;

    --about-text: #746655;

    --about-border: #dfcfb7;

}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.spice-about-page {

    width: 100%;

    overflow: hidden;

    background:
        var(--about-cream);

    color:
        var(--about-brown);

}


.spice-about-container {

    width:
        min(
            1200px,
            92%
        );

    margin: 0 auto;

}


/* =========================================================
   ABOUT BANNER
========================================================= */

.spice-about-banner {

    position: relative;

    width: 100%;

    min-height: 391px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    overflow: hidden;


    /* BANNER IMAGE */

    background: linear-gradient(rgb(15 65 38 / 42%), rgba(15, 65, 38, 0.78)), url(../images/indian-condiments-with-copy-space-view.webp);


    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}


/* DECORATION LEFT */

.spice-about-banner::before {

    content: "";

    position: absolute;

    width: 240px;

    height: 240px;

    left: -100px;

    top: -130px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .12
        );

    border-radius: 50%;

}


/* DECORATION RIGHT */

.spice-about-banner::after {

    content: "";

    position: absolute;

    width: 270px;

    height: 270px;

    right: -120px;

    bottom: -180px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    border-radius: 50%;

}


.spice-about-banner-content {

    position: relative;

    z-index: 2;

    width: 90%;

}


.spice-about-banner-small {

    display: block;

    margin-bottom: 8px;

    color: #f0d8a5;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 3px;

}


.spice-about-banner h1 {

    margin:
        0
        0
        10px;

    color: #ffffff;

    

    font-size:
        clamp(
            34px,
            5vw,
            48px
        );

    line-height: 1;

    font-weight: 700;

    text-shadow:
        0
        3px
        14px
        rgba(
            0,
            0,
            0,
            .35
        );

}


/* BREADCRUMB */

.spice-about-breadcrumb {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    color:
        rgba(
            255,
            255,
            255,
            .88
        );

    font-size: 11px;

}


.spice-about-breadcrumb a {

    color: #f1d8a7;

    text-decoration: none;

    transition: .2s;

}


.spice-about-breadcrumb a:hover {

    color: #ffffff;

}


/* =========================================================
   ABOUT INTRO
========================================================= */

.spice-about-intro {

    padding:
        80px
        0
        85px;

}


.spice-about-intro-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    align-items: center;

    gap: 65px;

}


/* =========================================================
   ABOUT IMAGE
========================================================= */

.spice-about-image-wrap {

    position: relative;

}


.spice-about-main-image {

    display: block;

    width: 100%;

    height: 520px;

    object-fit: cover;

    border-radius: 14px;

    box-shadow:
        0
        25px
        50px
        rgba(
            43,
            31,
            18,
            .15
        );

}


.spice-about-small-image {

    position: absolute;

    width: 220px;

    height: 220px;

    right: -30px;

    bottom: -35px;

    object-fit: cover;

    border:
        9px solid
        var(--about-cream);

    border-radius: 12px;

    box-shadow:
        0
        18px
        35px
        rgba(
            42,
            30,
            18,
            .18
        );

}


/* BADGE */

.spice-about-badge {

    position: absolute;

    left: -25px;

    top: 40px;

    width: 120px;

    height: 120px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    color: #ffffff;

    background:
        var(--about-green);

    border:
        5px solid
        rgba(
            255,
            255,
            255,
            .88
        );

    border-radius: 50%;

    box-shadow:
        0
        12px
        30px
        rgba(
            31,
            103,
            63,
            .30
        );

}


.spice-about-badge strong {

   
    font-size: 26px;

    line-height: 1;

}


.spice-about-badge span {

    margin-top: 6px;

    font-size: 8px;

    line-height: 1.4;

    font-weight: 800;

    letter-spacing: .7px;

}


/* =========================================================
   ABOUT CONTENT
========================================================= */

.spice-about-label {

    display: block;

    margin-bottom: 12px;

    color:
        var(--about-green);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2.5px;

}


.spice-about-content h2 {

    margin:
        0
        0
        20px;

    color:
        var(--about-green);

    

    font-size:
        clamp(
            30px,
            4vw,
            42px
        );

    line-height: 1.12;

}


.spice-about-content h2 span {

    display: inline;

    color: #9b682e;

}


.spice-about-content p {

    margin:
        0
        0
        16px;

    color:
        var(--about-text);

    font-size: 16px;

    line-height: 1.8;

}


/* HIGHLIGHT */

.spice-about-highlight {

    margin:
        25px
        0;

    padding:
        18px
        20px;

    color: #594838;

    background:
        rgba(
            255,
            255,
            255,
            .52
        );

    border-left:
        4px solid
        var(--about-green);

    border-radius:
        0
        8px
        8px
        0;

   

    font-size: 16px;

    line-height: 1.6;

}


/* =========================================================
   ABOUT CHECKS
========================================================= */

.spice-about-checks {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap: 14px;

    margin-top: 28px;

}


.spice-about-check-item {

    display: flex;

    align-items: center;

    gap: 10px;

    color: #4e3d2e;

    font-size: 15px;

    font-weight: 700;

}


.spice-about-check-icon {

    flex:
        0
        0
        28px;

    width: 28px;

    height: 28px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #ffffff;

    background:
        var(--about-green);

    border-radius: 50%;

    font-size: 12px;

}


/* =========================================================
   STATISTICS
========================================================= */

.spice-about-stats {

    padding:
        25px
        0
        75px;

}


.spice-about-stats-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    background:
        var(--about-green);

    border-radius: 12px;

    overflow: hidden;

    box-shadow:
        0
        15px
        40px
        rgba(
            31,
            103,
            63,
            .16
        );

}


.spice-about-stat {

    position: relative;

    padding:
        35px
        20px;

    text-align: center;

    color: #ffffff;

}


.spice-about-stat:not(:last-child)::after {

    content: "";

    position: absolute;

    right: 0;

    top: 25%;

    width: 1px;

    height: 50%;

    background:
        rgba(
            255,
            255,
            255,
            .18
        );

}


.spice-about-stat strong {

    display: block;

    margin-bottom: 7px;

    color: #ffffff;

    

    font-size: 34px;

}


.spice-about-stat span {

    color:
        rgba(
            255,
            255,
            255,
            .78
        );

    font-size: 12px;

    letter-spacing: 1px;

    font-weight: 700;

}


/* =========================================================
   WHY CHOOSE US
========================================================= */

.spice-about-values {

    padding:
        80px
        0;

    background:
        var(--about-light-cream);

}


.spice-section-heading {

    max-width: 700px;

    margin:
        0
        auto
        45px;

    text-align: center;

}


.spice-section-heading > span {

    display: block;

    margin-bottom: 9px;

    color:
        var(--about-green);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2.5px;

}


.spice-section-heading h2 {

    margin: 0;

    color:
        var(--about-green);

  

    font-size:
        clamp(
            29px,
            4vw,
            42px
        );

}


.spice-section-heading p {

    max-width: 620px;

    margin:
        14px
        auto
        0;

    color:
        var(--about-text);

    font-size: 15px;

    line-height: 1.75;

}


/* =========================================================
   VALUE CARDS
========================================================= */

.spice-about-values-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 20px;

}


.spice-value-card {

    padding:
        30px
        23px;

    background: #ffffff;

    border:
        1px solid
        #eee0cb;

    border-radius: 10px;

    box-shadow:
        0
        9px
        25px
        rgba(
            67,
            48,
            27,
            .05
        );

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.spice-value-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        0
        18px
        35px
        rgba(
            67,
            48,
            27,
            .12
        );

}


.spice-value-icon {

    width: 52px;

    height: 52px;

    margin-bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--about-green);

    background: #edf4ef;

    border-radius: 50%;

    font-size: 23px;

}


.spice-value-card h3 {

    margin:
        0
        0
        10px;

    color:
        var(--about-green);

  

    font-size: 18px;

}


.spice-value-card p {

    margin: 0;

    color:
        var(--about-text);

    font-size: 15px;

    line-height: 1.7;

}


/* =========================================================
   PROCESS
========================================================= */

.spice-about-process {

    padding:
        85px
        0;

}


.spice-process-grid {

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap: 25px;

    margin-top: 45px;

}


/* CONNECTING LINE */

.spice-process-grid::before {

    content: "";

    position: absolute;

    top: 30px;

    left: 10%;

    right: 10%;

    height: 1px;

    background: #d9c8ae;

}


.spice-process-item {

    position: relative;

    z-index: 2;

    text-align: center;

}


.spice-process-number {

    width: 60px;

    height: 60px;

    margin:
        0
        auto
        18px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #ffffff;

    background:
        var(--about-green);

    border:
        6px solid
        var(--about-cream);

    border-radius: 50%;

   

    font-size: 20px;

    box-shadow:
        0
        6px
        20px
        rgba(
            31,
            103,
            63,
            .18
        );

}


.spice-process-item h3 {

    margin:
        0
        0
        8px;

    color:
        var(--about-green);

   

    font-size: 18px;

}


.spice-process-item p {

    max-width: 220px;

    margin: 0 auto;

    color:
        var(--about-text);

    font-size: 14px;

    line-height: 1.7;

}


/* =========================================================
   CTA
========================================================= */

.spice-about-cta {

    padding:
        75px
        0;

    background:

        linear-gradient(
            rgba(13,59,34,.88),
            rgba(13,59,34,.91)
        ),

        url("../images/indian-condiments-with-copy-space-view.webp");


    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}


.spice-about-cta-inner {

    max-width: 740px;

    margin: auto;

    text-align: center;

}


.spice-about-cta-inner > span {

    display: block;

    margin-bottom: 10px;

    color: #e8cd94;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2.5px;

}


.spice-about-cta h2 {

    margin:
        0
        0
        14px;

    color: #ffffff;

  

    font-size:
        clamp(
            28px,
            4vw,
            42px
        );

    line-height: 1.2;

}


.spice-about-cta p {

    max-width: 610px;

    margin:
        0
        auto
        25px;

    color:
        rgba(
            255,
            255,
            255,
            .82
        );

    font-size: 15px;

    line-height: 1.75;

}


/* =========================================================
   CTA BUTTONS
========================================================= */

.spice-about-cta-buttons {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

}


.spice-about-btn {

    min-width: 150px;

    min-height: 46px;

    padding:
        0
        20px;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    border-radius: 5px;

    text-decoration: none;

    font-size: 11px;

    font-weight: 800;

    letter-spacing: .7px;

    transition: .25s;

}


.spice-about-btn-primary {

    color:
        var(--about-green);

    background: #ffffff;

}


.spice-about-btn-primary:hover {

    background: #f2dfba;

    transform:
        translateY(-2px);

}


.spice-about-btn-secondary {

    color: #ffffff;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .55
        );

}


.spice-about-btn-secondary:hover {

    color:
        var(--about-green);

    background: #ffffff;

    transform:
        translateY(-2px);

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {


    .spice-about-intro {

        padding:
            65px
            0;

    }


    .spice-about-intro-grid {

        grid-template-columns: 1fr;

        gap: 70px;

    }


    .spice-about-image-wrap {

        width: 100%;

        max-width: 650px;

        margin: auto;

    }


    .spice-about-content {

        max-width: 700px;

        margin: auto;

    }


    .spice-about-values-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .spice-about-stats-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .spice-about-stat:nth-child(2)::after {

        display: none;

    }


    .spice-about-stat:nth-child(1),
    .spice-about-stat:nth-child(2) {

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                .15
            );

    }


    .spice-process-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

        row-gap: 45px;

    }


    .spice-process-grid::before {

        display: none;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {


    /* BANNER */

    .spice-about-banner {

        min-height: 130px;

        background-position: center;

    }


    .spice-about-banner-small {

        font-size: 8px;

        letter-spacing: 2px;

        margin-bottom: 6px;

    }


    .spice-about-banner h1 {

        font-size: 30px;

        margin-bottom: 8px;

    }


    .spice-about-breadcrumb {

        font-size: 10px;

    }


    /* INTRO */

    .spice-about-intro {

        padding:
            50px
            0
            60px;

    }


    .spice-about-intro-grid {

        gap: 55px;

    }


    .spice-about-main-image {

        height: 350px;

    }


    .spice-about-small-image {

        width: 135px;

        height: 135px;

        right: -5px;

        bottom: -25px;

        border-width: 6px;

    }


    .spice-about-badge {

        width: 90px;

        height: 90px;

        left: -4px;

        top: 20px;

    }


    .spice-about-badge strong {

        font-size: 20px;

    }


    .spice-about-badge span {

        font-size: 6px;

    }


    .spice-about-label {

        font-size: 9px;

    }


    .spice-about-content h2 {

        font-size: 29px;

    }


    .spice-about-content p {

        font-size: 13px;

        line-height: 1.75;

    }


    .spice-about-highlight {

        font-size: 14px;

        padding:
            16px
            17px;

    }


    /* CHECKS */

    .spice-about-checks {

        grid-template-columns: 1fr;

    }


    .spice-about-check-item {

        font-size: 13px;

    }


    /* STATS */

    .spice-about-stats {

        padding:
            10px
            0
            55px;

    }


    .spice-about-stats-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );

    }


    .spice-about-stat {

        padding:
            25px
            10px;

    }


    .spice-about-stat strong {

        font-size: 27px;

    }


    .spice-about-stat span {

        font-size: 9px;

    }


    /* VALUES */

    .spice-about-values {

        padding:
            55px
            0;

    }


    .spice-section-heading {

        margin-bottom: 30px;

    }


    .spice-section-heading > span {

        font-size: 9px;

    }


    .spice-section-heading h2 {

        font-size: 28px;

    }


    .spice-section-heading p {

        font-size: 13px;

    }


    .spice-about-values-grid {

        grid-template-columns: 1fr;

        gap: 14px;

    }


    .spice-value-card {

        padding:
            25px
            20px;

    }


    .spice-value-card p {

        font-size: 13px;

    }


    /* PROCESS */

    .spice-about-process {

        padding:
            55px
            0;

    }


    .spice-process-grid {

        grid-template-columns: 1fr;

        gap: 30px;

        margin-top: 30px;

    }


    .spice-process-item p {

        font-size: 13px;

    }


    /* CTA */

    .spice-about-cta {

        padding:
            55px
            0;

    }


    .spice-about-cta h2 {

        font-size: 28px;

    }


    .spice-about-cta p {

        font-size: 13px;

    }


    .spice-about-cta-buttons {

        width: 100%;

        flex-direction: column;

    }


    .spice-about-btn {

        width: 100%;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {


    .spice-about-banner {

        min-height: 120px;

    }


    .spice-about-banner h1 {

        font-size: 27px;

    }


    .spice-about-main-image {

        height: 300px;

    }


    .spice-about-small-image {

        width: 115px;

        height: 115px;

    }


    .spice-about-stats-grid {

        grid-template-columns: 1fr;

    }


    .spice-about-stat {

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                .15
            );

    }


    .spice-about-stat:last-child {

        border-bottom: none;

    }

}

/* =========================================================
   contact page
========================================================= */




* {
    box-sizing: border-box;
}

:root {
    --contact-green: #1f673f;
    --contact-dark-green: #15502f;
    --contact-deep-green: #0f4126;

    --contact-cream: #f7ead6;
    --contact-light-cream: #fffaf2;

    --contact-gold: #d7940c;

    --contact-brown: #3d2d20;
    --contact-text: #746655;

    --contact-border: #dfcfb7;
}


/* =========================================================
   MAIN PAGE
========================================================= */

.spice-contact-page {
    width: 100%;
    overflow: hidden;

    background: var(--contact-cream);

    

    color: var(--contact-brown);
}


.spice-contact-container {
    width: min(1200px, 92%);

    margin: 0 auto;
}


/* =========================================================
   CONTACT BANNER
========================================================= */

.spice-contact-banner {
    position: relative;

    min-height: 391px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    overflow: hidden;

    background: linear-gradient(rgb(15 65 38 / 42%), rgba(15, 65, 38, 0.78)), url(../images/indian-condiments-with-copy-space-view.webp);
}


.spice-contact-banner::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 391px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 50%;

    left: -90px;
    top: -110px;
}


.spice-contact-banner::after {
    content: "";

    position: absolute;

    width: 240px;
    height: 391px;

    border:
        1px solid
        rgba(255,255,255,.06);

    border-radius: 50%;

    right: -100px;
    bottom: -150px;
}


.spice-contact-banner-content {
    position: relative;

    z-index: 2;
}


.spice-contact-banner-small {
    display: block;

    color: #ead5ad;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.8px;

    margin-bottom: 7px;
}


.spice-contact-banner h1 {
    margin: 0 0 9px;

    color: #ffffff;

    

    font-size:
        clamp(
            32px,
            4vw,
            43px
        );

    line-height: 1;
}


.spice-contact-breadcrumb {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    color:
        rgba(
            255,
            255,
            255,
            .75
        );

    font-size: 10px;
}


.spice-contact-breadcrumb a {
    color: #f1d8a7;

    text-decoration: none;
}


.spice-contact-breadcrumb a:hover {
    color: #ffffff;
}


/* =========================================================
   CONTACT INTRO
========================================================= */

.spice-contact-intro {
    padding:
        65px
        0
        35px;
}


.spice-contact-title {
    text-align: center;

    max-width: 700px;

    margin:
        0
        auto
        40px;
}


.spice-contact-label {
    display: block;

    margin-bottom: 9px;

    color: var(--contact-green);

    font-size: 13px;

    font-weight: 800;

}


.spice-contact-title h2 {
    margin: 0 0 12px;

    color: var(--contact-green);

    

    font-size:
        clamp(
            28px,
            4vw,
            40px
        );

    line-height: 1.15;
}


.spice-contact-title h2 span {
    color: #9b682e;
}


.spice-contact-title p {
    margin: 0;

    color: var(--contact-text);

    font-size: 16px;

    line-height: 1.75;
}


/* =========================================================
   CONTACT INFO CARDS
========================================================= */

.spice-contact-cards {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap: 18px;
}


.spice-contact-card {
    position: relative;

    padding:
        27px
        20px;

    background:
        var(--contact-light-cream);

    border:
        1px solid
        #eadcc7;

    border-radius: 10px;

    text-align: center;

    box-shadow:
        0
        10px
        25px
        rgba(
            64,
            46,
            27,
            .06
        );

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.spice-contact-card:hover {
    transform:
        translateY(-6px);

    box-shadow:
        0
        18px
        32px
        rgba(
            64,
            46,
            27,
            .12
        );
}


.spice-contact-card-icon {
    width: 52px;
    height: 52px;

    margin:
        0
        auto
        16px;

    border-radius: 50%;

    background: #e8f0ea;

    color: var(--contact-green);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 21px;
}


.spice-contact-card h3 {
    margin:
        0
        0
        8px;

    color: var(--contact-green);

    

    font-size: 16px;
}


.spice-contact-card p,
.spice-contact-card a {
    margin: 0;

    color: var(--contact-text);

    font-size: 16px;


    text-decoration: none;
}


.spice-contact-card a:hover {
    color: var(--contact-green);
}


/* =========================================================
   MAIN CONTACT AREA
========================================================= */

.spice-contact-main {
    padding:
        55px
        0
        80px;
}


.spice-contact-grid {
    display: grid;

    grid-template-columns:
        .85fr
        1.15fr;

    gap: 35px;

    align-items: stretch;
}


/* =========================================================
   LEFT INFORMATION PANEL
========================================================= */

.spice-contact-info {
    position: relative;

    overflow: hidden;

    padding: 40px 35px;

    border-radius: 12px;

    color: #ffffff;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(215,148,12,.18),
            transparent 32%
        ),

        linear-gradient(
            145deg,
            #15502f,
            #0f4126
        );
}


.spice-contact-info::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -100px;
    bottom: -120px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 50%;
}


.spice-contact-info-content {
    position: relative;

    z-index: 2;
}


.spice-contact-info-label {
    display: block;

    color: #e6ca91;

    font-size: 13px;

    font-weight: 800;


    margin-bottom: 9px;
}


.spice-contact-info h2 {
    margin:
        0
        0
        14px;

   

    font-size: 30px;

    line-height: 1.2;
}


.spice-contact-info-description {
    margin:
        0
        0
        30px;

    color:
        rgba(
            255,
            255,
            255,
            .76
        );

    font-size: 15px;

    line-height: 1.8;
}


/* INFO ROW */

.spice-info-row {
    display: flex;

    align-items: flex-start;

    gap: 14px;

    padding:
        17px
        0;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );
}


.spice-info-row:last-of-type {
    border-bottom: none;
}


.spice-info-icon {
    flex:
        0
        0
        38px;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    background:
        rgba(
            255,
            255,
            255,
            .10
        );

    color: #e8d09b;

    font-size: 16px;
}


.spice-info-text strong {
    display: block;

    margin-bottom: 4px;

    color: #ffffff;

    font-size: 15px;

    letter-spacing: .4px;
}


.spice-info-text span,
.spice-info-text a {
    color:
        rgba(
            255,
            255,
            255,
            .72
        );

    font-size: 15px;

    line-height: 1.6;

    text-decoration: none;
}


/* =========================================================
   BUSINESS HOURS
========================================================= */

.spice-business-hours {
    margin-top: 28px;

    padding: 20px;

    background:
        rgba(
            255,
            255,
            255,
            .07
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .10
        );

    border-radius: 8px;
}


.spice-business-hours h3 {
    margin:
        0
        0
        14px;

    color: #f1d8a7;

    font-size: 16px;
}


.spice-hour-row {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding:
        7px
        0;

    color:
        rgba(
            255,
            255,
            255,
            .74
        );

    font-size: 15px;
}


/* =========================================================
   WHATSAPP BUTTON
========================================================= */

.spice-contact-whatsapp {
    width: 100%;

    min-height: 47px;

    margin-top: 22px;

    border-radius: 5px;

    background: #ffffff;

    color: var(--contact-green);

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 9px;

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .6px;

    transition: .25s;
}


.spice-contact-whatsapp:hover {
    background: #f1d8a7;

    color: var(--contact-dark-green);

    transform:
        translateY(-2px);
}


/* =========================================================
   CONTACT FORM
========================================================= */

.spice-contact-form-box {
    padding: 40px;

    background:
        var(--contact-light-cream);

    border:
        1px solid
        #eadbc5;

    border-radius: 12px;

    box-shadow:
        0
        15px
        35px
        rgba(
            66,
            47,
            27,
            .07
        );
}


.spice-form-small {
    display: block;

    margin-bottom: 8px;

    color: var(--contact-green);

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2.4px;
}


.spice-contact-form-box h2 {
    margin:
        0
        0
        9px;

    color: var(--contact-green);

    

    font-size: 29px;
}


.spice-form-description {
    margin:
        0
        0
        27px;

    color: var(--contact-text);

    font-size: 16px;

}


.spice-contact-form {
    width: 100%;
}


.spice-form-row {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap: 16px;
}


.spice-form-group {
    margin-bottom: 17px;
}


.spice-form-group label {
    display: block;

    margin-bottom: 7px;

    color: var(--contact-green);

    font-size: 13px;

    font-weight: 800;

    letter-spacing: .8px;
}


.spice-form-group input,
.spice-form-group select,
.spice-form-group textarea {
    width: 100%;

    border:
        1px solid
        #ddcdb6;

    border-radius: 5px;

    background: #ffffff;

    color: #4d3d30;

    outline: none;



    font-size: 12px;

    transition: .25s;
}


.spice-form-group input,
.spice-form-group select {
    height: 46px;

    padding:
        0
        13px;
}


.spice-form-group textarea {
    min-height: 135px;

    padding: 13px;

    resize: vertical;
}


.spice-form-group input:focus,
.spice-form-group select:focus,
.spice-form-group textarea:focus {
    border-color:
        var(--contact-green);

    box-shadow:
        0
        0
        0
        3px
        rgba(
            31,
            103,
            63,
            .08
        );
}


.spice-submit-btn {
    min-width: 170px;

    min-height: 48px;

    border: none;

    border-radius: 5px;

    padding:
        0
        23px;

    background:
        var(--contact-green);

    color: #ffffff;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    cursor: pointer;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: .7px;

    transition: .25s;
}


.spice-submit-btn:hover {
    background:
        var(--contact-dark-green);

    transform:
        translateY(-2px);

    box-shadow:
        0
        8px
        20px
        rgba(
            31,
            103,
            63,
            .20
        );
}


/* =========================================================
   MAP
========================================================= */

.spice-contact-map-section {
    padding:
        0
        0
        80px;
}


.spice-map-box {
    width: 100%;

    height: 380px;

    border-radius: 12px;

    overflow: hidden;

    border:
        5px solid
        #fffaf2;

    box-shadow:
        0
        15px
        35px
        rgba(
            61,
            44,
            25,
            .10
        );
}


.spice-map-box iframe {
    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================================================
   FAQ / HELP STRIP
========================================================= */

.spice-contact-help {
    padding:
        55px
        0;

    background:
        var(--contact-light-cream);
}


.spice-help-inner {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;
}


.spice-help-text span {
    display: block;

    margin-bottom: 7px;

    color: var(--contact-green);

    font-size: 12px;

    font-weight: 800;

}


.spice-help-text h2 {
    margin:
        0
        0
        7px;

    color: var(--contact-green);

    

    font-size: 27px;
}


.spice-help-text p {
    margin: 0;

    color: var(--contact-text);

    font-size: 16px;

}


.spice-shop-button {
    flex: 0 0 auto;

    min-width: 145px;

    min-height: 45px;

    border-radius: 5px;

    background:
        var(--contact-green);

    color: #ffffff;

    display: inline-flex;

    justify-content: center;

    align-items: center;

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: .6px;

    transition: .25s;
}


.spice-shop-button:hover {
    background:
        var(--contact-dark-green);

    transform:
        translateY(-2px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .spice-contact-cards {
        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }


    .spice-contact-grid {
        grid-template-columns:
            1fr;
    }


    .spice-contact-info {
        padding: 35px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .spice-contact-banner {
        min-height: 120px;
    }


    .spice-contact-banner h1 {
        font-size: 28px;
    }


    .spice-contact-banner-small {
        font-size: 7px;
    }


    .spice-contact-intro {
        padding:
            45px
            0
            25px;
    }


    .spice-contact-title {
        margin-bottom: 28px;
    }


    .spice-contact-title h2 {
        font-size: 27px;
    }


    .spice-contact-title p {
        font-size: 11px;
    }


    .spice-contact-cards {
        grid-template-columns: 1fr;

        gap: 12px;
    }


    .spice-contact-card {
        padding: 22px 18px;
    }


    .spice-contact-main {
        padding:
            35px
            0
            55px;
    }


    .spice-contact-grid {
        gap: 20px;
    }


    .spice-contact-info {
        padding:
            30px
            22px;
    }


    .spice-contact-info h2 {
        font-size: 25px;
    }


    .spice-contact-form-box {
        padding:
            28px
            20px;
    }


    .spice-contact-form-box h2 {
        font-size: 25px;
    }


    .spice-form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .spice-submit-btn {
        width: 100%;
    }


    .spice-contact-map-section {
        padding-bottom: 55px;
    }


    .spice-map-box {
        height: 300px;

        border-width: 3px;
    }


    .spice-help-inner {
        flex-direction: column;

        align-items: flex-start;
    }


    .spice-help-text h2 {
        font-size: 24px;
    }


    .spice-shop-button {
        width: 100%;
    }

}

/* =========================================================
featured product
========================================================= */

/* ==========================================================
   FEATURED PRODUCT SECTION
========================================================== */

.featured-shop-section {
    width: 100%;

    padding: 70px 20px 80px;

    background: #f8ead4;
}


.featured-shop-container {
    width: 100%;

    max-width: 1280px;

    margin: 0 auto;
}


/* ==========================================================
   HEADER
========================================================== */

.featured-shop-header {
    margin-bottom: 28px;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;
}


.featured-shop-small-title {
    display: block;

    margin-bottom: 8px;

    color: #176b45;

    font-size: 10px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: 0.22em;
}


.featured-shop-title h2 {
    margin: 0;

    color: #176b45;

    font-size: 32px;

    line-height: 1.15;

    font-weight: 800;
}


.featured-shop-view-all {
    padding-bottom: 3px;

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #176b45;

    font-size: 12px;

    line-height: 1;

    font-weight: 800;

    text-decoration: none;

    transition: .2s ease;
}


.featured-shop-view-all svg {
    width: 17px;

    height: 17px;

    transition: transform .2s ease;
}


.featured-shop-view-all:hover {
    color: #0c5032;
}


.featured-shop-view-all:hover svg {
    transform: translateX(3px);
}


/* ==========================================================
   4 PRODUCT GRID
========================================================== */

.featured-shop-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;

    align-items: stretch;
}


/* ==========================================================
   PRODUCT CARD
========================================================== */

.featured-shop-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    background: #ffffff;

    border: 1px solid #ece7dd;

    border-radius: 8px;

    box-shadow:
        0 6px 20px
        rgba(72, 48, 24, 0.055);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.featured-shop-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 14px 30px
        rgba(72, 48, 24, 0.10);
}


/* ==========================================================
   BADGE
========================================================== */

.featured-shop-badge {
    position: absolute;

    top: 13px;

    left: 13px;

    z-index: 10;

    padding: 6px 10px;

    border-radius: 3px;

    background: #176b45;

    color: #ffffff;

    font-size: 8px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: .05em;

    text-transform: uppercase;
}


/* ==========================================================
   IMAGE
========================================================== */

.featured-shop-image {
    width: 100%;

    height: 235px;

    padding: 9px 9px 0;

    display: block;

    overflow: hidden;

    background: #ffffff;
}


.featured-shop-image img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .4s ease;
}


.featured-shop-card:hover
.featured-shop-image img {
    transform: scale(1.025);
}


.featured-shop-no-image {
    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #f5eddf;

    font-size: 45px;
}


/* ==========================================================
   CONTENT
========================================================== */

.featured-shop-content {
    flex: 1;

    padding: 0 11px 11px;

    display: flex;

    flex-direction: column;
}


/* ==========================================================
   NAME
========================================================== */

.featured-shop-name {
    margin: 0 0 1px;

    font-size: 16px;

    line-height: 1.2;

    font-weight: 800;
}


.featured-shop-name a {
    display: block;

    overflow: hidden;

    color: #181818;

    text-decoration: none;

    text-overflow: ellipsis;

    white-space: nowrap;

    transition: color .2s ease;
}


.featured-shop-name a:hover {
    color: #176b45;
}


/* ==========================================================
   SIZE
========================================================== */

.featured-shop-size {
    display: block;

    min-height: 18px;

    margin-bottom: 2px;

    color: #5d5d5d;

    font-size: 12px;

    line-height: 1.3;
}


/* ==========================================================
   RATING
========================================================== */

.featured-shop-rating {
    min-height: 19px;

    margin-bottom: 3px;

    display: flex;

    align-items: center;

    gap: 4px;
}


.featured-shop-stars {
    color: #dca400;

    font-size: 11px;

    line-height: 1;

    letter-spacing: 0;
}


.featured-shop-review-count {
    color: #333333;

    font-size: 11px;

    line-height: 1;
}


/* ==========================================================
   PRICE
========================================================== */

.featured-shop-price-row {
    min-height: 25px;

    margin-bottom: 6px;

    display: flex;

    align-items: center;

    gap: 7px;

    flex-wrap: wrap;
}


.featured-shop-old-price {
    color: #969696;

    font-size: 11px;

    line-height: 1;

    font-weight: 500;
}


.featured-shop-price {
    color: #176b45;

    font-size: 15px;

    line-height: 1;

    font-weight: 900;
}


/* ==========================================================
   WHATSAPP BUTTON
========================================================== */

.featured-shop-whatsapp {
    width: 100%;

    min-height: 40px;

    margin-top: auto;

    padding: 0 13px;

    border: 0;

    border-radius: 3px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    background: #176b45;

    color: #ffffff;

    font-size: 11px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: .025em;

    text-decoration: none;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}


.featured-shop-whatsapp:hover {
    background: #0f5636;

    color: #ffffff;

    transform: translateY(-1px);
}


.featured-whatsapp-icon {
    width: 19px;

    height: 19px;

    flex-shrink: 0;

    display: block;
}


/* ==========================================================
   OUT OF STOCK
========================================================== */

.featured-shop-out-stock {
    justify-content: center;

    background: #d7d9d8;

    color: #777777;

    cursor: not-allowed;
}


.featured-shop-out-stock:hover {
    background: #d7d9d8;

    color: #777777;

    transform: none;
}


/* ==========================================================
   EMPTY
========================================================== */

.featured-shop-empty {
    grid-column: 1 / -1;

    padding: 45px 20px;

    text-align: center;

    background: #ffffff;

    border-radius: 8px;
}


.featured-shop-empty h3 {
    margin: 0 0 7px;

    color: #176b45;

    font-size: 18px;
}


.featured-shop-empty p {
    margin: 0;

    color: #747474;

    font-size: 12px;
}


/* ==========================================================
   1100PX
========================================================== */

@media (max-width: 1100px) {

    .featured-shop-grid {
        gap: 16px;
    }


    .featured-shop-image {
        height: 215px;
    }


    .featured-shop-name {
        font-size: 15px;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

    .featured-shop-section {
        padding:
            60px 18px;
    }


    .featured-shop-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }


    .featured-shop-image {
        height: 270px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .featured-shop-section {
        padding:
            45px 13px;
    }


    .featured-shop-header {
        margin-bottom: 20px;

        align-items: center;
    }


    .featured-shop-small-title {
        font-size: 8px;
    }


    .featured-shop-title h2 {
        font-size: 25px;
    }


    .featured-shop-view-all {
        font-size: 10px;
    }


    .featured-shop-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .featured-shop-card {
        max-width: 430px;

        width: 100%;

        margin: 0 auto;
    }


    .featured-shop-image {
        height: 300px;
    }


    .featured-shop-content {
        padding:
            0 12px 12px;
    }


    .featured-shop-name {
        font-size: 17px;
    }


    .featured-shop-size {
        font-size: 12px;
    }


    .featured-shop-price {
        font-size: 16px;
    }


    .featured-shop-whatsapp {
        min-height: 43px;

        font-size: 11px;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 400px) {

    .featured-shop-title h2 {
        font-size: 22px;
    }


    .featured-shop-view-all {
        font-size: 9px;
    }


    .featured-shop-image {
        height: 260px;
    }

}

/*new header*/


/* ==========================================================
   ROOT
========================================================== */

:root {

    --ayur-green: #006832;

    --ayur-dark-green: #005b2c;

    --ayur-text: #18251f;

    --ayur-white: #ffffff;

}


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--ayur-text);

    background: #ffffff;

}


a {

    text-decoration: none;

}


button {

    font-family: inherit;

}


.ayur-container {

    width: calc(100% - 70px);

    max-width: 1450px;

    margin: 0 auto;

}



/* ==========================================================
   TOP GREEN BAR
========================================================== */

.ayur-top-bar {

    width: 100%;

    height: 28px;

    background: #00662f;

    color: #ffffff;

}


.ayur-top-content {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.ayur-top-location {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 13px;

    font-weight: 400;

    white-space: nowrap;

}


.ayur-top-location svg {

    width: 12px;

    height: 12px;

    fill: #ffffff;

    flex-shrink: 0;

}


.ayur-top-contact {

    display: flex;

    align-items: center;

    gap: 22px;

}


.ayur-top-contact a {

    color: #ffffff;

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 14px;

    font-weight: 400;

    white-space: nowrap;

}


.ayur-top-contact svg {

    width: 12px;

    height: 12px;

    fill: #ffffff;

}



/* ==========================================================
   MAIN HEADER
========================================================== */

.ayur-header {

    position: relative;

    z-index: 1000;

    width: 100%;

    background: #ffffff;

    border-bottom: 1px solid #eeeeee;

    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.025);

}


.ayur-header-content {

    height: 73px;

    display: flex;

    align-items: center;

}



/* ==========================================================
   LOGO
========================================================== */

.ayur-logo {

    display: flex;

    align-items: center;

    width: 185px;

    flex-shrink: 0;

}


.ayur-logo img {

    width: 211px;

    height: auto;

    display: block;

    object-fit: contain;

}



/* ==========================================================
   DESKTOP NAV
========================================================== */

.ayur-nav {

    display: flex;

    align-items: center;

    justify-content: center;

    flex: 1;

    height: 100%;

    gap: 31px;

}


.ayur-nav a {

    height: 100%;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #1f2b26;

    font-size: 16px;

    font-weight: 500;

    white-space: nowrap;

    transition:
        color .2s ease;

}


.ayur-nav a:hover {

    color: var(--ayur-green);

}


/* ACTIVE LINE */

.ayur-nav a::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 17px;

    width: 0;

    height: 2px;

    background: var(--ayur-green);

    transform: translateX(-50%);

    transition:
        width .25s ease;

}


.ayur-nav a:hover::after,
.ayur-nav a.active::after {

    width: 100%;

}


.ayur-nav a.active {

    color: var(--ayur-green);

}



/* ==========================================================
   RIGHT SIDE
========================================================== */

.ayur-header-right {

    width: 190px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 15px;

}



/* ==========================================================
   SEARCH
========================================================== */

.ayur-header-icon {

    border: none;

    outline: none;

    background: transparent;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

}


.ayur-header-icon svg {

    width: 19px;

    height: 19px;

    fill: #344a40;

}


.ayur-header-icon:hover svg {

    fill: var(--ayur-green);

}



/* ==========================================================
   CART
========================================================== */

.ayur-cart {

    width: 24px;

    height: 30px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

}


.ayur-cart svg {

    width: 22px;

    height: 22px;

    fill: #354c41;

}


.ayur-cart-count {

    position: absolute;

    top: -1px;

    right: -8px;

    min-width: 14px;

    height: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 3px;

    border-radius: 50px;

    background: #087534;

    border: 1.5px solid #ffffff;

    color: #ffffff;

    font-size: 8px;

    font-weight: 700;

}



/* ==========================================================
   SHOP BUTTON
========================================================== */

.ayur-shop-btn {

    height: 31px;

    min-width: 84px;

    padding:
        0 12px;

    border-radius: 30px;

    background: #006a31;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    color: #ffffff;

    font-size: 10px;

    font-weight: 500;

    white-space: nowrap;

    transition:
        transform .2s ease,
        background .2s ease;

}


.ayur-shop-btn:hover {

    background: var(--ayur-dark-green);

    transform: translateY(-1px);

}


.ayur-shop-arrow {

    font-size: 13px;

    transition:
        transform .2s ease;

}


.ayur-shop-btn:hover .ayur-shop-arrow {

    transform: translateX(3px);

}



/* ==========================================================
   MOBILE BUTTON
========================================================== */

.ayur-menu-btn {

    width: 30px;

    height: 30px;

    border: 0;

    background: transparent;

    display: none;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

    cursor: pointer;

}


.ayur-menu-btn span {

    width: 22px;

    height: 2px;

    background: #17432c;

    border-radius: 5px;

    transition:
        .25s ease;

}


.ayur-menu-btn.active span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);

}


.ayur-menu-btn.active span:nth-child(2) {

    opacity: 0;

}


.ayur-menu-btn.active span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);

}



/* ==========================================================
   MOBILE NAV
========================================================== */

.ayur-mobile-menu {

    display: none;

}



/* ==========================================================
   DJANGO MESSAGE
========================================================== */

.ayur-message {

    width: calc(100% - 40px);

    max-width: 1380px;

    margin:
        15px auto;

    padding:
        12px 18px;

    border-radius: 6px;

    background: #edf8f1;

    color: #00662f;

    font-size: 13px;

}



/* ==========================================================
   LARGE LAPTOP
========================================================== */

@media (max-width: 1200px) {

    .ayur-container {

        width: calc(100% - 40px);

    }


    .ayur-logo {

        width: 160px;

    }


    .ayur-logo img {

        width: 130px;

    }


    .ayur-nav {

        gap: 23px;

    }


    .ayur-nav a {

        font-size: 11px;

    }


    .ayur-header-right {

        width: 175px;

        gap: 13px;

    }

}



/* ==========================================================
   TABLET / MOBILE
========================================================== */

@media (max-width: 900px) {


    .ayur-container {

        width: calc(100% - 30px);

    }



    /* TOP */

    .ayur-top-bar {

        height: 34px;

    }


    .ayur-top-location {

        font-size: 12px;

        overflow: hidden;

        flex: 1;

        min-width: 0;

    }


    .ayur-top-location span {

        overflow: hidden;

        text-overflow: ellipsis;

        white-space: nowrap;

    }


    .ayur-top-contact {

        gap: 12px;

        margin-left: 14px;

    }


    .ayur-top-contact a span {

        display: none;

    }


    .ayur-top-contact svg {

        width: 14px;

        height: 14px;

    }



    /* HEADER */

    .ayur-header-content {

        height: 72px;

    }


    .ayur-logo {

        width: auto;

        margin-right: auto;

    }


    .ayur-logo img {

        width: 135px;

    }


    .ayur-nav {

        display: none;

    }


    .ayur-header-right {

        width: auto;

        gap: 17px;

    }


    .ayur-shop-btn {

        display: none;

    }


    .ayur-menu-btn {

        display: flex;

    }



    /* MOBILE MENU */

    .ayur-mobile-menu {

        position: absolute;

        top: 100%;

        left: 0;

        width: 100%;

        padding:
            8px 20px
            22px;

        display: flex;

        flex-direction: column;

        background: #ffffff;

        border-top: 1px solid #eeeeee;

        box-shadow:
            0 14px 25px rgba(0, 0, 0, 0.08);

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
            translateY(-10px);

        transition:
            opacity .25s ease,
            visibility .25s ease,
            transform .25s ease;

    }


    .ayur-mobile-menu.active {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(0);

    }


    .ayur-mobile-menu > a {

        padding:
            14px 3px;

        border-bottom:
            1px solid #eeeeee;

        color:
            #22362b;

        font-size:
            14px;

        font-weight:
            500;

    }


    .ayur-mobile-menu > a:hover {

        color:
            var(--ayur-green);

    }


    .ayur-mobile-menu .ayur-mobile-shop {

        width:
            fit-content;

        margin-top:
            15px;

        padding:
            12px 22px;

        border:
            none;

        border-radius:
            30px;

        background:
            var(--ayur-green);

        color:
            #ffffff;

        display:
            flex;

        align-items:
            center;

        gap:
            9px;

    }

}



/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 576px) {


    .ayur-container {

        width:
            calc(100% - 24px);

    }


    .ayur-top-location {

        font-size:
            9px;

    }


    .ayur-top-location span {

        max-width:
            225px;

    }


    .ayur-header-content {

        height:
            68px;

    }


    .ayur-logo img {

        width:
            125px;

    }


    .ayur-header-right {

        gap:
            12px;

    }


    .ayur-header-icon svg {

        width:
            18px;

        height:
            18px;

    }


    .ayur-cart svg {

        width:
            20px;

        height:
            20px;

    }

}



/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 380px) {


    .ayur-top-location span {

        max-width:
            170px;

    }


    .ayur-logo img {

        width:
            115px;

    }


    .ayur-header-right {

        gap:
            9px;

    }

}


/* new home first section */
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&family=Montserrat:wght@400;500;600&family=Playfair+Display:wght@600;700&display=swap");


/* ======================================================
   AYURGREEN HERO
====================================================== */

.ag-hero,
.ag-hero * {
    box-sizing: border-box;
}


.ag-hero {
    position: relative;

    width: 100%;
    height: 650px;

    overflow: hidden;

    background-image: url("../images/1.jpg");
    background-size: cover;
    background-repeat: no-repeat;

    /*
        IMPORTANT:
        moves spice bowls toward right side,
        just like reference image
    */
    background-position: center center;
}


/* ======================================================
   LIGHT OVERLAY
   Important: don't make it too white
====================================================== */

.ag-hero-shade {
    position: absolute;
    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(248, 250, 241, 0.82) 0%,
            rgba(248, 250, 241, 0.66) 27%,
            rgba(248, 250, 241, 0.28) 47%,
            rgba(248, 250, 241, 0.02) 68%,
            rgba(248, 250, 241, 0) 100%
        );
}


/* ======================================================
   HERO INNER
====================================================== */

.ag-hero-inner {
    position: relative;
    z-index: 2;

    width: min(100% - 110px, 1440px);
    height: 100%;

    margin: 0 auto;
}


/* ======================================================
   LEFT COPY
====================================================== */

.ag-hero-copy {
    position: absolute;

    top: 111px;
    left: 0;

    width: 56%;
}


.ag-kicker {
    margin-bottom: 8px;

    color: #41655a;

    font-family: "Montserrat", sans-serif;
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 4px;

    text-transform: uppercase;
}


.ag-title {
    margin: 0;

    max-width: 630px;

    color: #103d30;

    font-family: "Playfair Display", Georgia, serif;

    font-size: clamp(47px, 4.25vw, 65px);

    line-height: 0.98;

    font-weight: 700;

    letter-spacing: -1.6px;
}


.ag-title span {
    color: #267a29;
}


.ag-intro {
    width: 425px;

    margin: 15px 0 22px;

    color: #3b4942;

    font-family: "Montserrat", Arial, sans-serif;

    font-size: 14px;
    line-height: 1.45;

    font-weight: 500;
}


/* ======================================================
   BUTTONS
====================================================== */

.ag-actions {
    display: flex;
    align-items: center;

    gap: 17px;
}


.ag-btn {
    height: 42px;

    display: inline-flex;

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

    border-radius: 30px;

    padding: 0 23px;

    font-family: "Montserrat", sans-serif;

    font-size: 11px;
    font-weight: 600;

    text-decoration: none;

    white-space: nowrap;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


.ag-btn:hover {
    transform: translateY(-2px);
}


.ag-btn-primary {
    min-width: 159px;

    justify-content: space-between;

    color: #ffffff;

    background: #08733e;

    border: 1px solid #08733e;
}


.ag-btn-primary:hover {
    color: #ffffff;

    background: #075f35;
}


.ag-btn-primary svg {
    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.ag-btn-outline {
    min-width: 166px;

    color: #345d50;

    background: rgba(255, 255, 255, 0.46);

    border: 1.4px solid #507d70;
}


.ag-btn-outline:hover {
    color: #ffffff;

    border-color: #245d49;

    background: #245d49;
}


.ag-mobile-button-text {
    display: none;
}


/* ======================================================
   SMALL BENEFIT ROW INSIDE HERO
====================================================== */

.ag-mini-benefits {
    display: flex;

    align-items: center;

    margin-top: 43px;

    gap: 17px;
}


.ag-mini-benefit {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #315d4e;
}


.ag-mini-icon {
    width: 29px;
    height: 29px;
}


.ag-mini-icon svg {
    display: block;

    width: 100%;
    height: 100%;

    fill: none;

    stroke: #37755e;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.ag-mini-benefit span {
    font-family: "Montserrat", sans-serif;

    font-size: 9px;

    font-weight: 600;

    line-height: 1.35;
}


.ag-mini-line {
    width: 1px;
    height: 34px;

    background: rgba(36, 82, 65, 0.30);
}


/* ======================================================
   GOODNESS GROWS NATURALLY
====================================================== */

.ag-natural-copy {
    position: absolute;

    top: 60px;
    right: 53px;

    display: flex;

    flex-direction: column;

    color: #192e28;

    font-family: "Caveat", cursive;

    font-size: 32px;

    font-weight: 500;

    line-height: 0.73;

    transform: rotate(-7deg);
}


.ag-natural-copy span:nth-child(2) {
    margin-left: 11px;
}


.ag-natural-copy span:nth-child(3) {
    margin-left: 23px;
}


.ag-natural-leaf {
    position: absolute;

    top: -5px;
    right: -42px;

    width: 39px;
    height: 39px;

    transform: rotate(22deg);
}


.ag-natural-leaf path:first-child {
    fill: #498a29;

    stroke: #397328;

    stroke-width: 2;
}


.ag-natural-leaf path:last-child {
    fill: none;

    stroke: #2f6828;

    stroke-width: 3;
}


/* ======================================================
   FROM IDUKKI WITH LOVE

   THIS FIXES YOUR MISSING BACKGROUND COLOR
====================================================== */

.ag-location {
    position: absolute;

    right: 0;
    bottom: 32px;

    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 95px;

    padding: 9px 12px;

    color: #ffffff;

    background: rgba(57, 49, 32, 0.58);

    border-radius: 5px 0 0 5px;

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}


.ag-location svg {
    width: 20px;
    height: 20px;

    flex: 0 0 auto;

    fill: none;

    stroke: #ffffff;

    stroke-width: 2;
}


.ag-location div {
    font-family: "Montserrat", sans-serif;

    font-size: 8px;

    font-weight: 600;

    line-height: 1.35;
}


/* ======================================================
   DESKTOP FEATURE STRIP
====================================================== */

.ag-feature-strip {
    width: 100%;

    height: 112px;

    background: #fbfcf7;

    border-top: 1px solid #edf0e9;
}


.ag-feature-inner {
    width: min(100% - 60px, 1300px);
    height: 100%;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.ag-feature {
    flex: 1;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}


.ag-feature-icon {
    width: 38px;
    height: 38px;

    margin-bottom: 3px;
}


.ag-feature-icon svg {
    width: 100%;
    height: 100%;

    display: block;

    fill: none;

    stroke: #2f7655;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.ag-feature h3 {
    margin: 1px 0 3px;

    color: #214f3d;

    font-family: "Playfair Display", Georgia, serif;

    font-size: 17px;

    line-height: 1.15;

    font-weight: 700;
}


.ag-feature p {
    margin: 0;

    color: #626a65;

    font-family: "Montserrat", sans-serif;

    font-size: 13px;

    font-weight: 500;
}


.ag-feature-line {
    width: 1px;
    height: 58px;

    background: #d9dfd8;
}


/* MOBILE VERSION HIDDEN ON DESKTOP */

.ag-mobile-features {
    display: none;
}


/* ======================================================
   TABLET
====================================================== */

@media (max-width: 1100px) {

    .ag-hero-inner {
        width: calc(100% - 65px);
    }


    .ag-hero-copy {
        width: 61%;
    }


    .ag-title {
        font-size: 49px;
    }


    .ag-natural-copy {
        right: 40px;
    }

}


/* ======================================================
   MOBILE
====================================================== */

@media (max-width: 767px) {

    .ag-hero {
        height: 475px;

        /*
           Same image, cropped vertically like reference.
        */
        background-size: cover;

        background-position: 62% center;
    }
.ag-natural-copy {
  
    color: #f8fffd;
}

    /*
        Mobile image must stay colourful.
        Do NOT use strong white overlay.*/
    
    .ag-hero-shade {
        background: linear-gradient(100deg, rgba(248, 250, 241, 0.82) 0%, rgba(248, 250, 241, 0.66) 27%, rgba(248, 250, 241, 0.28) 47%, rgba(248, 250, 241, 0.02) 68%, rgba(248, 250, 241, 0) 100%);
    }


    .ag-hero-inner {
        width: 100%;
        height: 100%;

        margin: 0;
    }


    .ag-hero-copy {
        position: absolute;

        top: 43px;
        left: 20px;

        width: 265px;
    }


    .ag-kicker {
        margin-bottom: 7px;

        font-size: 8px;

        letter-spacing: 2.6px;
    }


    .ag-title {
        width: 245px;

        font-size: 35px;

        line-height: 0.99;

        letter-spacing: -1px;
    }


    /*
        This produces:
        Nature's
        Goodness,
        Harvested
        with Care.
    */
    .ag-title br {
        display: block;
    }


    .ag-intro {
        width: 242px;

        margin-top: 13px;

        margin-bottom: 13px;

        color: #36483f;

        font-size: 10px;

        line-height: 1.4;
    }


    .ag-actions {
        gap: 0;
    }


    .ag-btn-primary {
        width: 132px;
        min-width: 132px;

        height: 36px;

        padding: 0 17px;

        font-size: 9px;
    }


    .ag-desktop-button-text {
        display: none;
    }


    .ag-mobile-button-text {
        display: inline;
    }


    .ag-btn-outline {
        display: none;
    }


    /* Hide desktop small row */

    .ag-mini-benefits {
        display: none;
    }


    /* Handwritten text */

    .ag-natural-copy {
        top: 75px;
        right: 33px;

        font-size: 26px;

        line-height: 0.73;

        transform: rotate(-7deg);
    }


    .ag-natural-copy span:nth-child(2) {
        margin-left: 10px;
    }


    .ag-natural-copy span:nth-child(3) {
        margin-left: 19px;
    }


    .ag-natural-leaf {
        top: 0;
        right: -32px;

        width: 29px;
        height: 29px;
    }


    /* Reference mobile screenshot doesn't show location box */

    .ag-location {
        display: none;
    }


    /* DESKTOP FEATURES OFF */

    .ag-desktop-features {
        display: none;
    }


    /* ==================================================
       MOBILE BOTTOM FEATURE BAR
    ================================================== */

    .ag-mobile-features {
        width: 100%;

        height: 80px;

        display: grid;

        grid-template-columns: repeat(4, 1fr);

        align-items: stretch;

        background: #fbfcf7;

        border-top: 1px solid #e5e9e1;
    }


    .ag-mobile-feature {
        position: relative;

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 3px;

        color: #315f4d;

        text-align: center;
    }


    .ag-mobile-feature:not(:last-child)::after {
        content: "";

        position: absolute;

        top: 14px;
        right: 0;

        width: 1px;
        height: 52px;

        background: #e2e5de;
    }


    .ag-mobile-feature svg {
        width: 25px;
        height: 25px;

        fill: none;

        stroke: #36785b;

        stroke-width: 1.7;

        stroke-linecap: round;

        stroke-linejoin: round;
    }


    .ag-mobile-feature span {
        font-family: "Montserrat", sans-serif;

        font-size: 8px;

        line-height: 1.25;

        font-weight: 600;
    }

}


/* ======================================================
   SMALL MOBILE - 320px / 360px
====================================================== */

@media (max-width: 375px) {

    .ag-hero {
        background-position: 61% center;
    }


    .ag-hero-copy {
        left: 18px;

        width: 235px;
    }


    .ag-title {
        width: 228px;

        font-size: 33px;
    }


    .ag-intro {
        width: 225px;

        font-size: 9.4px;
    }


    .ag-natural-copy {
        right: 26px;

        font-size: 24px;
    }

}

/* ======================================================
   new home second section
====================================================== */

/* =========================================================
   GOOGLE FONTS
========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&family=Montserrat:wght@400;500;600&family=Playfair+Display:wght@600;700&display=swap");


/* =========================================================
   RESET
========================================================= */

.ag-shop-section *,
.ag-story-desktop *,
.ag-story-mobile * {
    box-sizing: border-box;
}



/* =========================================================
   SHOP SECTION
========================================================= */

.ag-shop-section {
    width: 100%;

    padding: 26px 0 32px;

    background: #fffef9;
}


.ag-shop-container {
    width: min(calc(100% - 60px), 1450px);

    margin: 0 auto;
}



/* =========================================================
   SHOP HEADER
========================================================= */

.ag-shop-header {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 24px;
}


.ag-shop-heading-wrap {
    display: flex;

    align-items: center;
}



/* MAIN HEADING */

.ag-shop-heading {
    margin: 0;

    color: #143d30;

    font-family: "Playfair Display", Georgia, serif;

    font-size: 30px;

    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -0.6px;
}



/* =========================================================
   LEAF
========================================================= */

.ag-shop-leaf {
    width: 21px;

    height: 21px;

    margin-left: 7px;

    flex-shrink: 0;
}


.ag-shop-leaf .leaf-fill {
    fill: #6aaa32;

    stroke: #6aaa32;
}


.ag-shop-leaf .leaf-stem {
    fill: none;

    stroke: #32772d;

    stroke-width: 2;

    stroke-linecap: round;
}



/* =========================================================
   LINE AFTER LEAF
========================================================= */

.ag-shop-heading-line {
    display: block;

    width: 30px;

    height: 2px;

    margin-left: 8px;

    background: #7da08a;

    border-radius: 20px;
}



/* =========================================================
   VIEW ALL BUTTON
   CONTENT = 16PX
========================================================= */

.ag-view-all-btn {
    min-width: 190px;

    height: 42px;

    padding: 0 18px;

    display: inline-flex;

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

    gap: 9px;

    color: #31594a;

    background: #ffffff;

    border: 1px solid #7fa792;

    border-radius: 30px;

    text-decoration: none;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;

    font-weight: 600;

    line-height: 1;

    transition: 0.25s ease;
}


.ag-view-all-btn:hover {
    color: #ffffff;

    background: #176c43;

    border-color: #176c43;
}


.ag-view-arrow {
    font-size: 16px;
}


.ag-view-mobile {
    display: none;
}



/* =========================================================
   CATEGORY GRID
========================================================= */

.ag-category-grid {
    display: grid;

    grid-template-columns: repeat(6, 1fr);

    align-items: start;

    gap: 22px;
}


.ag-category-card {
    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    text-decoration: none;
}



/* =========================================================
   CATEGORY IMAGE
========================================================= */

.ag-category-image {
    width: 145px;

    height: 145px;

    overflow: hidden;

    display: flex;

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

    border-radius: 50%;

    background: #f2f4e9;
}


.ag-category-image img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.35s ease;
}


.ag-category-card:hover .ag-category-image img {
    transform: scale(1.05);
}



/* =========================================================
   CATEGORY CONTENT = 16PX
========================================================= */

.ag-category-card h3 {
    margin: 11px 0 7px;

    color: #254b3c;

    font-family: "Playfair Display", Georgia, serif;

    font-size: 16px;

    font-weight: 700;

    line-height: 1.3;
}


.ag-category-bottom-line {
    display: block;

    width: 28px;

    height: 2px;

    background: #79ac59;

    border-radius: 20px;
}


.ag-category-mobile-name {
    display: none;
}



/* =========================================================
   STORY DESKTOP
========================================================= */

.ag-story-desktop {
    position: relative;

    width: 100%;

    height: 410px;

    display: flex;

    overflow: hidden;

    background: #fafbf5;
}



/* =========================================================
   STORY LEFT IMAGE
========================================================= */

.ag-story-image-side {
    position: relative;

    width: 52%;

    height: 100%;

    overflow: hidden;
}


.ag-story-image-side > img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;
}


.ag-story-image-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3, 48, 33, 0.30) 0%,
            rgba(3, 48, 33, 0.11) 52%,
            rgba(3, 48, 33, 0) 100%
        );
}



/* =========================================================
   ESSENCE TEXT
========================================================= */

.ag-story-image-caption {
    position: absolute;

    z-index: 3;

    left: 45px;

    bottom: 55px;

    display: flex;

    align-items: stretch;

    gap: 14px;
}



/* WHITE LINE */

.ag-story-caption-line {
    width: 2px;

    min-height: 115px;

    display: block;

    background: rgba(255, 255, 255, 0.95);

    border-radius: 20px;
}



/* CONTENT = 16PX */

.ag-story-caption-text {
    display: flex;

    flex-direction: column;

    justify-content: center;

    color: #ffffff;

    font-family: "Caveat", cursive;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.3;

    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.30);
}



/* =========================================================
   RIGHT STORY PANEL
========================================================= */

.ag-story-content-side {
    position: relative;

    z-index: 4;

    width: 54%;

    height: 100%;

    margin-left: -6%;

    overflow: hidden;

    background: #fafbf5;

    border-radius:21% 0 0 22%
        /89% 0 0 80%
}



/* =========================================================
   STORY COPY
========================================================= */

.ag-story-copy {
    position: relative;

    z-index: 3;

    width: 75%;

    margin-left: 110px;

    padding-top: 50px;
}



/* CONTENT = 16PX */

.ag-story-label {
    margin: 0 0 10px;

    color: #718d7b;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.3;

    letter-spacing: 3px;
}



/* MAIN STORY HEADING */

.ag-story-title {
    margin: 0;

    color: #123d30;

    font-family: "Playfair Display", Georgia, serif;

    font-size: 34px;

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -0.7px;
}


.ag-story-title span {
    color: #246d4c;
}



/* =========================================================
   DESCRIPTION = 16PX
========================================================= */

.ag-story-description {
    max-width: 560px;

    margin: 17px 0;

    color: #404c46;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.55;
}



/* =========================================================
   STORY BUTTON = 16PX
========================================================= */

.ag-story-button {
    min-width: 190px;

    height: 43px;

    padding: 0 18px;

    display: inline-flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    color: #ffffff;

    background: #15803f;

    border-radius: 30px;

    text-decoration: none;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;

    font-weight: 600;

    line-height: 1;
}


.ag-story-button:hover {
    background: #0c6933;
}



/* =========================================================
   STORY FEATURES
========================================================= */

.ag-story-features {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    margin-top: 23px;
}


.ag-story-feature {
    position: relative;

    display: flex;

    flex-direction: column;

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

    gap: 7px;

    text-align: center;

    color: #3e735b;
}


.ag-story-feature:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 3px;

    right: 0;

    width: 1px;

    height: 60px;

    background: #dce2dc;
}


.ag-story-feature svg {
    width: 35px;

    height: 35px;

    fill: none;

    stroke: #3d785d;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}



/* FEATURE CONTENT = 16PX */

.ag-story-feature span {
    font-family: "Montserrat", sans-serif;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.3;
}



/* =========================================================
   DECORATIVE PLANT
========================================================= */

.ag-story-plant {
    position: absolute;

    z-index: 1;

    top: 45px;

    right: 38px;

    width: 85px;

    height: 250px;

    opacity: 0.13;
}


.ag-story-plant svg {
    width: 100%;

    height: 100%;
}


.ag-story-plant path {
    fill: none;

    stroke: #496c55;

    stroke-width: 1.6;
}



/* =========================================================
   RIGHT VERTICAL TEXT = 16PX
========================================================= */

.ag-story-vertical-text {
    position: absolute;

    top: 35px;

    right: 9px;

    color: #769080;

    font-family: "Montserrat", sans-serif;

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1.5px;

    writing-mode: vertical-rl;

    transform: rotate(180deg);
}



/* =========================================================
   MOBILE STORY HIDDEN ON DESKTOP
========================================================= */

.ag-story-mobile {
    display: none;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .ag-category-grid {
        gap: 14px;
    }


    .ag-category-image {
        width: 115px;

        height: 115px;
    }


    .ag-story-copy {
        width: 72%;

        margin-left: 88px;
    }


    /* KEEP CONTENT 16PX */

    .ag-view-all-btn,
    .ag-category-card h3,
    .ag-story-label,
    .ag-story-description,
    .ag-story-button,
    .ag-story-feature span,
    .ag-story-vertical-text,
    .ag-story-caption-text {
        font-size: 16px;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       SHOP
    ===================================================== */

    .ag-shop-section {
        padding: 25px 0 31px;

        background: #fffef9;
    }


    .ag-shop-container {
        width: calc(100% - 30px);
    }



    /* =====================================================
       HEADER
    ===================================================== */

    .ag-shop-header {
        margin-bottom: 23px;
    }


    .ag-shop-heading {
        font-size: 22px;
    }


    .ag-shop-leaf {
        width: 18px;

        height: 18px;

        margin-left: 5px;
    }


    .ag-shop-heading-line {
        width: 22px;

        margin-left: 5px;
    }



    /* =====================================================
       VIEW ALL = 16PX
    ===================================================== */

    .ag-view-all-btn {
        min-width: 112px;

        height: 38px;

        padding: 0 10px;

        gap: 5px;

        font-size: 16px;
    }


    .ag-view-desktop {
        display: none;
    }


    .ag-view-mobile {
        display: inline;
    }



    /* =====================================================
       CATEGORY GRID 3 X 2
    ===================================================== */

    .ag-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));

        column-gap: 9px;

        row-gap: 26px;
    }


    .ag-category-image {
        width: min(26vw, 95px);

        height: min(26vw, 95px);
    }



    /* CATEGORY CONTENT = 16PX */

    .ag-category-card h3 {
        margin: 8px 0 0;

        color: #254c3d;

        font-family: "Montserrat", sans-serif;

        font-size: 16px;

        font-weight: 600;

        line-height: 1.25;
    }


    .ag-category-bottom-line {
        display: none;
    }


    .ag-category-desktop-name {
        display: none;
    }


    .ag-category-mobile-name {
        display: block;
    }



    /* =====================================================
       MOBILE CATEGORY ORDER
    ===================================================== */

    .ag-category-spices {
        order: 1;
    }

    .ag-category-herbs {
        order: 2;
    }

    .ag-category-tea {
        order: 3;
    }

    .ag-category-wellness {
        order: 4;
    }

    .ag-category-powders {
        order: 5;
    }

    .ag-category-gifts {
        order: 6;
    }



    /* =====================================================
       HIDE DESKTOP STORY
    ===================================================== */

    .ag-story-desktop {
        display: none;
    }



    /* =====================================================
       MOBILE STORY
    ===================================================== */

    .ag-story-mobile {
        position: relative;

        width: 100%;

        height: 370px;

        display: block;

        overflow: hidden;

        background: #103f2d;
    }


    .ag-story-mobile-image {
        position: absolute;

        inset: 0;

        width: 100%;

        height: 100%;

        object-fit: cover;

        object-position: 58% center;
    }


    .ag-story-mobile-overlay {
        position: absolute;

        inset: 0;

        background:
            linear-gradient(
                90deg,
                rgba(5, 47, 33, 0.90) 0%,
                rgba(5, 47, 33, 0.68) 40%,
                rgba(5, 47, 33, 0.25) 72%,
                rgba(5, 47, 33, 0.04) 100%
            );
    }



    /* =====================================================
       MOBILE STORY CONTENT
    ===================================================== */

    .ag-story-mobile-content {
        position: absolute;

        z-index: 3;

        left: 20px;

        bottom: 28px;

        display: flex;

        align-items: flex-start;

        gap: 13px;
    }



    /* WHITE LINE */

    .ag-mobile-story-line {
        width: 2px;

        height: 150px;

        display: block;

        flex-shrink: 0;

        margin-top: 3px;

        background: rgba(255, 255, 255, 0.95);

        border-radius: 20px;
    }



    /* =====================================================
       MOBILE STORY HEADING
    ===================================================== */

    .ag-mobile-story-text h2 {
        margin: 0 0 13px;

        color: #ffffff;

        font-family: "Caveat", cursive;

        font-size: 36px;

        font-weight: 500;

        line-height: 0.9;

        text-shadow:
            0 2px 5px rgba(0, 0, 0, 0.25);
    }



    /* =====================================================
       MOBILE STORY CONTENT = 16PX
    ===================================================== */

    .ag-mobile-story-text p {
        margin: 0 0 18px;

        color: #ffffff;

        font-family: "Montserrat", sans-serif;

        font-size: 16px;

        line-height: 1.5;

        font-weight: 400;
    }



    /* =====================================================
       MOBILE BUTTON = 16PX
    ===================================================== */

    .ag-mobile-story-text a {
        min-width: 145px;

        height: 42px;

        padding: 0 16px;

        display: inline-flex;

        align-items: center;
        justify-content: space-between;

        color: #365e4e;

        background: #ffffff;

        border-radius: 30px;

        text-decoration: none;

        font-family: "Montserrat", sans-serif;

        font-size: 16px;

        font-weight: 600;
    }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .ag-shop-container {
        width: calc(100% - 24px);
    }


    .ag-shop-heading {
        font-size: 20px;
    }


    .ag-shop-heading-line {
        width: 17px;
    }


    .ag-category-grid {
        column-gap: 5px;

        row-gap: 23px;
    }


    .ag-category-image {
        width: min(25vw, 88px);

        height: min(25vw, 88px);
    }


    /* KEEP CONTENT 16PX */

    .ag-view-all-btn,
    .ag-category-card h3,
    .ag-mobile-story-text p,
    .ag-mobile-story-text a {
        font-size: 16px;
    }


    .ag-story-mobile {
        height: 360px;
    }

}



/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .ag-shop-heading {
        font-size: 18px;
    }


    .ag-category-image {
        width: 78px;

        height: 78px;
    }


    .ag-shop-heading-line {
        width: 14px;
    }


    /*
       DO NOT REDUCE CONTENT.
       KEEP CONTENT 16PX.
    */

    .ag-view-all-btn,
    .ag-category-card h3,
    .ag-mobile-story-text p,
    .ag-mobile-story-text a {
        font-size: 16px;
    }

}

  /*
       new home third section
    */

    @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Playfair+Display:wght@600;700&display=swap");


/* =========================================================
   RESET
========================================================= */

.best-sellers-section *,
.idukki-kitchen-section * {
    box-sizing: border-box;
}


/* =========================================================
   BEST SELLERS SECTION
========================================================= */

.best-sellers-section {
    width: 100%;
    padding: 20px 0 24px;

    background: #fffefb;
}


.best-sellers-container {
    width: min(calc(100% - 64px), 1450px);

    margin: 0 auto;
}


/* =========================================================
   BEST SELLERS HEADER
========================================================= */

.best-sellers-header {
    width: 100%;

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

    margin-bottom: 16px;
}


.best-sellers-title-wrap {
    display: flex;
    align-items: center;
}


.best-sellers-title {
    margin: 0;

    color: #173f31;

    font-family: "Playfair Display", Georgia, serif;

    font-size: 30px;
    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -0.6px;
}


/* =========================================================
   TITLE LEAF
========================================================= */

.best-title-leaf {
    width: 21px;
    height: 21px;

    margin-left: 7px;
}


.best-leaf-fill {
    fill: #68a92d;
    stroke: #68a92d;
}


.best-leaf-line {
    fill: none;

    stroke: #33752c;
    stroke-width: 2;

    stroke-linecap: round;
}


/* =========================================================
   LINE AFTER LEAF
========================================================= */

.best-title-line {
    display: block;

    width: 31px;
    height: 2px;

    margin-left: 7px;

    background: #84a58c;

    border-radius: 20px;
}


/* =========================================================
   VIEW ALL BUTTON
========================================================= */

.best-view-btn {
    min-width: 180px;
    height: 42px;

    padding: 0 17px;

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

    gap: 9px;

    color: #315949;

    background: #ffffff;

    border: 1px solid #82aa96;
    border-radius: 30px;

    text-decoration: none;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;
    font-weight: 600;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


.best-view-btn:hover {
    color: #ffffff;

    background: #086b39;

    border-color: #086b39;

    transform: translateY(-1px);
}


.best-view-mobile {
    display: none;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.best-products-scroll {
    width: 100%;
}


.best-products-grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 10px;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.best-product-card {
    position: relative;

    min-width: 0;
    min-height: 405px;

    overflow: hidden;

    padding: 12px 14px 14px;

    background: #ffffff;

    border: 1px solid #eef0ea;
    border-radius: 8px;

    box-shadow:
        0 2px 8px rgba(38, 70, 51, 0.04);
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.best-product-image {
    width: 100%;
    height: 275px;

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

    overflow: hidden;

    margin-bottom: 5px;
}


.best-product-image img {
    width: 100%;
    height: 100%;

    display: block;

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


/* =========================================================
   PRODUCT NAME
========================================================= */

.best-product-info h3 {
    margin: 4px 0 3px;

    color: #263f35;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;
    line-height: 1.3;

    font-weight: 600;
}


/* =========================================================
   PRODUCT SUBTITLE
========================================================= */

.best-product-subtitle {
    margin: 0 0 6px;

    color: #798079;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;
    line-height: 1.3;

    font-weight: 400;
}


/* =========================================================
   RATING
========================================================= */

.best-rating {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 5px;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;
}


.best-stars {
    color: #f2ad19;

    font-size: 16px;

    letter-spacing: 1px;

    white-space: nowrap;
}


.best-rating span {
    color: #8c918c;

    font-size: 16px;
}


/* =========================================================
   PRICE
========================================================= */

.best-price-row {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 9px;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;
}


.best-price-row strong {
    color: #153e30;

    font-size: 16px;
    font-weight: 700;
}


.best-price-row span {
    color: #7a837d;

    font-size: 16px;
}


/* =========================================================
   ADD TO CART
========================================================= */

.best-cart-btn {
    width: 100%;
    height: 42px;

    padding: 0 15px;

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

    gap: 10px;

    color: #ffffff;

    background: #087439;

    border-radius: 30px;

    text-decoration: none;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;
    font-weight: 500;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.best-cart-btn:hover {
    color: #ffffff;

    background: #055e30;

    transform: translateY(-1px);
}


.best-cart-btn svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   HEART BUTTON
========================================================= */

.best-heart {
    position: absolute;

    z-index: 5;

    top: 10px;
    right: 10px;

    width: 33px;
    height: 33px;

    display: none;

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

    padding: 0;

    background: rgba(255, 255, 255, 0.95);

    border: 0;
    border-radius: 50%;

    cursor: pointer;
}


.best-heart svg {
    width: 21px;
    height: 21px;

    fill: none;

    stroke: #345b4c;
    stroke-width: 1.8;
}


/* =========================================================
   SLIDER DOTS
========================================================= */

.best-slider-dots {
    display: none;
}


/* =========================================================
   SECOND BANNER
   FROM IDUKKI TO YOUR KITCHEN
========================================================= */

.idukki-kitchen-section {
    position: relative;

    width: 100%;

    /*
       INCREASED SECOND BANNER HEIGHT
    */
    height: 340px;

    overflow: hidden;

    background: #073d2a;
}


/* =========================================================
   SECOND BANNER IMAGE
========================================================= */

.idukki-kitchen-bg {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center center;
}


/* =========================================================
   SECOND BANNER OVERLAY
========================================================= */

.idukki-kitchen-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(4, 39, 27, 0.82) 0%,
            rgba(4, 39, 27, 0.54) 48%,
            rgba(4, 39, 27, 0.18) 100%
        );
}


/* =========================================================
   SECOND BANNER CONTENT
========================================================= */

.idukki-kitchen-content {
    position: relative;

    z-index: 3;

    width: min(calc(100% - 140px), 1200px);
    height: 100%;

    margin: 0 auto;

    padding-top: 65px;

    color: #ffffff;
}


/* =========================================================
   BANNER HEADING
========================================================= */

.idukki-kitchen-content > h2 {
    margin: 0;

    color: #ffffff;

    font-family: "Playfair Display", Georgia, serif;

    font-size: 32px;
    line-height: 1.1;

    font-weight: 700;

    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.30);
}


/* =========================================================
   BANNER DESCRIPTION
========================================================= */

.idukki-kitchen-content > p {
    margin: 10px 0 35px;

    color: rgba(255, 255, 255, 0.94);

    font-family: "Montserrat", sans-serif;

    font-size: 16px;
    line-height: 1.5;

    font-weight: 400;
}


/* =========================================================
   FEATURE ROW
========================================================= */

.idukki-feature-grid {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 18px;
}


/* =========================================================
   FEATURE
========================================================= */

.idukki-feature {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 12px;
}


/* =========================================================
   FEATURE ICON
========================================================= */

.idukki-feature-icon {
    width: 55px;
    height: 55px;

    flex: 0 0 55px;
}


.idukki-feature-icon svg {
    width: 100%;
    height: 100%;

    fill: none;

    stroke: #c6dd48;

    stroke-width: 2;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   FEATURE TEXT
========================================================= */

.idukki-feature-text h3 {
    margin: 0 0 3px;

    color: #ffffff;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;
    line-height: 1.3;

    font-weight: 600;
}


.idukki-feature-text p {
    margin: 0;

    color: rgba(255, 255, 255, 0.85);

    font-family: "Montserrat", sans-serif;

    font-size: 16px;
    line-height: 1.3;

    font-weight: 400;
}


/* =========================================================
   DIVIDER
========================================================= */

.idukki-divider {
    display: block;

    width: 1px;
    height: 55px;

    flex-shrink: 0;

    background: rgba(255, 255, 255, 0.36);
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1200px) {

    .best-sellers-container {
        width: calc(100% - 40px);
    }


    .best-product-image {
        height: 200px;
    }


    .best-product-card {
        min-height: 390px;
    }


    .idukki-kitchen-content {
        width: calc(100% - 70px);
    }


    .idukki-divider {
        display: none;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 992px) {

    /* =====================================================
       PRODUCT GRID
    ===================================================== */

    .best-products-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 14px;
    }


    .best-product-image {
        height: 240px;
    }


    .best-product-card {
        min-height: 425px;
    }


    /* =====================================================
       SECOND BANNER HEIGHT
    ===================================================== */

    .idukki-kitchen-section {
        height: 400px;
    }


    .idukki-kitchen-content {
        width: calc(100% - 60px);

        padding-top: 55px;
    }


    .idukki-feature-grid {
        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 25px 35px;
    }


    .idukki-divider {
        display: none;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    /* =====================================================
       BEST SELLERS
    ===================================================== */

    .best-sellers-section {
        padding: 14px 0 14px;

        background: #fffefb;
    }


    .best-sellers-container {
        width: 100%;

        margin: 0;
    }


    .best-sellers-header {
        padding: 0 13px;

        margin-bottom: 12px;
    }


    .best-sellers-title {
        font-size: 21px;
    }


    .best-title-leaf {
        width: 17px;
        height: 17px;

        margin-left: 5px;
    }


    .best-title-line {
        display: none;
    }


    /* =====================================================
       VIEW ALL
    ===================================================== */

    .best-view-btn {
        min-width: 112px;
        height: 38px;

        padding: 0 10px;

        gap: 5px;

        font-size: 16px;
    }


    .best-view-desktop {
        display: none;
    }


    .best-view-mobile {
        display: inline;
    }


    /* =====================================================
       MOBILE PRODUCT SCROLL
    ===================================================== */

    .best-products-scroll {
        width: 100%;

        overflow-x: auto;

        padding: 0 5px 4px;

        scroll-snap-type: x mandatory;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: none;
    }


    .best-products-scroll::-webkit-scrollbar {
        display: none;
    }


    .best-products-grid {
        width: max-content;

        display: flex;

        gap: 7px;
    }


    /* =====================================================
       MOBILE PRODUCT CARD
    ===================================================== */

    .best-product-card {
        width: calc((100vw - 17px) / 2);

        flex: 0 0 calc((100vw - 17px) / 2);

        min-height: 390px;

        padding: 8px 8px 10px;

        border-radius: 7px;

        scroll-snap-align: start;
    }


    /* =====================================================
       MOBILE PRODUCT IMAGE
    ===================================================== */

    .best-product-image {
        height: 190px;

        margin-bottom: 6px;
    }


    .best-product-image img {
        width: 100%;
        height: 100%;

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


    /* =====================================================
       HEART
    ===================================================== */

    .best-heart {
        display: flex;

        top: 7px;
        right: 6px;
    }


    /* =====================================================
       PRODUCT TEXT = 16PX
    ===================================================== */

    .best-product-info h3,
    .best-product-subtitle,
    .best-rating,
    .best-rating span,
    .best-price-row,
    .best-price-row strong,
    .best-price-row span,
    .best-cart-btn {
        font-size: 16px;
    }


    .best-product-info h3 {
        margin: 2px 0 3px;

        line-height: 1.25;
    }


    .best-product-subtitle {
        margin-bottom: 5px;

        line-height: 1.25;
    }


    .best-rating {
        gap: 4px;

        margin-bottom: 5px;
    }


    .best-stars {
        font-size: 16px;

        letter-spacing: 0;
    }


    .best-price-row {
        gap: 8px;

        margin-bottom: 8px;
    }


    .best-cart-btn {
        height: 40px;

        gap: 6px;

        padding: 0 8px;
    }


    .best-cart-btn svg {
        width: 19px;
        height: 19px;
    }


    /* =====================================================
       SLIDER DOTS
    ===================================================== */

    .best-slider-dots {
        height: 20px;

        display: flex;

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

        gap: 4px;
    }


    .best-slider-dots span {
        width: 12px;
        height: 4px;

        display: block;

        background: #ffffff;

        border: 1px solid #9bb5a6;
        border-radius: 10px;
    }


    .best-slider-dots span.active {
        width: 16px;

        background: #096c3b;

        border-color: #096c3b;
    }


    /* =====================================================
       SECOND BANNER MOBILE
       HEIGHT INCREASED
    ===================================================== */

    .idukki-kitchen-section {
        height: 460px;
    }


    .idukki-kitchen-bg {
        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: 58% center;
    }


    .idukki-kitchen-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(3, 43, 29, 0.63) 0%,
                rgba(3, 43, 29, 0.56) 40%,
                rgba(3, 43, 29, 0.70) 100%
            );
    }


    .idukki-kitchen-content {
        width: calc(100% - 30px);

        height: 100%;

        padding-top: 52px;

        text-align: center;
    }


    /* =====================================================
       MOBILE BANNER HEADING
    ===================================================== */

    .idukki-kitchen-content > h2 {
        margin: 0;

        text-align: center;

        font-size: 25px;
        line-height: 1.15;
    }


    /* =====================================================
       MOBILE DESCRIPTION
    ===================================================== */

    .idukki-kitchen-content > p {
        width: 94%;

        margin: 12px auto 38px;

        font-size: 16px;
        line-height: 1.45;

        text-align: center;
    }


    .desktop-break {
        display: none;
    }


    /* =====================================================
       MOBILE FEATURES
    ===================================================== */

    .idukki-feature-grid {
        width: 100%;

        display: grid;

        grid-template-columns: repeat(4, minmax(0, 1fr));

        gap: 8px;
    }


    .idukki-feature {
        min-width: 0;

        display: flex;

        flex-direction: column;

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

        gap: 8px;

        text-align: center;
    }


    .idukki-feature-icon {
        width: 52px;
        height: 52px;

        flex: 0 0 52px;
    }


    .idukki-feature-text {
        width: 100%;
    }


    .idukki-feature-text h3,
    .idukki-feature-text p {
        font-size: 16px;

        line-height: 1.25;
    }


    .idukki-divider {
        display: none;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    /* =====================================================
       BEST SELLERS
    ===================================================== */

    .best-sellers-title {
        font-size: 20px;
    }


    .best-product-card {
        width: calc((100vw - 16px) / 2);

        flex-basis: calc((100vw - 16px) / 2);

        min-height: 375px;
    }


    .best-product-image {
        height: 180px;
    }


    /* =====================================================
       SECOND BANNER
    ===================================================== */

    .idukki-kitchen-section {
        height: 480px;
    }


    .idukki-kitchen-content {
        width: calc(100% - 20px);

        padding-top: 50px;
    }


    .idukki-kitchen-content > h2 {
        font-size: 23px;
    }


    .idukki-feature-grid {
        gap: 4px;
    }


    .idukki-feature-icon {
        width: 48px;
        height: 48px;

        flex-basis: 48px;
    }


    /* KEEP CONTENT AT 16PX */

    .best-product-info h3,
    .best-product-subtitle,
    .best-rating,
    .best-rating span,
    .best-price-row,
    .best-price-row strong,
    .best-price-row span,
    .best-cart-btn,
    .idukki-kitchen-content > p,
    .idukki-feature-text h3,
    .idukki-feature-text p {
        font-size: 16px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .best-sellers-title {
        font-size: 18px;
    }


    .best-view-btn {
        min-width: 105px;

        padding: 0 8px;
    }


    .best-product-card {
        min-height: 365px;
    }


    .best-product-image {
        height: 170px;
    }


    /* SECOND BANNER */

    .idukki-kitchen-section {
        height: 500px;
    }


    .idukki-kitchen-content {
        padding-top: 45px;
    }


    .idukki-kitchen-content > h2 {
        font-size: 22px;
    }


    /* KEEP CONTENT 16PX */

    .best-view-btn,
    .best-product-info h3,
    .best-product-subtitle,
    .best-rating,
    .best-rating span,
    .best-price-row,
    .best-price-row strong,
    .best-price-row span,
    .best-cart-btn,
    .idukki-kitchen-content > p,
    .idukki-feature-text h3,
    .idukki-feature-text p {
        font-size: 16px;
    }

}

  /* new home fourt  */

  @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap");


/* =========================================================
   RESET
========================================================= */

.ag-spice-section *,
.ag-review-section *,
.ag-taste-section * {
    box-sizing: border-box;
}


/* =========================================================
   COMMON LEAF
========================================================= */

.ag-section-leaf {
    width: 20px;
    height: 20px;

    margin-left: 7px;
}


.ag-section-leaf-fill {
    fill: #65a82d;

    stroke: #65a82d;
}


.ag-section-leaf-line {
    fill: none;

    stroke: #32752c;

    stroke-width: 2;

    stroke-linecap: round;
}


.ag-section-heading-line {
    width: 29px;
    height: 2px;

    display: block;

    margin-left: 7px;

    background: #89aa94;

    border-radius: 20px;
}



/* =========================================================
   SECTION 1 - KNOW YOUR SPICE
========================================================= */

.ag-spice-section {
    width: 100%;

    height: 360px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #f7faf3 0%,
            #fffef9 50%,
            #f7faf2 100%
        );


    border-bottom: 1px solid #edf1e9;
}


.ag-spice-inner {
    width: 100%;
    height: 100%;

    display: grid;

    grid-template-columns:
        37% 34% 29%;

    align-items: center;
}


/* =========================================================
   SPICE IMAGE
========================================================= */

.ag-spice-image-wrap {
    width: 100%;
    height: 100%;

    overflow: hidden;
}


.ag-spice-main-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;
}


/* =========================================================
   SPICE CONTENT
========================================================= */

.ag-spice-content {
    padding: 35px 44px;
}


.ag-spice-label {
    margin-bottom: 5px;

    color: #688574;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;

    line-height: 1.2;

    font-weight: 600;

    letter-spacing: 3px;
}


.ag-spice-content h2 {
    margin: 0;

    color: #174434;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 38px;

    line-height: 1;

    font-weight: 700;
}


.ag-spice-content h3 {
    margin: 3px 0 16px;

    color: #56842b;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 24px;

    line-height: 1.15;

    font-weight: 700;
}


.ag-spice-content p {
    max-width: 530px;

    margin: 0 0 21px;

    color: #49534e;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;

    line-height: 1.55;

    font-weight: 400;
}


/* =========================================================
   SPICE BUTTON
========================================================= */

.ag-spice-button {
    min-width: 195px;

    height: 44px;

    padding: 0 20px;

    display: inline-flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

    color: #ffffff;

    background: #08723e;

    border-radius: 30px;

    text-decoration: none;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;

    font-weight: 600;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}


.ag-spice-button:hover {
    color: #ffffff;

    background: #055f33;

    transform: translateY(-2px);
}


.ag-spice-mobile-button {
    display: none;
}


/* =========================================================
   SPICE RIGHT INFORMATION
========================================================= */

.ag-spice-info {
    min-height: 250px;

    padding: 10px 35px 10px 30px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    border-left: 1px solid #dce3db;
}


.ag-spice-info-item {
    display: flex;

    align-items: center;

    gap: 14px;
}


.ag-spice-info-icon {
    width: 45px;
    height: 45px;

    flex: 0 0 45px;
}


.ag-spice-info-icon svg {
    width: 100%;
    height: 100%;

    fill: none;

    stroke: #52836d;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.ag-spice-info-item h4 {
    margin: 0 0 3px;

    color: #345e4e;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;

    font-weight: 600;
}


.ag-spice-info-item p {
    margin: 0;

    color: #6c756f;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;

    line-height: 1.3;
}



/* =========================================================
   SECTION 2 - CUSTOMER REVIEWS
========================================================= */

.ag-review-section {
    width: 100%;

    padding: 25px 0 22px;

    overflow: hidden;

    background: #fffefb;
}


.ag-review-container {
    width: min(
        calc(100% - 60px),
        1450px
    );

    margin: 0 auto;
}


/* =========================================================
   REVIEW HEADER
========================================================= */

.ag-review-header {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 17px;
}


.ag-review-heading-wrap {
    display: flex;

    align-items: center;
}


.ag-review-heading-wrap h2 {
    margin: 0;

    color: #173f31;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 29px;

    line-height: 1.1;

    font-weight: 700;
}


/* =========================================================
   REVIEW ARROWS
========================================================= */

.ag-review-arrows {
    display: flex;

    align-items: center;

    gap: 9px;
}


.ag-review-arrows span {
    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #718b7d;

    background: #ffffff;

    border: 1px solid #dce4de;

    border-radius: 50%;

    font-family: Arial, sans-serif;

    font-size: 16px;
}


.ag-review-arrows span.active {
    color: #ffffff;

    background: #08723e;

    border-color: #08723e;
}


/* =========================================================
   REVIEW SLIDER
========================================================= */

.ag-review-slider {
    position: relative;

    width: 100%;

    overflow: hidden;
}


/* =========================================================
   AUTO SCROLL TRACK
========================================================= */

.ag-review-track {
    display: flex;

    width: max-content;

    align-items: stretch;

    will-change: transform;

    animation:
        agReviewContinuousScroll
        30s
        linear
        infinite;
}


/* =========================================================
   CONTINUOUS LOOP
========================================================= */

@keyframes agReviewContinuousScroll {

    from {
        transform:
            translate3d(
                0,
                0,
                0
            );
    }


    to {
        transform:
            translate3d(
                -50%,
                0,
                0
            );
    }

}


/* =========================================================
   REVIEW GROUP
========================================================= */

.ag-review-group {
    --ag-review-gap: 18px;

    display: flex;

    align-items: stretch;

    flex-shrink: 0;

    gap:
        var(--ag-review-gap);

    padding-right:
        var(--ag-review-gap);
}


/* =========================================================
   REVIEW CARD
   3 VISIBLE DESKTOP
========================================================= */

.ag-review-card {
    position: relative;

    width:
        calc(
            (
                min(
                    calc(100vw - 60px),
                    1450px
                )
                -
                36px
            )
            /
            3
        );

    flex: 0 0 auto;

    min-height: 190px;

    padding:
        27px
        24px
        21px
        57px;

    background: #ffffff;

    border: 1px solid #e8ece7;

    border-radius: 7px;

    box-shadow:
        0 2px 8px
        rgba(
            22,
            67,
            45,
            0.04
        );
}


/* =========================================================
   REVIEW QUOTE
========================================================= */

.ag-review-quote {
    position: absolute;

    top: 17px;

    left: 20px;

    color: #08723e;

    font-family:
        Georgia,
        serif;

    font-size: 46px;

    line-height: 1;

    font-weight: 700;
}


/* =========================================================
   REVIEW CONTENT
========================================================= */

.ag-review-text {
    margin: 0 0 10px;

    color: #4c5651;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;

    line-height: 1.5;

    font-weight: 400;
}


.ag-review-stars {
    margin-bottom: 6px;

    color: #f3a91b;

    font-size: 16px;

    line-height: 1;

    letter-spacing: 2px;
}


.ag-review-card h3 {
    margin: 0 0 3px;

    color: #284d3e;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;

    line-height: 1.25;

    font-weight: 600;
}


.ag-review-location {
    margin: 0;

    color: #818982;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;

    line-height: 1.3;
}


/* =========================================================
   MOBILE DOTS
========================================================= */

.ag-review-mobile-dots {
    display: none;
}



/* =========================================================
   SECTION 3 - TASTE OF AYURGREEN
========================================================= */

.ag-taste-section {
    width: 100%;

    padding: 0 0 28px;

    background: #fffefb;
}


.ag-taste-container {
    width: min(
        calc(100% - 60px),
        1450px
    );

    margin: 0 auto;
}


/* =========================================================
   DESKTOP
========================================================= */

.ag-taste-desktop {
    display: block;
}


/* HEADER */

.ag-taste-header {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 14px;
}


.ag-taste-title-wrap {
    display: flex;

    align-items: center;
}


.ag-taste-title-wrap h2 {
    margin: 0;

    color: #173f31;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 29px;

    line-height: 1.1;

    font-weight: 700;
}


/* =========================================================
   INSTAGRAM
========================================================= */

.ag-instagram-link {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #52665b;

    text-decoration: none;

    font-family: "Montserrat", sans-serif;

    font-size: 16px;
}


.ag-instagram-link svg {
    width: 25px;

    height: 25px;

    fill: none;

    stroke: #4d795e;

    stroke-width: 1.7;
}


/* =========================================================
   IMAGE GRID
========================================================= */

.ag-taste-gallery {
    display: grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0, 1fr)
        );

    gap: 7px;
}


.ag-taste-image {
    height: 205px;

    overflow: hidden;

    background: #eef1e9;
}


.ag-taste-image img {
    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.35s ease;
}


.ag-taste-image:hover img {
    transform: scale(1.05);
}


/* =========================================================
   MOBILE BLOG
========================================================= */

.ag-blog-mobile {
    display: none;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    /* SPICE */

    .ag-spice-section {
        height: auto;
    }


    .ag-spice-inner {
        grid-template-columns:
            40% 60%;
    }


    .ag-spice-image-wrap {
        min-height: 360px;
    }


    .ag-spice-info {
        display: none;
    }


    /* REVIEW */

    .ag-review-container {
        width:
            calc(
                100% - 36px
            );
    }


    .ag-review-group {
        --ag-review-gap: 14px;
    }


    .ag-review-card {
        width:
            calc(
                (
                    100vw
                    -
                    36px
                    -
                    14px
                )
                /
                2
            );
    }


    .ag-review-track {
        animation-duration: 28s;
    }


    /* GALLERY */

    .ag-taste-container {
        width:
            calc(
                100% - 36px
            );
    }


    .ag-taste-image {
        height: 170px;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {


    /* =====================================================
       SECTION 1 MOBILE
    ===================================================== */

    .ag-spice-section {
        position: relative;

        height: 350px;

        overflow: hidden;

        background: #fffef9;
    }


    .ag-spice-inner {
        position: relative;

        display: block;

        width: 100%;

        height: 100%;
    }


    /* IMAGE RIGHT */

    .ag-spice-image-wrap {
        position: absolute;

        top: 48px;

        right: -8px;

        z-index: 1;

        width: 55%;

        height: 260px;

        min-height: 0;
    }


    .ag-spice-main-image {
        width: 100%;

        height: 100%;

        object-fit: contain;

        object-position: right center;
    }


    /* CONTENT LEFT */

    .ag-spice-content {
        position: relative;

        z-index: 2;

        width: 62%;

        padding:
            24px
            0
            20px
            10px;
    }


    .ag-spice-label {
        margin-bottom: 13px;

        color: #244a3a;

        font-family:
            "Playfair Display",
            Georgia,
            serif;

        font-size: 21px;

        line-height: 1.1;

        font-weight: 700;

        letter-spacing: 0;
    }


    .ag-spice-content h2 {
        display: none;
    }


    .ag-spice-content h3 {
        width: 175px;

        margin: 0 0 10px;

        color: #3e7a30;

        font-size: 21px;

        line-height: 1.15;
    }


    .ag-spice-content p {
        width: 180px;

        margin: 0 0 15px;

        color: #424d47;

        font-size: 16px;

        line-height: 1.35;
    }


    .ag-spice-button {
        min-width: 180px;

        height: 41px;

        padding: 0 16px;

        font-size: 16px;
    }


    .ag-spice-desktop-button {
        display: none;
    }


    .ag-spice-mobile-button {
        display: inline;
    }


    .ag-spice-info {
        display: none;
    }



    /* =====================================================
       SECTION 2 MOBILE
    ===================================================== */

    .ag-review-section {
        padding:
            21px
            0
            13px;
    }


    .ag-review-container {
        width:
            calc(
                100% - 16px
            );
    }


    .ag-review-header {
        margin-bottom: 16px;
    }


    .ag-review-heading-wrap h2 {
        font-size: 21px;
    }


    .ag-section-leaf {
        width: 17px;

        height: 17px;

        margin-left: 5px;
    }


    .ag-section-heading-line {
        display: none;
    }


    .ag-review-arrows {
        display: none;
    }


    .ag-review-group {
        --ag-review-gap: 10px;
    }


    /* ONE FULL CARD */

    .ag-review-card {
        width:
            calc(
                100vw - 16px
            );

        min-height: 215px;

        padding:
            29px
            19px
            22px
            55px;
    }


    .ag-review-quote {
        top: 20px;

        left: 18px;

        font-size: 43px;
    }


    .ag-review-text,
    .ag-review-stars,
    .ag-review-card h3,
    .ag-review-location {
        font-size: 16px;
    }


    /* AUTO SCROLL SPEED */

    .ag-review-track {
        animation-duration: 26s;
    }


    /* DOT DESIGN */

    .ag-review-mobile-dots {
        height: 30px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 5px;
    }


    .ag-review-mobile-dots span {
        width: 11px;

        height: 5px;

        display: block;

        background: #ffffff;

        border:
            1px solid
            #9ab3a5;

        border-radius: 20px;
    }


    .ag-review-mobile-dots span.active {
        width: 18px;

        background: #08723e;

        border-color: #08723e;
    }



    /* =====================================================
       SECTION 3 MOBILE
    ===================================================== */

    .ag-taste-section {
        padding:
            15px
            0
            22px;
    }


    .ag-taste-container {
        width:
            calc(
                100% - 16px
            );
    }


    /* HIDE DESKTOP GALLERY */

    .ag-taste-desktop {
        display: none;
    }


    /* SHOW BLOG */

    .ag-blog-mobile {
        display: block;
    }


    .ag-blog-header {
        width: 100%;

        display: flex;

        align-items: center;

        justify-content: space-between;

        margin-bottom: 11px;
    }


    .ag-blog-title-wrap {
        display: flex;

        align-items: center;
    }


    .ag-blog-title-wrap h2 {
        margin: 0;

        color: #173f31;

        font-family:
            "Playfair Display",
            Georgia,
            serif;

        font-size: 21px;

        line-height: 1.1;

        font-weight: 700;
    }


    /* VIEW ALL */

    .ag-blog-view-all {
        min-width: 94px;

        height: 36px;

        padding: 0 11px;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        gap: 6px;

        color: #365c4c;

        background: #ffffff;

        border: 1px solid #89a99a;

        border-radius: 22px;

        text-decoration: none;

        font-family:
            "Montserrat",
            sans-serif;

        font-size: 16px;

        font-weight: 600;
    }


    /* BLOG GRID */

    .ag-blog-grid {
        width: 100%;

        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 7px;
    }


    .ag-blog-card {
        overflow: hidden;

        background: #ffffff;

        border:
            1px solid
            #e8ebe6;

        border-radius: 5px;
    }


    .ag-blog-image {
        width: 100%;

        height: 155px;

        overflow: hidden;
    }


    .ag-blog-image img {
        width: 100%;

        height: 100%;

        display: block;

        object-fit: cover;
    }


    .ag-blog-content {
        min-height: 108px;

        padding:
            9px
            8px
            10px;
    }


    .ag-blog-content h3 {
        margin:
            0
            0
            12px;

        color: #294b3d;

        font-family:
            "Montserrat",
            sans-serif;

        font-size: 16px;

        line-height: 1.3;

        font-weight: 600;
    }


    .ag-blog-content a {
        display: inline-flex;

        align-items: center;

        gap: 5px;

        color: #27724c;

        text-decoration: none;

        font-family:
            "Montserrat",
            sans-serif;

        font-size: 16px;

        line-height: 1.2;

        font-weight: 600;
    }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .ag-spice-section {
        height: 360px;
    }


    .ag-spice-image-wrap {
        width: 55%;

        height: 255px;

        right: -10px;
    }


    .ag-spice-content p {
        width: 175px;
    }


    .ag-review-card {
        min-height: 220px;
    }


    .ag-blog-image {
        height: 145px;
    }

}



/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

    .ag-spice-section {
        height: 375px;
    }


    .ag-spice-content {
        width: 64%;
    }


    .ag-spice-content p {
        width: 165px;
    }


    .ag-spice-image-wrap {
        top: 58px;

        width: 52%;

        right: -7px;
    }


    .ag-spice-button {
        min-width: 165px;
    }


    .ag-review-heading-wrap h2 {
        font-size: 19px;
    }


    .ag-review-card {
        width:
            calc(
                100vw - 16px
            );

        min-height: 230px;

        padding:
            27px
            15px
            20px
            48px;
    }


    .ag-review-quote {
        left: 14px;
    }


    .ag-blog-grid {
        gap: 5px;
    }


    .ag-blog-image {
        height: 130px;
    }

}

/* =========================================================
   new home footer
========================================================= */
/* =========================================================
   AYURGREEN FOOTER
========================================================= */

* {
    box-sizing: border-box;
}

.ag-footer {
    width: 100%;
    overflow: hidden;
    background: #003f2c;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   COMMON CONTAINER
========================================================= */

.ag-container {
    width: min(1180px, calc(100% - 70px));
    margin: 0 auto;
}


/* =========================================================
   NEWSLETTER
========================================================= */

.ag-newsletter {
    position: relative;
    width: 100%;
    min-height: 128px;

    display: flex;
    align-items: center;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    border-bottom: 1px solid rgba(255,255,255,.15);
}

.ag-newsletter::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(0,54,38,.10),
        rgba(0,54,38,.03)
    );

    pointer-events: none;
}

.ag-newsletter-inner {
    position: relative;
    z-index: 2;

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

    gap: 60px;
}


/* =========================================================
   NEWSLETTER CONTENT
========================================================= */

.ag-newsletter-content {
    flex: 1;
}

.ag-newsletter-content h2 {
    margin: 0 0 7px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 30px;
    line-height: 1.15;

    color: #fff;
    font-weight: 600;
}

.ag-newsletter-content p {
    margin: 0;

    font-size: 16px;
    line-height: 1.5;

    color: rgba(255,255,255,.82);
}


/* =========================================================
   NEWSLETTER FORM
========================================================= */

.ag-subscribe-form {
    width: 440px;
    flex: 0 0 440px;
}

.ag-subscribe-box {
    width: 100%;
    min-height: 52px;

    display: flex;
    align-items: center;

    padding: 5px 6px 5px 17px;

    border-radius: 50px;

    background: #fff;
}

.ag-mail-icon {
    width: 20px;
    height: 20px;

    flex: 0 0 20px;

    color: #788c83;
}

.ag-mail-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.ag-subscribe-box input {
    flex: 1;
    min-width: 0;

    border: 0;
    outline: 0;

    padding: 0 10px;

    background: transparent;

    font-size: 16px;
    color: #444;
}

.ag-subscribe-box input::placeholder {
    color: #849089;
}

.ag-subscribe-box button {
    height: 42px;

    padding: 0 24px;

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

    gap: 8px;

    border: 0;
    border-radius: 50px;

    background: #006440;
    color: #fff;

    font-size: 16px;

    cursor: pointer;

    white-space: nowrap;

    transition: .25s ease;
}

.ag-subscribe-box button:hover {
    background: #087e55;
}

.ag-subscribe-box button span {
    font-size: 20px;
}


/* =========================================================
   SUCCESS MESSAGE
========================================================= */

.ag-newsletter-messages {
    position: relative;
    z-index: 4;

    width: min(1180px, calc(100% - 70px));

    margin: 8px auto 0;
}

.ag-newsletter-message {
    font-size: 16px;
    text-align: right;

    color: #fff;
}

.ag-newsletter-message.success {
    color: #d5ffdf;
}

.ag-newsletter-message.error {
    color: #ffd4d4;
}


/* =========================================================
   MAIN FOOTER
========================================================= */

.ag-footer-main {
    padding: 34px 0 30px;

    background:
        radial-gradient(
            circle at 92% 20%,
            rgba(20,102,69,.18),
            transparent 38%
        ),
        #003f2c;
}

.ag-footer-grid {
    display: grid;

    grid-template-columns:
        1.5fr
        .78fr
        1fr
        1.35fr
        .8fr;

    gap: 38px;

    align-items: start;
}


/* =========================================================
   LOGO
========================================================= */

.ag-footer-logo {
    width: 175px;
    max-width: 100%;
    height: auto;

    display: block;

    margin-bottom: 17px;
}

.ag-brand-text {
    max-width: 285px;

    margin: 0 0 20px;

    font-size: 16px;
    line-height: 1.55;

    color: rgba(255,255,255,.75);
}


/* =========================================================
   SOCIAL ICONS
========================================================= */

.ag-socials {
    display: flex;
    align-items: center;

    gap: 10px;
}

.ag-socials a {
    width: 34px;
    height: 34px;

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

    border: 1px solid rgba(255,255,255,.4);
    border-radius: 50%;

    color: #fff;

    text-decoration: none;

    font-size: 16px;
    font-weight: 600;

    transition: .25s ease;
}

.ag-socials a:hover {
    background: rgba(255,255,255,.13);
    transform: translateY(-2px);
}

.ag-socials svg {
    width: 15px;
    height: 15px;

    fill: currentColor;
}

.ag-in {
    font-size: 13px;
}


/* =========================================================
   FOOTER COLUMNS
========================================================= */

.ag-footer-column h3 {
    margin: 2px 0 20px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 18px;
    font-weight: 500;

    color: #fff;
}

.ag-footer-column ul {
    list-style: none;

    padding: 0;
    margin: 0;
}

.ag-footer-column li {
    margin-bottom: 11px;
}

.ag-footer-column a {
    font-size: 16px;
    line-height: 1.45;

    color: rgba(255,255,255,.75);

    text-decoration: none;

    transition: .2s ease;
}

.ag-footer-column a:hover {
    color: #fff;
}


/* =========================================================
   CONTACT
========================================================= */

.ag-contact-row {
    display: flex;
    align-items: flex-start;

    gap: 11px;

    margin-bottom: 14px;
}

.ag-contact-row p {
    margin: 0;

    font-size: 16px;
    line-height: 1.55;

    color: rgba(255,255,255,.75);
}

.ag-contact-row a {
    font-size: 16px;
}

.ag-contact-icon {
    width: 17px;
    min-width: 17px;
    height: 17px;

    margin-top: 3px;

    color: #fff;

    font-size: 16px;
}

.ag-contact-icon svg {
    width: 100%;
    height: 100%;

    fill: currentColor;
}


/* =========================================================
   PURE IMAGE AREA
========================================================= */

.ag-pure-area {
    min-height: 195px;

    display: flex;
    flex-direction: column;

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

    position: relative;

    text-align: center;
}

.ag-pure-image {
    width: 120px;
    height: 100px;

    display: block;

    object-fit: contain;

    margin: -15px auto -5px;
}

.ag-pure-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: -7px;

    transform: rotate(-8deg);

    color: rgba(255,255,255,.75);
}

.ag-pure-content span {
    display: block;

    font-family: "Brush Script MT", "Segoe Script", cursive;

    font-size: 18px;
    line-height: 1.2;

    font-style: italic;
}

.ag-pure-content .ag-pure-big {
    font-size: 27px;
}


/* =========================================================
   MOBILE LINKS
========================================================= */

.ag-mobile-links {
    display: none;
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.ag-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.15);

    background: #003c29;
}

.ag-bottom-inner {
    min-height: 64px;

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

    gap: 25px;
}

.ag-bottom-inner p {
    margin: 0;

    font-size: 16px;
    line-height: 1.5;

    color: rgba(255,255,255,.65);
}

.ag-policy {
    display: flex;
    align-items: center;

    gap: 13px;
}

.ag-policy span {
    width: 1px;
    height: 17px;

    background: rgba(255,255,255,.3);
}

.ag-policy a {
    font-size: 16px;

    color: rgba(255,255,255,.65);

    text-decoration: none;
}

.ag-policy a:hover {
    color: #fff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .ag-container {
        width: calc(100% - 45px);
    }

    .ag-newsletter-inner {
        gap: 35px;
    }

    .ag-subscribe-form {
        width: 390px;
        flex-basis: 390px;
    }

    .ag-footer-grid {
        grid-template-columns:
            1.3fr
            .8fr
            1fr
            1.3fr;

        gap: 28px;
    }

    .ag-pure-area {
        display: none;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .ag-container {
        width: calc(100% - 32px);
    }


    /* NEWSLETTER */

    .ag-newsletter {
        min-height: auto;

        padding: 24px 0 22px;

        background-size: cover !important;
        background-position: center center !important;
    }

    .ag-newsletter::after {
        background: rgba(0,54,38,.50);
    }

    .ag-newsletter-inner {
        display: block;
    }

    .ag-newsletter-content {
        text-align: center;
    }

    .ag-newsletter-content h2 {
        font-size: 25px;

        margin-bottom: 8px;
    }

    .ag-newsletter-content p {
        font-size: 16px;

        margin-bottom: 18px;
    }

    .ag-subscribe-form {
        width: 100%;
        max-width: 100%;

        flex: none;
    }

    .ag-subscribe-box {
        min-height: 50px;

        padding:
            4px
            5px
            4px
            14px;
    }

    .ag-subscribe-box input {
        font-size: 16px;
    }

    .ag-subscribe-box button {
        height: 40px;

        padding: 0 17px;

        font-size: 16px;
    }


    .ag-newsletter-messages {
        width: calc(100% - 32px);

        margin-top: 10px;
    }

    .ag-newsletter-message {
        text-align: center;
        font-size: 16px;
    }


    /* MAIN */

    .ag-footer-main {
        padding: 27px 0 25px;
    }

    .ag-footer-grid {
        display: block;
    }

    .ag-brand {
        text-align: center;
    }

    .ag-footer-logo {
        width: 165px;

        margin: 0 auto 18px;
    }

    .ag-brand-text {
        display: none;
    }

    .ag-footer-column {
        display: none;
    }

    .ag-pure-area {
        display: none;
    }


    /* SOCIALS */

    .ag-socials {
        justify-content: center;
    }

    .ag-socials a {
        width: 34px;
        height: 34px;

        font-size: 16px;
    }


    /* MOBILE LINKS */

    .ag-mobile-links {
        display: block;
        margin-top: 24px;
        width: 100%;
    }

    .ag-mobile-link-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 14px;
        width: 100%;
        align-items: center;
    }

    .ag-mobile-link-grid a {
        min-width: 0;
        color: rgba(255,255,255,.84);
        font-size: 13px;
        line-height: 1.3;
        font-weight: 500;
        text-decoration: none;
        white-space: nowrap;
        text-align: left;
    }

    .ag-mobile-link-grid a:hover {
        color: #fff;
    }


    /* COPYRIGHT */

    .ag-bottom-inner {
        display: block;

        min-height: auto;

        padding: 18px 0;
    }

    .ag-bottom-inner p {
        font-size: 16px;

        margin-bottom: 15px;
    }

    .ag-policy {
        justify-content: flex-end;
    }

    .ag-policy a {
        font-size: 16px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .ag-container {
        width: calc(100% - 28px);
    }

    .ag-newsletter-content h2 {
        font-size: 23px;
    }

    .ag-newsletter-content p {
        font-size: 16px;
    }

    .ag-subscribe-box {
        min-height: 48px;
    }

    .ag-subscribe-box button {
        padding: 0 14px;

        font-size: 14px;
    }

    .ag-footer-logo {
        width: 155px;
    }

    .ag-mobile-link-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 7px;
        row-gap: 12px;
    }

    .ag-mobile-link-grid a {
        font-size: 12px;
    }

    .ag-bottom-inner p,
    .ag-policy a {
        font-size: 16px;
    }
}


@media (max-width: 360px) {
    .ag-mobile-link-grid {
        column-gap: 5px;
        row-gap: 11px;
    }

    .ag-mobile-link-grid a {
        font-size: 11px;
    }
}


/* =========================================================
   Garden Selection

========================================================= */
/* =============================================
   RESET
============================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "DM Sans", sans-serif;

    color: #173b29;

    background: #f7f9f3;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =============================================
   MAIN SECTION
============================================= */

.premium-spice-section {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        100px
        6%
        65px;

    background:
        linear-gradient(
            135deg,
            #fbfcf8 0%,
            #f4f8eb 50%,
            #eef5df 100%
        );
}


/* =============================================
   DECORATIVE BACKGROUND
============================================= */

.bg-circle {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(3px);
}

.bg-circle-one {
    width: 500px;
    height: 500px;

    right: -190px;
    top: -220px;

    background:
        radial-gradient(
            circle,
            rgba(115, 151, 45, 0.18),
            rgba(115, 151, 45, 0)
        );
}

.bg-circle-two {
    width: 390px;
    height: 390px;

    left: -180px;
    bottom: -170px;

    background:
        radial-gradient(
            circle,
            rgba(20, 112, 62, 0.12),
            transparent 70%
        );
}


/* =============================================
   MAIN WRAPPER
============================================= */

.spice-wrapper {
    position: relative;
    z-index: 2;

    max-width: 1350px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 100px;

    align-items: center;
}


/* =============================================
   LEFT CONTENT
============================================= */

.spice-intro {
    max-width: 560px;
}


/* top label */

.section-label {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 26px;

    color: #819c1d;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 3px;
}

.label-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #b3cc2f;
}

.label-line {
    display: block;

    width: 45px;
    height: 1px;

    background: #a8bd3c;
}


/* heading */

.spice-heading {
    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: clamp(
        48px,
        5vw,
        78px
    );

    line-height: 0.98;

    letter-spacing: -2.5px;

    color: #123c27;

    margin-bottom: 30px;
}

.spice-heading span {
    display: block;

    margin-top: 9px;

    color: #6e8f1e;
}


/* paragraph */

.spice-description {
    max-width: 510px;

    color: #647069;

    font-size: 16px;

    line-height: 1.85;

    margin-bottom: 36px;
}


/* =============================================
   BUTTON + SOURCE
============================================= */

.spice-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 30px;
}


/* main button */

.primary-btn {
    min-height: 56px;

    display: inline-flex;

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

    gap: 25px;

    padding: 0 28px;

    border-radius: 50px;

    background:
        linear-gradient(
            135deg,
            #0b6539,
            #064d2b
        );

    color: #ffffff;

    font-size: 14px;

    font-weight: 600;

    box-shadow:
        0 15px 30px
        rgba(11, 101, 57, 0.18);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}

.primary-btn span {
    font-size: 21px;

    transition:
        transform 0.3s ease;
}

.primary-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 20px 40px
        rgba(11, 101, 57, 0.24);
}

.primary-btn:hover span {
    transform: translateX(5px);
}


/* source */

.naturally-sourced {
    display: flex;

    align-items: center;

    gap: 11px;
}

.source-icon {
    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 50%;

    color: #5d821c;

    background: #edf4da;

    font-weight: 700;
}

.naturally-sourced div {
    display: flex;

    flex-direction: column;

    gap: 2px;
}

.naturally-sourced small {
    color: #91a071;

    font-size: 9px;

    letter-spacing: 1.3px;

    font-weight: 600;
}

.naturally-sourced strong {
    color: #274a34;

    font-size: 13px;
}


/* =============================================
   FEATURE AREA
============================================= */

.features-area {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;
}


/* first card wider */

.quality-card:first-child {
    grid-column: 1 / -1;
}


/* card */

.quality-card {
    position: relative;

    min-height: 220px;

    padding:
        30px
        28px;

    overflow: hidden;

    border-radius: 25px;

    border:
        1px solid
        rgba(21, 82, 48, 0.08);

    background:
        rgba(255, 255, 255, 0.82);

    box-shadow:
        0 18px 50px
        rgba(50, 85, 57, 0.07);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


/* subtle green block */

.quality-card::before {
    content: "";

    position: absolute;

    width: 115px;
    height: 115px;

    right: -35px;
    top: -35px;

    border-radius: 50%;

    background:
        rgba(150, 180, 59, 0.08);
}


.quality-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(123, 154, 39, 0.25);

    box-shadow:
        0 25px 55px
        rgba(40, 83, 52, 0.12);
}


/* number */

.card-number {
    position: absolute;

    right: 23px;
    top: 19px;

    color:
        rgba(22, 74, 43, 0.16);

    font-family:
        "Playfair Display",
        serif;

    font-size: 33px;

    font-weight: 700;
}


/* icon */

.card-icon {
    width: 48px;
    height: 48px;

    display: flex;

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

    margin-bottom: 20px;

    border-radius: 15px;

    color: #648418;

    background: #edf4d7;

    font-size: 22px;
}


/* content */

.card-content {
    position: relative;

    z-index: 2;
}

.card-small-text {
    display: block;

    margin-bottom: 7px;

    color: #8ca127;

    font-size: 9px;

    letter-spacing: 1.5px;

    font-weight: 700;
}

.card-content h2 {
    margin-bottom: 9px;

    color: #183e2a;

    font-family:
        "Playfair Display",
        serif;

    font-size: 24px;

    line-height: 1.2;
}

.card-content p {
    color: #748078;

    font-size: 13px;

    line-height: 1.7;
}


/* lime line */

.card-bottom-line {
    width: 37px;
    height: 3px;

    margin-top: 20px;

    border-radius: 10px;

    background: #abc52e;

    transition:
        width 0.35s ease;
}

.quality-card:hover
.card-bottom-line {
    width: 70px;
}


/* =============================================
   BOTTOM BENEFITS
============================================= */

.benefits-wrapper {
    position: relative;
    z-index: 2;

    max-width: 1350px;

    margin:
        65px auto
        0;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    overflow: hidden;

    border-radius: 24px;

    border:
        1px solid
        rgba(28, 76, 45, 0.08);

    background:
        rgba(255, 255, 255, 0.7);

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 15px 40px
        rgba(47, 86, 55, 0.05);
}


.benefit-item {
    min-height: 105px;

    padding: 25px 34px;

    display: flex;

    align-items: center;

    gap: 16px;

    position: relative;
}


.benefit-item:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;

    width: 1px;
    height: 45px;

    background: #dee7d7;
}


/* number */

.benefit-icon {
    width: 46px;
    height: 46px;

    min-width: 46px;

    display: flex;

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

    border-radius: 50%;

    background: #ecf3da;

    color: #688a1b;

    font-size: 12px;

    font-weight: 700;
}


/* text */

.benefit-text {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.benefit-text strong {
    color: #234431;

    font-size: 14px;
}

.benefit-text span {
    color: #8a948d;

    font-size: 11px;
}


/* =============================================
   TABLET
============================================= */

@media (max-width: 1050px) {

    .premium-spice-section {
        padding:
            80px
            5%
            55px;
    }

    .spice-wrapper {
        gap: 50px;
    }

    .spice-heading {
        font-size: 56px;
    }

    .features-area {
        grid-template-columns: 1fr;
    }

    .quality-card:first-child {
        grid-column: auto;
    }

    .quality-card {
        min-height: auto;
    }

}


/* =============================================
   MOBILE
============================================= */

@media (max-width: 768px) {

    .premium-spice-section {
        padding:
            60px
            20px
            45px;
    }


    /* Main sections stack */

    .spice-wrapper {
        display: flex;

        flex-direction: column;

        gap: 48px;

        align-items: stretch;
    }


    .spice-intro {
        max-width: 100%;
    }


    /* title */

    .section-label {
        margin-bottom: 20px;

        font-size: 10px;

        letter-spacing: 2px;
    }

    .spice-heading {
        font-size: 47px;

        line-height: 1;

        letter-spacing: -1.5px;

        margin-bottom: 23px;
    }

    .spice-description {
        max-width: 100%;

        font-size: 15px;

        line-height: 1.75;

        margin-bottom: 28px;
    }


    /* action */

    .spice-actions {
        align-items: flex-start;

        gap: 20px;
    }


    /* feature cards */

    .features-area {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 14px;
    }

    .quality-card {
        min-height: 200px;

        padding: 25px;

        border-radius: 20px;
    }


    /* benefits */

    .benefits-wrapper {
        grid-template-columns: 1fr;

        margin-top: 38px;

        border-radius: 20px;
    }

    .benefit-item {
        min-height: 82px;

        padding:
            18px
            23px;
    }

    .benefit-item:not(:last-child)::after {
        width: calc(100% - 46px);
        height: 1px;

        right: 23px;
        bottom: 0;
    }

}


/* =============================================
   SMALL MOBILE
============================================= */

@media (max-width: 480px) {

    .premium-spice-section {
        padding:
            45px
            16px
            35px;
    }


    .spice-heading {
        font-size: 40px;
    }


    .spice-description {
        font-size: 14px;
    }


    .spice-actions {
        flex-direction: column;

        align-items: stretch;
    }


    .primary-btn {
        width: 100%;

        justify-content: space-between;
    }


    .naturally-sourced {
        padding-left: 2px;
    }


    .quality-card {
        padding:
            23px
            20px;

        border-radius: 18px;
    }


    .card-content h2 {
        font-size: 21px;
    }


    .card-content p {
        font-size: 12px;
    }


    .benefit-item {
        padding:
            17px
            18px;
    }

}
.ag-socials a {
    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    color: #ffffff;

    text-decoration: none;
}

.ag-socials a svg {
    width: 18px;
    height: 18px;

    display: block;

    fill: currentColor;
}

.ag-youtube svg {
    width: 19px;
    height: 19px;
}
/* =============================================
   Garden Selection

============================================= */

/* =========================================================
   GARDEN SELECTION - NEW DESIGN
========================================================= */

.ag-garden-new,
.ag-garden-new * {
    box-sizing: border-box;
}


.ag-garden-new {
    width: 100%;
    position: relative;
    overflow: hidden;

    padding: 90px 7% 65px;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #ffffff 20%,
        #f4f5ee 55%,
        #f7f9f3 100%
    );
}


.ag-garden-new-container {
    width: 100%;
    max-width: 1320px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    gap: 90px;

    align-items: center;
}


/* =========================================================
   LEFT IMAGE
========================================================= */

.ag-garden-new-visual {
    position: relative;

    min-height: 590px;

    overflow: hidden;

    border-radius:
        6px
        90px
        6px
        6px;

    background: #e7eadf;
}


.ag-garden-new-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.8s ease;
}


.ag-garden-new-visual:hover
.ag-garden-new-image {
    transform: scale(1.04);
}


/* dark image gradient */

.ag-garden-new-visual::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(4, 48, 30, 0.52) 100%
        );

    pointer-events: none;
}


/* =========================================================
   FLOATING TAG
========================================================= */

.ag-garden-float-tag {
    position: absolute;

    z-index: 3;

    top: 28px;
    right: 28px;

    min-width: 205px;

    padding:
        15px
        18px;

    display: flex;

    align-items: center;

    gap: 13px;

    background:
        rgba(255, 255, 255, 0.93);

    backdrop-filter:
        blur(12px);

    border-radius: 4px;

    box-shadow:
        0 15px 35px
        rgba(15, 63, 39, 0.13);
}


.ag-garden-float-number {
    width: 39px;
    height: 39px;

    flex: 0 0 39px;

    display: flex;

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

    border-radius: 50%;

    background: #e9f0dc;

    color: #496d37;

    font-size: 12px;

    font-weight: 700;
}


.ag-garden-float-tag div {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.ag-garden-float-tag small {
    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size: 10px;

    line-height: 1.2;

    font-weight: 600;

    letter-spacing: 1.5px;

    color: #81907f;
}


.ag-garden-float-tag strong {
    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 17px;

    font-weight: 700;

    color: #12442e;
}


/* =========================================================
   IMAGE CAPTION
========================================================= */

.ag-garden-image-caption {
    position: absolute;

    z-index: 3;

    left: 35px;
    bottom: 35px;

    display: flex;

    align-items: stretch;

    gap: 15px;
}


.ag-garden-image-caption > span {
    width: 2px;

    background: #ffffff;
}


.ag-garden-image-caption p {
    margin: 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 25px;

    line-height: 1.12;

    font-weight: 600;

    color: #ffffff;
}


/* =========================================================
   RIGHT CONTENT
========================================================= */

.ag-garden-new-content {
    width: 100%;

    max-width: 570px;
}


/* small top label */

.ag-garden-kicker {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size: 13px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: 3px;

    color: #70806f;
}


.ag-garden-kicker-line {
    width: 38px;
    height: 1px;

    background: #718d56;
}


/* =========================================================
   MAIN HEADING
========================================================= */

.ag-garden-main-title {
    margin: 0 0 25px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    /*
       DESKTOP HEADING SIZE
    */
    font-size: 52px;

    line-height: 1.02;

    font-weight: 700;

    letter-spacing: -1.7px;

    color: #10412d;
}


.ag-garden-main-title span {
    display: block;

    margin-top: 3px;

    color: #608342;
}


/* =========================================================
   MAIN PARAGRAPH
========================================================= */

.ag-garden-main-text {
    max-width: 535px;

    margin:
        0
        0
        35px;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    /*
       NORMAL CONTENT SIZE
    */
    font-size: 16px;

    line-height: 1.75;

    font-weight: 400;

    color: #536159;
}


/* =========================================================
   PREMIUM QUALITY BOX
========================================================= */

.ag-garden-premium {
    position: relative;

    width: 100%;

    padding:
        27px
        65px
        27px
        27px;

    display: grid;

    grid-template-columns:
        48px
        1fr;

    gap: 20px;

    align-items: start;

    border:
        1px solid
        #d7dfd1;

    background: #ffffff;

    transition:
        border-color 0.3s ease,
        transform 0.3s ease;
}


.ag-garden-premium:hover {
    transform:
        translateY(-4px);

    border-color: #9aac89;
}


/* number */

.ag-garden-premium-number {
    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #eef3e8;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    color: #65804f;
}


/* small caption */

.ag-garden-premium-copy > span {
    display: block;

    margin-bottom: 6px;

    font-family:
        "DM Sans",
        sans-serif;

    font-size: 10px;

    line-height: 1.2;

    font-weight: 600;

    letter-spacing: 1.8px;

    color: #879583;
}


/* premium heading */

.ag-garden-premium-copy h3 {
    margin:
        0
        0
        8px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 28px;

    line-height: 1.1;

    font-weight: 700;

    color: #12412d;
}


/* premium content */

.ag-garden-premium-copy p {
    max-width: 390px;

    margin: 0;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    /*
       NORMAL CONTENT SIZE = 16PX
    */
    font-size: 16px;

    line-height: 1.65;

    font-weight: 400;

    color: #68736d;
}


/* arrow */

.ag-garden-premium-mark {
    position: absolute;

    top: 23px;
    right: 25px;

    font-size: 20px;

    color: #65804f;
}


/* =========================================================
   BOTTOM FEATURES
========================================================= */

.ag-garden-benefits {
    width: 100%;
    max-width: 1320px;

    margin:
        60px
        auto
        0;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid
        #d8ded4;

    border-bottom:
        1px solid
        #d8ded4;
}


.ag-garden-benefit {
    min-height: 145px;

    padding:
        30px
        40px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.ag-garden-benefit:first-child {
    padding-left: 0;
}


.ag-garden-benefit:last-child {
    padding-right: 0;
}


.ag-garden-benefit:not(:last-child) {
    border-right:
        1px solid
        #d8ded4;
}


/* feature number row */

.ag-garden-benefit-top {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 16px;
}


.ag-garden-benefit-top span {
    font-family:
        "DM Sans",
        sans-serif;

    font-size: 12px;

    font-weight: 600;

    color: #73856d;
}


.ag-garden-benefit-top i {
    display: block;

    width: 30px;
    height: 1px;

    background: #79935e;
}


/* feature heading */

.ag-garden-benefit h4 {
    margin: 0;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 26px;

    line-height: 1.2;

    font-weight: 700;

    color: #15402e;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .ag-garden-new {
        padding:
            75px
            5%
            55px;
    }


    .ag-garden-new-container {
        gap: 50px;
    }


    .ag-garden-new-visual {
        min-height: 520px;
    }


    .ag-garden-main-title {
        font-size: 44px;
    }


    .ag-garden-benefit {
        padding:
            28px
            25px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .ag-garden-new {
        padding:
            50px
            20px
            35px;
    }


    .ag-garden-new-container {
        grid-template-columns: 1fr;

        gap: 38px;
    }


    /*
       IMAGE FIRST
    */

    .ag-garden-new-visual {
        min-height: 410px;

        border-radius:
            4px
            45px
            4px
            4px;
    }


    .ag-garden-float-tag {
        top: 15px;
        right: 15px;

        min-width: auto;

        padding:
            11px
            13px;
    }


    .ag-garden-float-number {
        width: 34px;
        height: 34px;

        flex-basis: 34px;
    }


    .ag-garden-float-tag strong {
        font-size: 15px;
    }


    .ag-garden-image-caption {
        left: 20px;
        bottom: 20px;
    }


    .ag-garden-image-caption p {
        font-size: 21px;
    }


    /*
       LABEL
    */

    .ag-garden-kicker {
        margin-bottom: 14px;

        font-size: 11px;

        letter-spacing: 2.3px;
    }


    /*
       MAIN HEADING
    */

    .ag-garden-main-title {
        font-size: 36px;

        line-height: 1.04;

        letter-spacing: -1px;

        margin-bottom: 20px;
    }


    /*
       CONTENT REMAINS 16PX
    */

    .ag-garden-main-text,
    .ag-garden-premium-copy p {
        font-size: 16px;
    }


    /*
       PREMIUM
    */

    .ag-garden-premium {
        padding:
            22px
            50px
            22px
            20px;

        grid-template-columns:
            42px
            1fr;

        gap: 15px;
    }


    .ag-garden-premium-number {
        width: 40px;
        height: 40px;
    }


    .ag-garden-premium-copy h3 {
        font-size: 25px;
    }


    /*
       BOTTOM FEATURES
    */

    .ag-garden-benefits {
        grid-template-columns: 1fr;

        margin-top: 40px;
    }


    .ag-garden-benefit,
    .ag-garden-benefit:first-child,
    .ag-garden-benefit:last-child {
        min-height: auto;

        padding:
            25px
            0;
    }


    .ag-garden-benefit:not(:last-child) {
        border-right: 0;

        border-bottom:
            1px solid
            #d8ded4;
    }


    .ag-garden-benefit h4 {
        font-size: 24px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .ag-garden-new {
        padding:
            42px
            16px
            30px;
    }


    .ag-garden-new-visual {
        min-height: 340px;
    }


    .ag-garden-main-title {
        font-size: 32px;
    }


    .ag-garden-main-text,
    .ag-garden-premium-copy p {
        font-size: 16px;

        line-height: 1.7;
    }


    .ag-garden-premium {
        grid-template-columns: 1fr;

        padding:
            22px
            45px
            22px
            20px;
    }


    .ag-garden-premium-copy h3 {
        font-size: 23px;
    }


    .ag-garden-benefit h4 {
        font-size: 22px;
    }

}


/* =========================================================
   For the Cook Who Has Everything

========================================================= */
/* =========================================================
   AYURGREEN GIFT SECTION
   UNIQUE PREFIX: ayg-
========================================================= */

.ayg-gift-section,
.ayg-gift-section * {
    box-sizing: border-box;
}


.ayg-gift-section {
    width: 100%;
    position: relative;
    overflow: hidden;

    padding: 80px 6% 60px;

    background: #faf8f1;

    font-family: Arial, Helvetica, sans-serif;
}


.ayg-gift-container {
    width: 100%;
    max-width: 1320px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: 80px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.ayg-gift-content {
    width: 100%;
    max-width: 550px;
}


.ayg-gift-label {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

    font-size: 12px;
    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 2px;

    color: #7c896c;

    text-transform: uppercase;
}


.ayg-gift-label span {
    display: block;

    width: 35px;
    height: 1px;

    background: #72904d;
}


/* =========================================================
   MAIN HEADING
========================================================= */

.ayg-gift-heading {
    margin: 0 0 22px !important;

    font-family:
        "Playfair Display",
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 48px !important;

    line-height: 1.06 !important;

    font-weight: 700 !important;

    letter-spacing: -1.5px !important;

    color: #0b4932 !important;
}


.ayg-gift-heading span {
    display: block;

    color: #648146 !important;
}


/* =========================================================
   CONTENT
========================================================= */

.ayg-gift-text {
    max-width: 510px;

    margin: 0 0 28px !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 16px !important;

    line-height: 1.7 !important;

    font-weight: 400 !important;

    color: #59665d !important;
}


/* =========================================================
   BUTTON
========================================================= */

.ayg-gift-btn {
    min-height: 50px;

    display: inline-flex !important;

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

    gap: 24px;

    padding: 0 23px;

    background: #0b7744 !important;

    border: 0;

    border-radius: 30px;

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 14px;
    font-weight: 700;

    text-transform: uppercase;

    transition: 0.3s ease;
}


.ayg-gift-btn svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.ayg-gift-btn:hover {
    background: #075f36 !important;

    transform: translateY(-2px);
}


/* =========================================================
   IMAGE AREA
========================================================= */

.ayg-gift-image-area {
    position: relative;

    width: 100%;

    min-height: 520px;
}


.ayg-image-bg {
    position: absolute;

    top: 0;
    right: 0;

    width: 82%;
    height: 88%;

    background: #e7ecda;

    border-radius:
        70px
        5px
        70px
        5px;
}


.ayg-gift-image {
    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 2;

    width: 88%;
    height: 455px;

    display: block;

    object-fit: cover;

    border-radius:
        5px
        60px
        5px
        5px;

    box-shadow:
        0 20px 45px
        rgba(23, 60, 37, 0.14);
}


/* IMAGE TAG */

.ayg-image-tag {
    position: absolute;

    z-index: 4;

    right: 0;
    top: 55px;

    min-width: 150px;

    padding: 20px;

    background: #075d3a;

    color: #ffffff;
}


.ayg-image-tag small {
    display: block;

    margin-bottom: 7px;

    font-size: 10px;

    letter-spacing: 2px;

    color: #cad9a5;
}


.ayg-image-tag strong {
    display: block;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 21px;

    line-height: 1.2;

    font-weight: 700;
}


/* =========================================================
   FEATURES
========================================================= */

.ayg-gift-features {
    width: 100%;
    max-width: 1320px;

    margin: 60px auto 0;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    border-top: 1px solid #d8ded2;

    border-bottom: 1px solid #d8ded2;
}


.ayg-gift-feature {
    min-width: 0;

    min-height: 160px;

    display: grid;

    grid-template-columns:
        55px
        minmax(0, 1fr);

    align-items: center;

    gap: 18px;

    position: relative;

    padding: 28px 35px;
}


.ayg-gift-feature:first-child {
    padding-left: 0;
}


.ayg-gift-feature:last-child {
    padding-right: 0;
}


.ayg-gift-feature:not(:last-child) {
    border-right: 1px solid #d8ded2;
}


/* ICON */

.ayg-feature-icon {
    width: 50px;
    height: 50px;

    display: flex;

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

    border-radius: 50%;

    background: #edf2e5;
}


.ayg-feature-icon svg {
    width: 25px;
    height: 25px;

    fill: none;

    stroke: #477258;

    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* NUMBER */

.ayg-feature-number {
    display: block;

    margin-bottom: 5px;

    font-size: 11px;

    font-weight: 700;

    color: #87977b;
}


/* HEADING */

.ayg-gift-feature h3 {
    margin: 0 0 7px !important;

    font-family:
        "Playfair Display",
        Georgia,
        serif !important;

    font-size: 22px !important;

    line-height: 1.2 !important;

    font-weight: 700 !important;

    color: #16452f !important;
}


/* CONTENT 16PX */

.ayg-gift-feature p {
    margin: 0 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 16px !important;

    line-height: 1.55 !important;

    color: #68746b !important;
}


/* =========================================================
   TABLET
========================================================= */

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

    .ayg-gift-section {
        padding: 65px 5%;
    }


    .ayg-gift-container {
        gap: 45px;
    }


    .ayg-gift-heading {
        font-size: 40px !important;
    }


    .ayg-gift-image-area {
        min-height: 450px;
    }


    .ayg-gift-image {
        height: 400px;
    }


    .ayg-gift-feature {
        padding: 25px 20px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

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

    .ayg-gift-section {
        padding:
            48px
            20px
            35px;
    }


    .ayg-gift-container {
        display: flex;

        flex-direction: column;

        gap: 38px;
    }


    .ayg-gift-content {
        max-width: 100%;
    }


    .ayg-gift-heading {
        font-size: 34px !important;

        line-height: 1.08 !important;

        letter-spacing: -0.7px !important;
    }


    /*
       CONTENT ALWAYS 16PX
    */

    .ayg-gift-text,
    .ayg-gift-feature p {
        font-size: 16px !important;
    }


    /* IMAGE */

    .ayg-gift-image-area {
        width: 100%;

        min-height: 400px;
    }


    .ayg-gift-image {
        width: 90%;

        height: 350px;
    }


    .ayg-image-bg {
        width: 88%;
    }


    .ayg-image-tag {
        top: 35px;

        min-width: 125px;

        padding: 15px;
    }


    .ayg-image-tag strong {
        font-size: 18px;
    }


    /* FEATURES */

    .ayg-gift-features {
        grid-template-columns: 1fr;

        margin-top: 40px;
    }


    .ayg-gift-feature,
    .ayg-gift-feature:first-child,
    .ayg-gift-feature:last-child {
        min-height: auto;

        padding:
            25px
            0;
    }


    .ayg-gift-feature:not(:last-child) {
        border-right: 0;

        border-bottom: 1px solid #d8ded2;
    }


    .ayg-gift-feature h3 {
        font-size: 21px !important;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

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

    .ayg-gift-section {
        padding:
            40px
            16px
            30px;
    }


    .ayg-gift-heading {
        font-size: 30px !important;
    }


    .ayg-gift-text {
        font-size: 16px !important;
    }


    .ayg-gift-btn {
        width: 100%;

        justify-content: space-between;
    }


    .ayg-gift-image-area {
        min-height: 330px;
    }


    .ayg-gift-image {
        width: 92%;

        height: 295px;
    }


    .ayg-image-tag {
        min-width: 110px;
    }


    .ayg-gift-feature p {
        font-size: 16px !important;
    }

}
/* The Full Range */

 /* ==========================================================
   EVERY SPICE, ONE SOURCE
========================================================== */

.ayg-range-section,
.ayg-range-section * {
    box-sizing: border-box;
}


/* ==========================================================
   SECTION
========================================================== */

.ayg-range-section {
    width: 100%;

    position: relative;

    overflow: hidden;

    padding:
        90px
        6%
        75px;

    background:
        radial-gradient(
            circle at 92% 7%,
            rgba(113, 150, 82, 0.13),
            transparent 28%
        ),
        #faf9f4;
}


.ayg-range-container {
    width: 100%;

    max-width: 1320px;

    margin: 0 auto;
}



/* ==========================================================
   HEADER
========================================================== */

.ayg-range-header {
    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 80px;

    align-items: end;

    margin-bottom: 55px;
}



/* ==========================================================
   SMALL TOP LABEL
========================================================== */

.ayg-range-kicker {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 17px;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size: 12px;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: 2.6px;

    text-transform: uppercase;

    color: #75846d;
}


.ayg-range-kicker span {
    display: block;

    width: 38px;

    height: 1px;

    background: #718d54;
}



/* ==========================================================
   MAIN HEADING
========================================================== */

.ayg-range-title {
    max-width: 570px;

    margin: 0 !important;

    font-family:
        "Playfair Display",
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 48px !important;

    line-height: 1.04 !important;

    font-weight: 700 !important;

    letter-spacing: -1.4px !important;

    color: #0b422d !important;
}


.ayg-range-title span {
    display: block;

    color: #638248 !important;
}



/* ==========================================================
   HEADER DESCRIPTION
========================================================== */

.ayg-range-intro-side {
    max-width: 650px;
}


.ayg-range-intro-side p {
    margin:
        0
        0
        23px !important;

    font-family:
        "DM Sans",
        Arial,
        sans-serif !important;

    font-size: 16px !important;

    line-height: 1.75 !important;

    font-weight: 400 !important;

    color: #59655d !important;
}



/* ==========================================================
   COLLECTION BUTTON
========================================================== */

.ayg-range-main-btn {
    min-height: 46px;

    width: fit-content;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    padding:
        0
        21px;

    border:
        1px solid
        #1f6847;

    border-radius: 50px;

    background: transparent;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size: 14px;

    line-height: 1;

    font-weight: 600;

    color: #175b3c;

    text-decoration: none;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.ayg-range-main-btn span {
    font-size: 18px;
}


.ayg-range-main-btn:hover {
    background: #086a3d;

    color: #ffffff;

    transform: translateY(-2px);
}



/* ==========================================================
   PRODUCT GRID
========================================================== */

.ayg-range-grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: 18px;

    align-items: stretch;
}



/* ==========================================================
   PRODUCT CARD
========================================================== */

.ayg-range-card {
    position: relative;

    min-width: 0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background: #ffffff;

    border:
        1px solid
        #dde4d9;

    border-radius: 8px;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


.ayg-range-card:hover {
    transform: translateY(-7px);

    border-color: #a5b896;

    box-shadow:
        0 18px 45px
        rgba(30, 76, 43, 0.11);
}



/* ==========================================================
   FEATURED PRODUCT
========================================================== */

.ayg-range-card-featured {
    border-color: #8ba86d;

    background:
        linear-gradient(
            180deg,
            #f5f8ee 0%,
            #ffffff 55%
        );
}



/* ==========================================================
   PRODUCT IMAGE
========================================================== */

.ayg-range-image-box {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #ebeee8;
}


.ayg-range-image-box img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.55s ease;
}


.ayg-range-card:hover
.ayg-range-image-box img {
    transform: scale(1.05);
}



/* ==========================================================
   BADGE
========================================================== */

.ayg-range-badge {
    position: absolute;

    top: 12px;
    right: 12px;

    z-index: 2;

    padding:
        6px
        10px;

    border-radius: 3px;

    background: #0c5637;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.5px;

    color: #ffffff;

    text-transform: uppercase;
}



/* ==========================================================
   CARD CONTENT
========================================================== */

.ayg-range-card-content {
    flex: 1;

    position: relative;

    display: flex;

    flex-direction: column;

    padding:
        22px
        18px
        20px;
}



/* NUMBER */

.ayg-range-number {
    position: absolute;

    top: 18px;
    right: 18px;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size: 15px;

    font-weight: 600;

    color: #a0aa9c;
}



/* SMALL CATEGORY */

.ayg-range-eyebrow {
    display: block;

    margin-bottom: 7px;

    padding-right: 38px;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size: 11px;

    line-height: 1.3;

    font-weight: 700;

    letter-spacing: 0.6px;

    color: #718e42;

    text-transform: uppercase;
}



/* ==========================================================
   PRODUCT HEADING
========================================================== */

.ayg-range-card h3 {
    margin:
        0
        0
        10px !important;

    padding-right: 8px;

    font-family:
        "Playfair Display",
        Georgia,
        "Times New Roman",
        serif !important;

    font-size: 23px !important;

    line-height: 1.12 !important;

    font-weight: 700 !important;

    letter-spacing: -0.3px;

    color: #143f2c !important;
}



/* ==========================================================
   PRODUCT TEXT
========================================================== */

.ayg-range-card p {
    flex: 1;

    margin:
        0
        0
        20px !important;

    font-family:
        "DM Sans",
        Arial,
        sans-serif !important;

    /*
       ALL NORMAL CONTENT = 16PX
    */
    font-size: 16px !important;

    line-height: 1.6 !important;

    font-weight: 400 !important;

    color: #657069 !important;
}



/* ==========================================================
   ACTION
========================================================== */

.ayg-range-actions {
    margin-top: auto;

    display: flex;

    align-items: center;
}



/* ==========================================================
   SHOP BUTTON
========================================================== */

.ayg-shop-btn {
    min-height: 39px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding:
        0
        15px;

    border-radius: 4px;

    background: #123d2c;

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    font-size: 12px;

    line-height: 1;

    font-weight: 700;

    color: #ffffff;

    text-decoration: none;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.ayg-shop-btn span {
    font-size: 15px;

    transition:
        transform 0.3s ease;
}


.ayg-shop-btn:hover {
    background: #082e21;

    transform: translateY(-1px);
}


.ayg-shop-btn:hover span {
    transform: translateX(3px);
}



/* ==========================================================
   LARGE TABLET
========================================================== */

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

    .ayg-range-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}



/* ==========================================================
   TABLET
========================================================== */

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

    .ayg-range-section {
        padding:
            70px
            5%
            55px;
    }


    .ayg-range-header {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 42px;
    }


    .ayg-range-title {
        font-size: 40px !important;
    }


    .ayg-range-intro-side {
        max-width: 700px;
    }


    .ayg-range-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}



/* ==========================================================
   MOBILE
========================================================== */

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

    .ayg-range-section {
        padding:
            50px
            16px
            40px;
    }


    /* SMALL LABEL */

    .ayg-range-kicker {
        margin-bottom: 13px;

        font-size: 10px;

        letter-spacing: 2px;
    }


    .ayg-range-kicker span {
        width: 28px;
    }


    /* HEADING */

    .ayg-range-title {
        font-size: 32px !important;

        line-height: 1.08 !important;

        letter-spacing: -0.7px !important;
    }


    /* CONTENT = 16PX */

    .ayg-range-intro-side p,
    .ayg-range-card p {
        font-size: 16px !important;
    }


    /* TOP BUTTON */

    .ayg-range-main-btn {
        width: 100%;

        justify-content: space-between;
    }


    /* ONE CARD PER ROW */

    .ayg-range-grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }


    /* WIDER MOBILE IMAGE */

    .ayg-range-image-box {
        aspect-ratio: 16 / 9;
    }


    .ayg-range-card-content {
        padding:
            20px
            18px;
    }


    .ayg-range-card h3 {
        font-size: 22px !important;
    }


    .ayg-shop-btn {
        min-height: 40px;

        padding:
            0
            16px;
    }

}



/* ==========================================================
   VERY SMALL MOBILE
========================================================== */

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

    .ayg-range-section {
        padding:
            42px
            14px
            35px;
    }


    .ayg-range-title {
        font-size: 29px !important;
    }


    .ayg-range-card h3 {
        font-size: 21px !important;
    }


    .ayg-range-card p {
        font-size: 16px !important;

        line-height: 1.6 !important;
    }

}
/* ==========================================================
   out of stock button
========================================================== */

.best-cart-btn-out-of-stock,
.whatsapp-btn-out-of-stock {
    background: #d32f2f !important;
    color: #ffffff !important;
    border: none !important;
    cursor: not-allowed !important;
    pointer-events: none;
    opacity: 0.9;
    transform: none !important;
    box-shadow: none !important;
}

.best-cart-btn-out-of-stock:hover,
.whatsapp-btn-out-of-stock:hover {
    background: #d32f2f !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
}


/* ==========================================================
   PRIVACY POLICY
========================================================== */

.ag-privacy-page,
.ag-privacy-page * {
    box-sizing: border-box;
}


.ag-privacy-page {
    width: 100%;
    background: #fbfaf5;

    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif;
}


.ag-privacy-container {
    width: min(
        calc(100% - 80px),
        1280px
    );

    margin: 0 auto;
}


/* ==========================================================
   HERO
========================================================== */

.ag-privacy-hero {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        90px
        0
        85px;

    background:
        linear-gradient(
            135deg,
            #073d2a 0%,
            #0c5b3b 55%,
            #50783c 100%
        );
}


.ag-privacy-hero-pattern {
    position: absolute;

    width: 420px;
    height: 420px;

    right: -100px;
    top: -160px;

    border:
        1px solid
        rgba(255, 255, 255, 0.10);

    border-radius: 50%;
}


.ag-privacy-hero-pattern::before,
.ag-privacy-hero-pattern::after {
    content: "";

    position: absolute;

    border:
        1px solid
        rgba(255, 255, 255, 0.08);

    border-radius: 50%;
}


.ag-privacy-hero-pattern::before {
    inset: 55px;
}


.ag-privacy-hero-pattern::after {
    inset: 115px;
}


.ag-privacy-hero-content {
    position: relative;

    z-index: 2;

    max-width: 800px;

    margin: 0 auto;

    text-align: center;
}


/* KICKER */

.ag-privacy-kicker {
    display: flex;

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

    gap: 13px;

    margin-bottom: 18px;

    font-size: 11px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 2.6px;

    color: #d9e942;

    text-transform: uppercase;
}


.ag-privacy-kicker span {
    width: 34px;
    height: 1px;

    display: block;

    background: #d9e942;
}


/* HERO HEADING */

.ag-privacy-hero h1 {
    margin:
        0
        0
        20px;

    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        clamp(
            40px,
            5vw,
            64px
        ) !important;

    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -2px;

    color: #ffffff;
}


.ag-privacy-hero p {
    max-width: 680px;

    margin:
        0
        auto;

    font-size: 16px;

    line-height: 1.75;

    color:
        rgba(
            255,
            255,
            255,
            0.86
        );
}


.ag-privacy-updated {
    width: fit-content;

    margin:
        26px
        auto
        0;

    padding:
        9px
        15px;

    border:
        1px solid
        rgba(255, 255, 255, 0.20);

    border-radius: 50px;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    font-size: 11px;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );
}


.ag-privacy-updated strong {
    color: #ffffff;

    font-weight: 600;
}


/* ==========================================================
   BODY
========================================================== */

.ag-privacy-body {
    padding:
        75px
        0
        90px;
}


/* ==========================================================
   LAYOUT
========================================================== */

.ag-privacy-layout {
    display: grid;

    grid-template-columns:
        250px
        minmax(0, 1fr);

    gap: 70px;

    align-items: start;
}


/* ==========================================================
   SIDEBAR
========================================================== */

.ag-privacy-sidebar {
    position: relative;
}


.ag-privacy-sidebar-card {
    position: sticky;

    top: 110px;

    padding:
        25px
        22px;

    border:
        1px solid
        #dfe5da;

    border-radius: 8px;

    background: #ffffff;
}


.ag-privacy-sidebar-label {
    display: block;

    margin-bottom: 17px;

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 1.8px;

    color: #85917d;
}


.ag-privacy-nav {
    display: flex;

    flex-direction: column;
}


.ag-privacy-nav a {
    position: relative;

    padding:
        10px
        0
        10px
        15px;

    border-left:
        1px solid
        #dfe5da;

    font-size: 12px;

    line-height: 1.35;

    font-weight: 500;

    color: #657169;

    text-decoration: none;

    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        padding-left 0.25s ease;
}


.ag-privacy-nav a:hover {
    padding-left: 19px;

    border-left-color: #2c744d;

    color: #155438;
}


/* ==========================================================
   MAIN CONTENT
========================================================== */

.ag-privacy-content {
    min-width: 0;

    padding:
        0
        45px;

    border:
        1px solid
        #e0e5dc;

    border-radius: 8px;

    background: #ffffff;
}


/* ==========================================================
   POLICY SECTION
========================================================== */

.ag-privacy-section {
    scroll-margin-top: 120px;

    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr);

    gap: 25px;

    padding:
        48px
        0;

    border-bottom:
        1px solid
        #e7eae4;
}


.ag-privacy-section:last-child {
    border-bottom: 0;
}


/* NUMBER */

.ag-privacy-number {
    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 50%;

    background: #edf3e7;

    font-size: 11px;

    font-weight: 700;

    color: #5c794e;
}


/* CONTENT */

.ag-privacy-copy h2 {
    margin:
        2px
        0
        16px;

    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 27px !important;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -0.7px;

    color: #123f2d;
}


.ag-privacy-copy > p {
    margin:
        0
        0
        15px;

    max-width: 780px;

    font-size: 16px;

    line-height: 1.75;

    font-weight: 400;

    color: #626f67;
}


.ag-privacy-copy > p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   LIST
========================================================== */

.ag-privacy-list {
    margin:
        20px
        0
        0;

    padding: 0;

    list-style: none;
}


.ag-privacy-list li {
    position: relative;

    margin-bottom: 13px;

    padding-left: 27px;

    font-size: 16px;

    line-height: 1.65;

    color: #5d6962;
}


.ag-privacy-list li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 1px;

    width: 18px;
    height: 18px;

    display: flex;

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

    border-radius: 50%;

    background: #e8f1df;

    font-size: 9px;

    font-weight: 700;

    color: #3f7248;
}


/* ==========================================================
   INFORMATION CARDS
========================================================== */

.ag-privacy-info-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 14px;

    margin-top: 25px;
}


.ag-privacy-info-card {
    padding:
        22px
        18px;

    border:
        1px solid
        #e0e6dc;

    border-radius: 6px;

    background: #fbfcf8;
}


.ag-privacy-info-icon {
    width: 38px;
    height: 38px;

    margin-bottom: 16px;

    display: flex;

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

    border-radius: 50%;

    background: #e8f0df;
}


.ag-privacy-info-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: #417052;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.ag-privacy-info-card h3 {
    margin:
        0
        0
        8px;

    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 15px !important;

    line-height: 1.3;

    font-weight: 700;

    color: #234a36;
}


.ag-privacy-info-card p {
    margin: 0;

    font-size: 13px;

    line-height: 1.6;

    color: #6e7972;
}


/* ==========================================================
   WHATSAPP HIGHLIGHT
========================================================== */

.ag-privacy-highlight {
    margin-top: 22px;

    padding:
        18px
        20px;

    display: flex;

    align-items: center;

    gap: 15px;

    border-left:
        3px solid
        #2e8557;

    background: #f1f7ec;
}


.ag-privacy-highlight-icon {
    width: 39px;
    height: 39px;

    flex:
        0
        0
        39px;

    display: flex;

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

    border-radius: 50%;

    background: #dcead2;
}


.ag-privacy-highlight-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: #247047;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.ag-privacy-highlight p {
    margin: 0;

    font-size: 14px;

    line-height: 1.65;

    color: #506259;
}


/* ==========================================================
   CONTACT
========================================================== */

.ag-privacy-contact {
    margin:
        0
        -45px;

    padding:
        48px
        45px;

    background:
        linear-gradient(
            135deg,
            #f2f6eb,
            #ffffff
        );
}


.ag-privacy-contact-label {
    display: block;

    margin-bottom: 8px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #718d58;
}


.ag-privacy-contact-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-top: 24px;
}


.ag-privacy-contact-item {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 13px;

    padding:
        16px;

    border:
        1px solid
        #dce4d7;

    border-radius: 6px;

    background: #ffffff;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease;
}


.ag-privacy-contact-item:hover {
    transform:
        translateY(-2px);

    border-color: #8ba47b;
}


.ag-privacy-contact-icon {
    width: 38px;
    height: 38px;

    flex:
        0
        0
        38px;

    display: flex;

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

    border-radius: 50%;

    background: #e9f1e2;
}


.ag-privacy-contact-icon svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: #3c714f;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.ag-privacy-contact-item > span:last-child {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.ag-privacy-contact-item small {
    font-size: 10px;

    color: #879187;
}


.ag-privacy-contact-item strong {
    overflow-wrap: anywhere;

    font-size: 12px;

    font-weight: 600;

    color: #244b37;
}


.ag-privacy-address {
    margin-top: 22px;

    padding-top: 20px;

    border-top:
        1px solid
        #dce3d7;
}


.ag-privacy-address strong {
    display: block;

    margin-bottom: 7px;

    font-size: 14px;

    color: #214a35;
}


.ag-privacy-address p {
    margin: 0;

    font-size: 14px;

    line-height: 1.7;

    color: #647168;
}


/* ==========================================================
   TABLET
========================================================== */

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

    .ag-privacy-container {
        width:
            calc(
                100% - 50px
            );
    }


    .ag-privacy-layout {
        grid-template-columns: 210px 1fr;

        gap: 35px;
    }


    .ag-privacy-content {
        padding:
            0
            30px;
    }


    .ag-privacy-contact {
        margin:
            0
            -30px;

        padding:
            42px
            30px;
    }


    .ag-privacy-info-grid {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

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

    .ag-privacy-container {
        width:
            calc(
                100% - 32px
            );
    }


    /* HERO */

    .ag-privacy-hero {
        padding:
            65px
            0;
    }


    .ag-privacy-hero h1 {
        font-size:
            38px !important;

        letter-spacing:
            -1px;
    }


    .ag-privacy-hero p {
        max-width: 520px;

        font-size: 15px;
    }


    /* BODY */

    .ag-privacy-body {
        padding:
            45px
            0
            60px;
    }


    /* SIDEBAR */

    .ag-privacy-layout {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .ag-privacy-sidebar-card {
        position: static;

        padding:
            18px;
    }


    .ag-privacy-nav {
        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 0 15px;
    }


    /* CONTENT */

    .ag-privacy-content {
        padding:
            0
            22px;
    }


    .ag-privacy-section {
        grid-template-columns: 38px 1fr;

        gap: 17px;

        padding:
            36px
            0;
    }


    .ag-privacy-number {
        width: 36px;
        height: 36px;

        font-size: 10px;
    }


    .ag-privacy-copy h2 {
        font-size:
            23px !important;
    }


    .ag-privacy-copy > p,
    .ag-privacy-list li {
        font-size: 15px;
    }


    .ag-privacy-contact {
        margin:
            0
            -22px;

        padding:
            38px
            22px;
    }


    .ag-privacy-contact-grid {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

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

    .ag-privacy-container {
        width:
            calc(
                100% - 28px
            );
    }


    .ag-privacy-hero {
        padding:
            55px
            0;
    }


    .ag-privacy-kicker {
        gap: 8px;

        font-size: 8px;

        letter-spacing: 1.7px;
    }


    .ag-privacy-kicker span {
        width: 22px;
    }


    .ag-privacy-hero h1 {
        font-size:
            32px !important;
    }


    .ag-privacy-hero p {
        font-size: 14px;

        line-height: 1.65;
    }


    .ag-privacy-updated {
        font-size: 9px;
    }


    /* NAVIGATION */

    .ag-privacy-nav {
        grid-template-columns: 1fr;
    }


    .ag-privacy-nav a {
        font-size: 11px;
    }


    /* WHITE CONTENT */

    .ag-privacy-content {
        padding:
            0
            16px;
    }


    .ag-privacy-section {
        display: block;

        padding:
            31px
            0;
    }


    .ag-privacy-number {
        margin-bottom: 15px;
    }


    .ag-privacy-copy h2 {
        margin-top: 0;

        font-size:
            21px !important;
    }


    .ag-privacy-copy > p,
    .ag-privacy-list li {
        font-size: 14px;
    }


    .ag-privacy-info-card p {
        font-size: 13px;
    }


    .ag-privacy-highlight {
        align-items: flex-start;

        padding:
            16px;
    }


    .ag-privacy-contact {
        margin:
            0
            -16px;

        padding:
            32px
            16px;
    }

}



/* ==========================================================
   TERMS & CONDITIONS PAGE
========================================================== */

.ag-terms-page,
.ag-terms-page * {
    box-sizing: border-box;
}


.ag-terms-page {
    width: 100%;

    background: #fbfaf5;

    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif;
}


.ag-terms-container {
    width:
        min(
            calc(100% - 80px),
            1280px
        );

    margin: 0 auto;
}


/* ==========================================================
   BODY
========================================================== */

.ag-terms-body {
    padding:
        75px
        0
        90px;
}


/* ==========================================================
   LAYOUT
========================================================== */

.ag-terms-layout {
    display: grid;

    grid-template-columns:
        250px
        minmax(0, 1fr);

    gap: 70px;

    align-items: start;
}


/* ==========================================================
   SIDEBAR
========================================================== */

.ag-terms-sidebar {
    position: relative;
}


.ag-terms-sidebar-card {
    position: sticky;

    top: 110px;

    padding:
        25px
        22px;

    border:
        1px solid
        #dfe5da;

    border-radius: 8px;

    background: #ffffff;
}


.ag-terms-sidebar-label {
    display: block;

    margin-bottom: 17px;

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 1.8px;

    color: #85917d;
}


.ag-terms-nav {
    display: flex;

    flex-direction: column;
}


.ag-terms-nav a {
    position: relative;

    padding:
        9px
        0
        9px
        15px;

    border-left:
        1px solid
        #dfe5da;

    font-size: 12px;

    line-height: 1.35;

    font-weight: 500;

    color: #657169;

    text-decoration: none;

    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        padding-left 0.25s ease;
}


.ag-terms-nav a:hover {
    padding-left: 19px;

    color: #155438;

    border-left-color: #2c744d;
}


/* ==========================================================
   CONTENT BOX
========================================================== */

.ag-terms-content {
    min-width: 0;

    padding:
        0
        45px;

    border:
        1px solid
        #e0e5dc;

    border-radius: 8px;

    background: #ffffff;
}


/* ==========================================================
   SECTION
========================================================== */

.ag-terms-section {
    scroll-margin-top: 120px;

    display: grid;

    grid-template-columns:
        48px
        minmax(0, 1fr);

    gap: 25px;

    padding:
        48px
        0;

    border-bottom:
        1px solid
        #e7eae4;
}


.ag-terms-section:last-child {
    border-bottom: 0;
}


/* ==========================================================
   NUMBER
========================================================== */

.ag-terms-number {
    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 50%;

    background: #edf3e7;

    font-size: 11px;

    line-height: 1;

    font-weight: 700;

    color: #5c794e;
}


/* ==========================================================
   HEADING
========================================================== */

.ag-terms-copy h2 {
    margin:
        2px
        0
        16px;

    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 27px !important;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -0.7px;

    color: #123f2d;
}


/* ==========================================================
   CONTENT
========================================================== */

.ag-terms-copy > p {
    max-width: 780px;

    margin:
        0
        0
        15px;

    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;

    line-height: 1.75;

    font-weight: 400;

    color: #626f67;
}


.ag-terms-copy > p:last-child {
    margin-bottom: 0;
}


.ag-terms-copy strong {
    font-weight: 700;

    color: #3d5045;
}


/* ==========================================================
   LIST
========================================================== */

.ag-terms-list {
    margin:
        20px
        0
        0;

    padding: 0;

    list-style: none;
}


.ag-terms-list li {
    position: relative;

    margin-bottom: 13px;

    padding-left: 27px;

    font-size: 16px;

    line-height: 1.65;

    color: #5d6962;
}


.ag-terms-list li::before {
    content: "✓";

    position: absolute;

    left: 0;

    top: 2px;

    width: 18px;
    height: 18px;

    display: flex;

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

    border-radius: 50%;

    background: #e8f1df;

    font-size: 9px;

    font-weight: 700;

    color: #3f7248;
}


/* ==========================================================
   INFORMATION NOTE
========================================================== */

.ag-terms-note {
    margin-top: 22px;

    padding:
        18px
        20px;

    display: flex;

    align-items: flex-start;

    gap: 14px;

    border-left:
        3px solid
        #6f914e;

    background: #f4f7ef;
}


.ag-terms-note-icon {
    width: 32px;
    height: 32px;

    flex:
        0
        0
        32px;

    display: flex;

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

    border-radius: 50%;

    background: #dfead5;

    font-size: 13px;

    font-weight: 700;

    color: #437047;
}


.ag-terms-note p {
    margin: 3px 0 0;

    font-size: 14px;

    line-height: 1.65;

    color: #506259;
}


/* ==========================================================
   WHATSAPP INFORMATION
========================================================== */

.ag-terms-whatsapp {
    margin-top: 22px;

    padding:
        18px
        20px;

    display: flex;

    align-items: center;

    gap: 15px;

    border-left:
        3px solid
        #2e8557;

    background: #f1f7ec;
}


.ag-terms-whatsapp-icon {
    width: 40px;
    height: 40px;

    flex:
        0
        0
        40px;

    display: flex;

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

    border-radius: 50%;

    background: #dcead2;
}


.ag-terms-whatsapp-icon svg {
    width: 20px;
    height: 20px;

    fill: none;

    stroke: #247047;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.ag-terms-whatsapp p {
    margin: 0;

    font-size: 14px;

    line-height: 1.65;

    color: #506259;
}


/* ==========================================================
   PRIVACY LINK
========================================================== */

.ag-terms-policy-link {
    width: fit-content;

    min-height: 42px;

    margin-top: 20px;

    padding:
        0
        17px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 18px;

    border:
        1px solid
        #347353;

    border-radius: 50px;

    font-size: 12px;

    font-weight: 700;

    color: #235c3d;

    text-decoration: none;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.ag-terms-policy-link span {
    font-size: 16px;

    transition:
        transform 0.3s ease;
}


.ag-terms-policy-link:hover {
    background: #17603d;

    color: #ffffff;

    transform:
        translateY(-2px);
}


.ag-terms-policy-link:hover span {
    transform:
        translateX(3px);
}


/* ==========================================================
   CONTACT SECTION
========================================================== */

.ag-terms-contact {
    margin:
        0
        -45px;

    padding:
        48px
        45px;

    background:
        linear-gradient(
            135deg,
            #f2f6eb,
            #ffffff
        );
}


.ag-terms-contact-label {
    display: block;

    margin-bottom: 8px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;

    color: #718d58;
}


.ag-terms-contact-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-top: 24px;
}


/* ==========================================================
   CONTACT ITEM
========================================================== */

.ag-terms-contact-item {
    min-width: 0;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 16px;

    border:
        1px solid
        #dce4d7;

    border-radius: 6px;

    background: #ffffff;

    text-decoration: none;

    transition:
        transform 0.25s ease,
        border-color 0.25s ease;
}


.ag-terms-contact-item:hover {
    transform:
        translateY(-2px);

    border-color: #8ba47b;
}


.ag-terms-contact-icon {
    width: 38px;
    height: 38px;

    flex:
        0
        0
        38px;

    display: flex;

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

    border-radius: 50%;

    background: #e9f1e2;
}


.ag-terms-contact-icon svg {
    width: 18px;
    height: 18px;

    fill: none;

    stroke: #3c714f;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.ag-terms-contact-item > span:last-child {
    min-width: 0;

    display: flex;

    flex-direction: column;

    gap: 3px;
}


.ag-terms-contact-item small {
    font-size: 10px;

    color: #879187;
}


.ag-terms-contact-item strong {
    overflow-wrap: anywhere;

    font-size: 12px;

    font-weight: 600;

    color: #244b37;
}


/* ==========================================================
   ADDRESS
========================================================== */

.ag-terms-address {
    margin-top: 22px;

    padding-top: 20px;

    border-top:
        1px solid
        #dce3d7;
}


.ag-terms-address strong {
    display: block;

    margin-bottom: 7px;

    font-size: 14px;

    color: #214a35;
}


.ag-terms-address p {
    margin: 0;

    font-size: 14px;

    line-height: 1.7;

    color: #647168;
}


/* ==========================================================
   TABLET
========================================================== */

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

    .ag-terms-container {
        width:
            calc(
                100% - 50px
            );
    }


    .ag-terms-layout {
        grid-template-columns:
            210px
            minmax(0, 1fr);

        gap: 35px;
    }


    .ag-terms-content {
        padding:
            0
            30px;
    }


    .ag-terms-contact {
        margin:
            0
            -30px;

        padding:
            42px
            30px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

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

    .ag-terms-container {
        width:
            calc(
                100% - 32px
            );
    }


    .ag-terms-body {
        padding:
            45px
            0
            60px;
    }


    /* SIDEBAR ABOVE CONTENT */

    .ag-terms-layout {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .ag-terms-sidebar-card {
        position: static;

        padding: 18px;
    }


    .ag-terms-nav {
        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap:
            0
            15px;
    }


    /* CONTENT */

    .ag-terms-content {
        padding:
            0
            22px;
    }


    .ag-terms-section {
        grid-template-columns:
            38px
            minmax(0, 1fr);

        gap: 17px;

        padding:
            36px
            0;
    }


    .ag-terms-number {
        width: 36px;
        height: 36px;

        font-size: 10px;
    }


    .ag-terms-copy h2 {
        font-size:
            23px !important;
    }


    .ag-terms-copy > p,
    .ag-terms-list li {
        font-size: 15px;
    }


    .ag-terms-contact {
        margin:
            0
            -22px;

        padding:
            38px
            22px;
    }


    .ag-terms-contact-grid {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

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

    .ag-terms-container {
        width:
            calc(
                100% - 28px
            );
    }


    /* SIDEBAR */

    .ag-terms-nav {
        grid-template-columns: 1fr;
    }


    .ag-terms-nav a {
        font-size: 11px;
    }


    /* CONTENT */

    .ag-terms-content {
        padding:
            0
            16px;
    }


    .ag-terms-section {
        display: block;

        padding:
            31px
            0;
    }


    .ag-terms-number {
        margin-bottom: 15px;
    }


    .ag-terms-copy h2 {
        margin-top: 0;

        font-size:
            21px !important;
    }


    .ag-terms-copy > p,
    .ag-terms-list li {
        font-size: 14px;
    }


    .ag-terms-note,
    .ag-terms-whatsapp {
        align-items: flex-start;

        padding: 16px;
    }


    .ag-terms-contact {
        margin:
            0
            -16px;

        padding:
            32px
            16px;
    }


    .ag-terms-policy-link {
        width: 100%;

        justify-content: space-between;
    }

}


/* ==========================================================
   FLOATING SOCIAL + CONTACT BUTTONS
========================================================== */

.ayg-floating-social,
.ayg-floating-contact,
.ayg-floating-social *,
.ayg-floating-contact * {
    box-sizing: border-box;
}


/* ==========================================================
   LEFT SOCIAL ICONS
========================================================== */

.ayg-floating-social {
    position: fixed;

    left: 0;

    top: 50%;

    z-index: 999;

    display: flex;

    flex-direction: column;

    gap: 2px;

    transform: translateY(-50%);
}


.ayg-float-btn {
    width: 44px;

    height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    text-decoration: none;

    transition:
        width 0.3s ease,
        transform 0.3s ease,
        filter 0.3s ease;
}


.ayg-float-btn:first-child {
    border-radius:
        0
        7px
        0
        0;
}


.ayg-float-btn:last-child {
    border-radius:
        0
        0
        7px
        0;
}


.ayg-float-btn svg {
    width: 19px;

    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.ayg-float-btn .ayg-icon-fill {
    fill: currentColor;

    stroke: none;
}


/* HOVER */

.ayg-float-btn:hover {
    width: 53px;

    filter:
        brightness(1.06);
}


/* INSTAGRAM */

.ayg-instagram {
    background:
        linear-gradient(
            135deg,
            #833ab4,
            #fd1d1d,
            #fcb045
        );
}


/* YOUTUBE */

.ayg-youtube {
    background: #ff0000;
}


/* X */

.ayg-twitter {
    background: #111111;
}


/* LINKEDIN */

.ayg-linkedin {
    background: #0a66c2;
}


/* PINTEREST */

.ayg-pinterest {
    background: #bd081c;
}



/* ==========================================================
   RIGHT WHATSAPP + CALL
========================================================== */

.ayg-floating-contact {
    position: fixed;

    right: 0;

    top: 50%;

    z-index: 999;

    display: flex;

    flex-direction: column;

    gap: 8px;

    transform:
        translateY(-50%);
}


/* BUTTON */

.ayg-contact-float {
    position: relative;

    min-width: 52px;

    min-height: 50px;

    display: flex;

    align-items: center;

    gap: 9px;

    padding:
        0
        14px
        0
        18px;

    border-radius:
        30px
        0
        0
        30px;

    color: #ffffff;

    text-decoration: none;

    box-shadow:
        0
        8px
        24px
        rgba(0, 0, 0, 0.16);

    transform:
        translateX(
            calc(100% - 52px)
        );

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


.ayg-contact-float:hover {
    transform:
        translateX(0);

    box-shadow:
        0
        12px
        30px
        rgba(0, 0, 0, 0.22);
}



/* ==========================================================
   ICON
========================================================== */

.ayg-contact-icon {
    width: 28px;

    height: 28px;

    flex:
        0
        0
        28px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.ayg-contact-icon svg {
    width: 23px;

    height: 23px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}



/* ==========================================================
   TEXT
========================================================== */

.ayg-contact-text {
    padding-right: 4px;

    font-family:
        "Montserrat",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    line-height: 1;

    font-weight: 700;

    white-space: nowrap;
}



/* ==========================================================
   WHATSAPP COLOR
========================================================== */

.ayg-whatsapp-float {
    background: #25d366;
}


.ayg-whatsapp-float:hover {
    background: #1ebc59;
}



/* ==========================================================
   CALL COLOR
========================================================== */

.ayg-call-float {
    background: #176b46;
}


.ayg-call-float:hover {
    background: #0f5437;
}



/* ==========================================================
   TABLET
========================================================== */

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

    .ayg-float-btn {
        width: 40px;

        height: 40px;
    }


    .ayg-float-btn:hover {
        width: 46px;
    }


    .ayg-float-btn svg {
        width: 17px;

        height: 17px;
    }


    .ayg-contact-float {
        min-height: 46px;

        transform:
            translateX(
                calc(100% - 48px)
            );
    }


    .ayg-contact-icon {
        width: 24px;

        height: 24px;

        flex-basis: 24px;
    }


    .ayg-contact-icon svg {
        width: 21px;

        height: 21px;
    }

}



/* ==========================================================
   MOBILE
========================================================== */

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

    /*
       Move buttons to bottom so they don't cover
       page text on small screens.
    */


    /* LEFT SOCIAL */

    .ayg-floating-social {
        top: auto;

        bottom: 15px;

        left: 14px;

        flex-direction: row;

        gap: 5px;

        transform: none;
    }


    .ayg-float-btn {
        width: 36px;

        height: 36px;

        border-radius: 50% !important;

        box-shadow:
            0
            5px
            16px
            rgba(0, 0, 0, 0.16);
    }


    .ayg-float-btn:hover {
        width: 36px;

        transform:
            translateY(-2px);
    }


    .ayg-float-btn svg {
        width: 16px;

        height: 16px;
    }



    /* RIGHT CONTACT */

    .ayg-floating-contact {
        top: auto;

        right: 14px;

        bottom: 15px;

        flex-direction: row;

        gap: 7px;

        transform: none;
    }


    .ayg-contact-float {
        width: 42px;

        min-width: 42px;

        height: 42px;

        min-height: 42px;

        padding: 0;

        border-radius: 50%;

        justify-content: center;

        transform: none;
    }


    .ayg-contact-float:hover {
        transform:
            translateY(-2px);
    }


    .ayg-contact-icon {
        width: 22px;

        height: 22px;

        flex-basis: 22px;
    }


    .ayg-contact-icon svg {
        width: 21px;

        height: 21px;
    }


    /* MOBILE = ICON ONLY */

    .ayg-contact-text {
        display: none;
    }

}



/* ==========================================================
   VERY SMALL MOBILE
========================================================== */

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

    /*
       Show fewer social buttons to avoid overlap
       with WhatsApp + Call.
    */

    .ayg-floating-social .ayg-linkedin,
    .ayg-floating-social .ayg-pinterest {
        display: none;
    }


    .ayg-floating-social {
        left: 10px;

        bottom: 12px;
    }


    .ayg-floating-contact {
        right: 10px;

        bottom: 12px;
    }


    .ayg-float-btn {
        width: 34px;

        height: 34px;
    }


    .ayg-contact-float {
        width: 40px;

        min-width: 40px;

        height: 40px;

        min-height: 40px;
    }

}