/* ========================================
   GudLuck Foods -  CSS
   Navbar + Homepage Combined & Fixed
   ======================================== */

/* ==========================================
   CSS VARIABLES (Root Configuration)
   ========================================== */
:root {
    /* Primary Colors */
    --color-primary: #dc2626;
    --color-primary-dark: #b91c1c;
    --color-primary-light: #ef4444;
    
    /* Accent Colors */
    --color-accent: #ea580c;
    --color-accent-light: #f97316;
    --color-accent-gold: #f59e0b;
    
    /* Theme Colors (Homepage) */
    --bg: #fdfbf7;
    --fg: #2d2926;
    --muted: #8a8279;
    --accent: #d9823a;
    --card: #ffffff;
    --border: #e8e2d9;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #dc2626 0%, #ea580c 50%, #f59e0b 100%);
    --gradient-accent: linear-gradient(90deg, #dc2626, #ea580c, #f59e0b);
    --gradient-hover: linear-gradient(180deg, #b91c1c, #c2410c);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Playfair Display (Headings / Premium text) */

.font-playfair{
    font-family: 'Playfair Display', serif;
}

/* Poppins (Body text / UI text) */

.font-poppins{
    font-family: 'Poppins', sans-serif;
}

.font-saira{
    font-family: 'Saira Stencil One', sans-serif;
    font-weight: 400;
}

.font-light{
    font-weight:300;
}

.font-regular{
    font-weight:400;
}

.font-medium{
    font-weight:500;
}

.font-semibold{
    font-weight:600;
}

.font-bold{
    font-weight:700;
}

.font-extrabold{
    font-weight:800;
}

.font-black{
    font-weight:900;
}

/* ==========================================
   BASE STYLES
   ========================================== */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

[x-cloak] {
    display: none !important;
}

body {
    font-family: 'DM Sans', sans-serif;
    background-color: var(--bg);
    color: var(--fg);
}

.font-display {
    font-family: 'Cormorant Garamond', serif;
}

/* ==========================================
   SELECTION & SCROLLBAR
   ========================================== */
::selection {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.3), rgba(234, 88, 12, 0.3));
    color: #1f2937;
}

/* Custom Scrollbar */
/* Thinner Scrollbar for Product Info */
.scrollable-info::-webkit-scrollbar {
    width: 4px;   /* Thinner vertical scrollbar */
}

.scrollable-info::-webkit-scrollbar-track {
    background: #f3ebe1;  /* same track */
}

.scrollable-info::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #d97706, #ea580c);
    border-radius: 4px;
}

.scrollable-info::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #b45309, #dc2626); /* optional hover */
}

/* Firefox support */
.scrollable-info {
    scrollbar-width: thin;
    scrollbar-color: linear-gradient(180deg, #d97706, #ea580c) #f3ebe1;
}

/* ==========================================
   ANIMATIONS (Defined Once)
   ========================================== */
@keyframes shimmer {
    0% {
        transform: translateX(-50%) rotate(-12deg);
    }
    100% {
        transform: translateX(50%) rotate(-12deg);
    }
}

@keyframes shimmer-bg {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes badge-bounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(220, 38, 38, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(220, 38, 38, 0.8);
    }
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* ==========================================
   NAVBAR STYLES
   ========================================== */

/* Shimmer Effect for Topbar */
.shimmer-effect {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    animation: shimmer 3s ease-in-out infinite;
    transform: rotate(-12deg);
}

/* Navbar Wrapper */
.navbar-wrapper {
    position: relative;
}

/* Navigation Gradient Background */
.nav-gradient {
    background: var(--gradient-primary);
}

/* Glassmorphism Effect */
.glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Animated Underline for Nav Links */
.nav-underline {
    position: relative;
}

.nav-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--gradient-accent);
    transition: all var(--transition-base);
    transform: translateX(-50%);
}

.nav-underline:hover::after {
    width: 100%;
}

/* Badge Animations */
.badge-animate {
    animation: badge-bounce 2s ease-in-out infinite;
}

.pulse-ring {
    animation: pulse-ring 1.5s ease-out infinite;
}

.cart-badge {
    animation: scaleIn 0.3s ease-out;
}

/* ==========================================
   BUTTON STYLES
   ========================================== */
.btn-primary {
    position: relative;
    overflow: hidden;
    transition: all var(--transition-base);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left var(--transition-slow);
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(220, 38, 38, 0.4);
}

.btn-shine {
    position: relative;
    overflow: hidden;
}

.btn-shine::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left var(--transition-slow);
}

.btn-shine:hover::after {
    left: 100%;
}

/* ==========================================
   SEARCH STYLES
   ========================================== */
.search-focus-animation {
    transition: all var(--transition-base);
}

.search-focus-animation:focus-within {
    transform: scale(1.02);
}

/* ==========================================
   HOVER EFFECTS
   ========================================== */

/* Icon Hover */
.icon-hover-effect {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-hover-effect:hover {
    transform: scale(1.15) rotate(5deg);
}

/* Menu Item Hover */
.menu-item-hover {
    position: relative;
    overflow: hidden;
}

.menu-item-hover::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.05), rgba(234, 88, 12, 0.05));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
    z-index: 0;
}

.menu-item-hover:hover::before {
    transform: scaleX(1);
}

/* Nav Link */
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: width var(--transition-base);
}

.nav-link:hover::after {
    width: 100%;
}

/* ==========================================
   CARD STYLES
   ========================================== */

/* Product Card */
.product-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(220, 38, 38, 0.2);
}

.product-card:hover .product-image {
    transform: scale(1.05);
}

.product-image {
    transition: transform var(--transition-slow);
}

/* Trust Card */
.trust-card {
    transition: all var(--transition-base);
}

.trust-card:hover {
    transform: translateY(-5px);
    background: white;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1);
}

.trust-card:hover .trust-icon {
    transform: scale(1.1);
    background: var(--color-primary);
    color: white;
}

.trust-icon {
    transition: all var(--transition-base);
}

/*product details page scroll*/


/* Category Card */
  /* Background Pattern with Spice Illustrations */
        .spice-pattern {
            background-color: #fdfbf7;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23d9823a' fill-opacity='0.04'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        
        /* Circular Product Container Animation */
        .category-circle{
            border-radius:50%;
            padding:2px;
            background:linear-gradient(135deg,#f59e0b,#eab308,#fbbf24,#f59e0b);
        }

        .category-circle > div{
            background:white;
            border-radius:50%;
        }
    
        
        @keyframes rotate-gradient {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* Floating Animation */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }
        
        .float-animation {
            animation: float 3s ease-in-out infinite;
        }
        
        /* Pulse Animation for Badges */
        @keyframes pulse-soft {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.05); opacity: 0.9; }
        }
        
        .pulse-soft {
            animation: pulse-soft 2s ease-in-out infinite;
        }
        
        /* Shine Effect on Hover */
        .shine-effect {
            position: relative;
            overflow: hidden;
        }
        
        .shine-effect::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to right,
                transparent 0%,
                rgba(255, 255, 255, 0.3) 50%,
                transparent 100%
            );
            transform: rotate(30deg) translateX(-100%);
            transition: transform 0.6s ease;
        }
        
        .shine-effect:hover::before {
            transform: rotate(30deg) translateX(100%);
        }
        
        /* Decorative Spice Images */
        .spice-decoration {
            filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
        }
        
        /* View All Button */
        .view-all-btn {
            background: linear-gradient(135deg, #dc2626 0%, #ea580c 100%);
            transition: all 0.3s ease;
        }
        
        .view-all-btn:hover {
            background: linear-gradient(135deg, #b91c1c 0%, #c2410c 100%);
            transform: translateY(-2px);
            box-shadow: 0 10px 30px -5px rgba(220, 38, 38, 0.4);
        }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #f3ebe1; }
        ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #d97706, #ea580c); border-radius: 4px; }

/* Review Card */
.review-card {
    transition: all var(--transition-base);
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1);
}

/* Blog Card */
.blog-card {
    transition: all 0.4s ease;
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12);
}

.blog-card:hover .blog-image {
    transform: scale(1.1);
}

.blog-image {
    transition: transform 0.6s ease;
}

/* ==========================================
   MOBILE MENU
   ========================================== */
.mobile-menu {
    transform: translateX(100%);
    transition: transform var(--transition-base);
}

.mobile-menu.open {
    transform: translateX(0);
}

.mobile-menu-enter {
    animation: slideDown 0.3s ease-out;
}

.mobile-menu-leave {
    animation: slideUp 0.3s ease-in;
}

/* Mobile Search Input */
.mobile-search-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
}

/* ==========================================
   SCROLL ANIMATIONS
   ========================================== */
.animate-on-scroll {
    opacity: 0;
}

.animate-on-scroll.visible {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-left.visible {
    animation: fadeInLeft 0.8s ease-out forwards;
}

.animate-right.visible {
    animation: fadeInRight 0.8s ease-out forwards;
}

.animate-scale.visible {
    animation: scaleIn 0.6s ease-out forwards;
}

/* Stagger Delays */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* ==========================================
   FLOATING ELEMENTS
   ========================================== */
.float-element {
    animation: float 3s ease-in-out infinite;
}

.float-element:nth-child(2) {
    animation-delay: 0.5s;
}

.float-element:nth-child(3) {
    animation-delay: 1s;
}

/* ==========================================
   BACKGROUND PATTERNS
   ========================================== */
.bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d9823a' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero-gradient {
    background: linear-gradient(135deg, rgba(253, 251, 247, 0.95) 0%, rgba(253, 251, 247, 0.8) 50%, rgba(253, 251, 247, 0.6) 100%);
}

/* ==========================================
   ACCESSIBILITY & FOCUS
   ========================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================
   FORM ELEMENTS
   ========================================== */
select option {
    background-color: var(--color-primary);
    color: white;
    padding: 8px;
}

/* ==========================================
   RATING STARS
   ========================================== */
.star {
    color: #f4c896;
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */
@media (max-width: 768px) {
    .navbar-wrapper {
        position: sticky;
    }
}

/* ==========================================
   PRINT STYLES
   ========================================== */
@media print {
    .navbar-wrapper,
    nav {
        position: static !important;
        box-shadow: none !important;
    }
    
    .animate-ping,
    .animate-pulse,
    .animate-bounce,
    .badge-animate,
    .float-element,
    .shimmer-effect {
        animation: none !important;
    }
}

/* ==========================================
   REDUCED MOTION
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* reviews  */

  /* Background Pattern with Decorative Elements */
        .reviews-bg {
            background-color: #fdfbf7;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23d9823a' stroke-width='0.5' stroke-opacity='0.1'%3E%3Ccircle cx='100' cy='100' r='80'/%3E%3Ccircle cx='100' cy='100' r='60'/%3E%3Ccircle cx='100' cy='100' r='40'/%3E%3Cpath d='M20 100 Q60 60 100 100 T180 100'/%3E%3Cpath d='M100 20 Q140 60 100 100 T100 180'/%3E%3C/g%3E%3C/svg%3E");
        }
        
        /* Quote Container Styling */
        .quote-container {
            background: linear-gradient(135deg, #fef9f3 0%, #fdf6ed 50%, #fcf4eb 100%);
            border: 1px solid rgba(217, 130, 58, 0.1);
        }
        
        /* Star Rating Animation */
        .star-filled {
            color: #fbbf24;
            filter: drop-shadow(0 1px 2px rgba(251, 191, 36, 0.4));
        }
        
        .star-empty {
            color: #e5e7eb;
        }
        
        /* Navigation Buttons */
        .nav-btn {
            background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .nav-btn:hover {
            background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
            transform: scale(1.1);
            box-shadow: 0 8px 20px rgba(217, 119, 6, 0.4);
        }
        
        /* Customer Profile Active State */
        .profile-active {
            transform: scale(1.15);
            box-shadow: 0 0 0 4px #d97706, 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        
        /* Quote Mark Animation */
        .quote-mark {
            font-family: 'Playfair Display', serif;
            color: #dc2626;
            opacity: 0.8;
        }
        
        /* View All Button */
        .view-all-btn {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            transition: all 0.3s ease;
        }
        
        .view-all-btn:hover {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(251, 191, 36, 0.4);
        }
        
        /* Testimonial Transition */
        .testimonial-transition {
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        /* Floating Animation */
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
        }
        
        .float-animation {
            animation: float 3s ease-in-out infinite;
        }
        
        /* Pulse Animation for Active Profile */
        @keyframes pulse-ring {
            0% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.4); }
            70% { box-shadow: 0 0 0 8px rgba(217, 119, 6, 0); }
            100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
        }
        
        .pulse-ring {
            animation: pulse-ring 2s ease-out infinite;
        }
        
        /* Decorative Leaf Pattern */
        .leaf-decoration {
            position: absolute;
            opacity: 0.1;
            pointer-events: none;
        }

        /* about  */

     /* Wooden Texture Background */
        .wooden-bg {
            position: relative;
        }
        
        .wooden-bg::before {
            content: '';
            position: absolute;
            inset: 0;
            background-repeat: no-repeat;
            background-size: cover;
            background-image: url("/images/about.png");
        }
    
        
        /* Vertical Text */
        .vertical-text {
            writing-mode: vertical-rl;
            text-orientation: mixed;
            transform: rotate(180deg);
        }
        
        /* Product Box Hover */
        .product-box {
            transition: all 0.3s ease;
        }
        
        .product-box:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        }
        
        /* Button Hover Effects */
        .btn-shop {
            background: linear-gradient(135deg, #2E7D32 0%, #388E3C 100%);
            transition: all 0.3s ease;
        }
        
        .btn-shop:hover {
            background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(46, 125, 50, 0.4);
        }
        
        .btn-know-more {
            background: linear-gradient(135deg, #FFC107 0%, #FFB300 100%);
            transition: all 0.3s ease;
        }
        
        .btn-know-more:hover {
            background: linear-gradient(135deg, #FFB300 0%, #FFA000 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(255, 193, 7, 0.4);
        }
        
        /* Info Box */
        .info-box {
            background: rgba(255, 255, 255, 0.95);
            border: 2px solid #1976D2;
        }
        
        /* Checkmark Animation */
        .checkmark-icon {
            animation: pulse-check 2s ease-in-out infinite;
        }
        
        @keyframes pulse-check {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        
        /* Logo Badge Glow */
        .logo-badge {
            box-shadow: 0 0 20px rgba(212, 165, 116, 0.5);
        }
        
        /* Spice Bowl Floating Animation */
        .spice-bowl {
            transition: transform 0.3s ease;
        }
        
        .product-box:hover .spice-bowl {
            transform: translateY(-3px);
        }

        

    /* footer section */

     /* Background Pattern */
       .footer-bg {
            background-color: #FDF8F0;
            background-image: url("/images/footer-main-bg.png");
            background-size: cover;          /* makes image fill nicely */
            background-position: center;     /* keeps image centered */
            background-repeat: no-repeat;    /* prevents repeating */
            position: relative;
            overflow: hidden;
        }
        
        /* Logo Emblem */
        .logo-emblem {
            background: linear-gradient(145deg, #D4A574 0%, #B8956A 50%, #C9A06D 100%);
            box-shadow: 
                0 4px 15px rgba(212, 165, 116, 0.4),
                inset 0 2px 4px rgba(255, 255, 255, 0.3),
                inset 0 -2px 4px rgba(0, 0, 0, 0.1);
        }
        
        /* Subscribe Button */
        .btn-subscribe {
            background: linear-gradient(135deg, #D4A574 0%, #B8956A 100%);
            transition: all 0.3s ease;
        }
        
        .btn-subscribe:hover {
            background: linear-gradient(135deg, #C9A06D 0%, #A67C52 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(212, 165, 116, 0.4);
        }
        
        /* Social Icons */
        .social-icon {
            transition: all 0.3s ease;
        }
        
        .social-icon:hover {
            transform: translateY(-3px) scale(1.1);
        }
        
        /* Link Hover */
        .footer-link {
            transition: all 0.2s ease;
        }
        
        .footer-link:hover {
            color: #D4A574;
            padding-left: 5px;
        }
        
        /* Payment Icon Hover */
        .payment-icon {
            transition: all 0.3s ease;
            filter: grayscale(20%);
        }
        
        .payment-icon:hover {
            filter: grayscale(0%);
            transform: translateY(-2px);
        }
        
        /* Input Focus */
        .email-input:focus {
            outline: none;
            border-color: #D4A574;
            box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.2);
        }

.timeline-line {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 100%;
            background: repeating-linear-gradient(
                to bottom,
                #d1d5db 0px,
                #d1d5db 8px,
                transparent 8px,
                transparent 16px
            );
        }