@extends('frontend.layouts.template-base')

@section('meta_tags')
  @include('frontend.layouts.meta-tags', ['title' => 'Chotekisan', 'page' => 'Deals'])
@endsection

@section('content')
<section class="Deals-main">
    {{-- Deals Section Banner start --}}
    <section class="home-banner">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col-lg-6 col-12">
                    <h1 class="hero-banner-title">Best Deals Freshly</h1>
                    <p class="mb-4 hero-banner-content">
                        From healthy groceries to ready-to-eat bowls, enjoy handpicked deals at prices that make shopping better and fresher.
                    </p>

                    <div class="btn-list mb-4">
                        <a href="javascript:void(0);" class="btn btn-orange">
                            <span class="text">Explore Offer</span>
                        </a>
                    </div>

                    <div class="row gx-3 gy-md-0 gy-3 pt-md-0 pt-3">
                        <div class="col-md-6 col-12">
                            <div class="banner-card p-2">
                                <div class="row gx-4 align-items-center justify-content-between">
                                    <div class="col-4">
                                        <div class="banner-card-image">
                                            <img src="{{ asset('assets/images/deals-img/hero-img/free-delivery.svg') }}" alt="image">
                                        </div>
                                    </div>
                                    <div class="col-8">
                                        <h6 class="banner-card-title">Farm-Fresh Quality</h6>
                                        <p class="banner-card-text">Freshly sourced products packed with care</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6 col-12">
                            <div class="banner-card p-2">
                                <div class="row gx-4 align-items-center justify-content-between">
                                    <div class="col-4">
                                        <div class="banner-card-image">
                                            <img src="{{ asset('assets/images/deals-img/hero-img/farm-fresh-quality.svg') }}" alt="image">
                                        </div>
                                    </div>
                                    <div class="col-8">
                                        <h6 class="banner-card-title">Farm-Fresh Quality</h6>
                                        <p class="banner-card-text">Freshly sourced products packed with care</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-12 d-flex align-items-center justify-content-center">
                    <div class="img-wrapper mt-md-4 mt-0">
                        <img class="cart-img d-sm-block d-none" src="{{ asset('assets/images/deals-img/hero-img/cart.png') }}" alt="cart">
                        <img class="cart-img d-sm-none d-block" src="{{ asset('assets/images/deals-img/hero-img/cart-sm-image.webp') }}" alt="cart">

                        @for ($i = 1; $i <= 32; $i++)
                            <img class="cart-products-img product-{{ $i }} d-sm-block d-none"
                                src="{{ asset('assets/images/deals-img/hero-img/p' . $i . '.png') }}"
                                alt="products">
                        @endfor

                        <img class="cart-float-icons-1" src="{{ asset('assets/images/deals-img/hero-img/hero-img-savings.png') }}" alt="icon">
                        <img class="cart-float-icons-2" src="{{ asset('assets/images/deals-img/hero-img/hero-img-fresh.png') }}" alt="icon">
                        <img class="cart-float-icons-3" src="{{ asset('assets/images/deals-img/hero-img/hero-img-discount.png') }}" alt="icon">
                        <img class="cart-float-icons-4" src="{{ asset('assets/images/deals-img/hero-img/hero-img-shopingbag.png') }}" alt="icon">
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{-- Deals Section Banner end --}}

    {{-- Limited Time Offers start --}}
    <section class="category-products space-x user-select-none my-md-5 my-3">
        <div class="container-fluid">
        <div class="row mb-4  align-items-center">
            <div class="col-6 col-lg-8 col-md-6">
            <div class="title-container">
                <h2 class="section-title mb-0">Limited Time Offers</h2>
            </div>
            </div>
            <div class="col-6 col-md-6 col-lg-4 d-flex justify-content-end">
            <a href="{{ route('frontend.limited-offer') }}" class="navi-link text-light-green  text-decoration-none">See all <i
                class="fas fa-angle-right ms-1 primary-color"></i>

            </a>
            </div>
        </div>
        <div class="row frequent-sec">

                <!-- Slide 1 -->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/wheat.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-badge-container">
                        <div class="text-base">
                        <span class="icon">
                            <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">    
                        </span> 01:38:11
                        </div>

                        <div class="mask-overlay">
                        <div class="text-white">
                            <span class="icon">
                                <img src="{{ asset('assets/images/icon/hurry-w.svg') }}" alt="Hurry Time" loading="lazy">    
                            </span> 01:38:11
                        </div>
                        </div>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        1 kg
                    </div>
                    </div>
                </div>
                </div>

                <!-- Slide 2 -->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/oil.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-badge-container">
                        <div class="text-base">
                        <span class="icon">
                            <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">    
                        </span> 01:38:11
                        </div>

                        <div class="mask-overlay">
                        <div class="text-white">
                            <span class="icon">
                                <img src="{{ asset('assets/images/icon/hurry-w.svg') }}" alt="Hurry Time" loading="lazy">    
                            </span> 01:38:11
                        </div>
                        </div>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        1 kg
                    </div>
                    </div>
                </div>

                </div>

                <!-- Slide 3 -->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/salt.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-badge-container">
                        <div class="text-base">
                        <span class="icon">
                            <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">    
                        </span> 01:38:11
                        </div>

                        <div class="mask-overlay">
                        <div class="text-white">
                            <span class="icon">
                                <img src="{{ asset('assets/images/icon/hurry-w.svg') }}" alt="Hurry Time" loading="lazy">    
                            </span> 01:38:11
                        </div>
                        </div>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        2
                    </div>
                    </div>
                </div>

                </div>
                <!-- Slide 4-->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/biscuit.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-badge-container">
                        <div class="text-base">
                        <span class="icon">
                            <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">    
                        </span> 01:38:11
                        </div>

                        <div class="mask-overlay">
                        <div class="text-white">
                            <span class="icon">
                                <img src="{{ asset('assets/images/icon/hurry-w.svg') }}" alt="Hurry Time" loading="lazy">    
                            </span> 01:38:11
                        </div>
                        </div>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        1 Lt
                    </div>
                    </div>
                </div>

                </div>
                <!-- Slide 5 -->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/onion.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-badge-container">
                        <div class="text-base">
                        <span class="icon">
                            <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">    
                        </span> 01:38:11
                        </div>

                        <div class="mask-overlay">
                        <div class="text-white">
                            <span class="icon">
                                <img src="{{ asset('assets/images/icon/hurry-w.svg') }}" alt="Hurry Time" loading="lazy">    
                            </span> 01:38:11
                        </div>
                        </div>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>

                        <div class="qty-dropdown">
                    <button class="qty-selected" type="button">
                    <span class="selected-text">1 kg</span>
                    <i class="fas fa-chevron-down"></i>
                    </button>

                    <ul class="qty-menu">
                    <li data-value="1 kg" class="active">1 kg</li>
                    <li data-value="5 kg">5 kg</li>
                    <li data-value="10 kg">10 kg</li>
                    <li data-value="500 g">500 g</li>
                    </ul>
                </div>
                </div>
                </div>

                </div>
                <!-- Slide 6-->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/ice-cream.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-badge-container">
                        <div class="text-base">
                        <span class="icon">
                            <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">    
                        </span> 01:38:11
                        </div>

                        <div class="mask-overlay">
                        <div class="text-white">
                            <span class="icon">
                                <img src="{{ asset('assets/images/icon/hurry-w.svg') }}" alt="Hurry Time" loading="lazy">    
                            </span> 01:38:11
                        </div>
                        </div>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        5 kg
                    </div>
                    </div>
                </div>

                </div>

        </div>

        </div>
    </section>
    {{-- Limited Time Offers end --}}

    {{-- Limited Offer CTA start --}}
    <section class="deals-cta-main ">
    <div class="deals-cta-wrapper mx-md-5 mx-4">
        <div class="container-fluid">
            <div class="row align-items-center">

                {{-- Image --}}
                <div class="col-lg-4 text-center mb-4 mb-md-0   order-2 order-lg-1">
                    <div class="deals-cta-image">
                        <img src="{{ asset('assets/images/deals-img/deals-cta-img.webp') }}"
                            alt="Groceries">
                    </div>
                </div>

                {{-- Content --}}
                <div class="col-lg-8    order-1 order-lg-2">

                    <div class="deals-cta-details text-lg-start text-center py-md-4">

                        <h2 class="deals-cta-title">
                            LIMITED <span>OFFER</span>
                        </h2>

                        <p class="deals-cta-text">
                            Save more on fresh groceries, seasonal fruits, and handpicked vegetables every day. Enjoy exciting deals delivered straight to your doorstep.
                        </p>

                        <a href="javascript:void(0);" class="deals-cta-btn">
                            Shop Now
                        </a>

                    </div>

                </div>

            </div>
        </div>
    </div>
    </section>
    {{-- Limited Offer CTA end --}}

    {{-- Farm Fresh Savings start --}}
    <section class="category-products space-x user-select-none my-md-5 my-3">
        <div class="container-fluid">
        <div class="row mb-4  align-items-center">
            <div class="col-6 col-lg-8 col-md-6">
            <div class="title-container">
                <h2 class="section-title mb-0">Farm Fresh Savings</h2>
            </div>
            </div>
            <div class="col-6 col-md-6 col-lg-4 d-flex justify-content-end">
            <a href="javascript:void(0);" class="navi-link text-light-green  text-decoration-none">See all <i
                class="fas fa-angle-right ms-1 primary-color"></i>

            </a>
            </div>
        </div>
        <div class="row frequent-sec">

                <!-- Slide 1 -->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/fresh-1.webp') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        1 kg
                    </div>
                    </div>
                </div>
                </div>

                <!-- Slide 2 -->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/fresh-2.webp') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        1 kg
                    </div>
                    </div>
                </div>

                </div>

                <!-- Slide 3 -->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/fresh-3.webp') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        2
                    </div>
                    </div>
                </div>

                </div>
                <!-- Slide 4-->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/fresh-4.webp') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        1 Lt
                    </div>
                    </div>
                </div>

                </div>
                <!-- Slide 5 -->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/onion.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>

                        <div class="qty-dropdown">
                    <button class="qty-selected" type="button">
                    <span class="selected-text">1 kg</span>
                    <i class="fas fa-chevron-down"></i>
                    </button>

                    <ul class="qty-menu">
                    <li data-value="1 kg" class="active">1 kg</li>
                    <li data-value="5 kg">5 kg</li>
                    <li data-value="10 kg">10 kg</li>
                    <li data-value="500 g">500 g</li>
                    </ul>
                </div>
                </div>
                </div>

                </div>
                <!-- Slide 6-->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/fresh-3.webp') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        5 kg
                    </div>
                    </div>
                </div>

                </div>

        </div>

        </div>
    </section>
    {{-- Farm Fresh Savings end --}}

    {{-- Freshness at Great Prices start --}}
    <section class="category-products space-x user-select-none">
        <div class="container-fluid">
        <div class="row mb-4  align-items-center">
            <div class="col-6 col-lg-8 col-md-6">
            <div class="title-container">
                <h2 class="section-title mb-0">Freshness at Great Prices</h2>
            </div>
            </div>
            <div class="col-6 col-md-6 col-lg-4 d-flex justify-content-end">
            <a href="javascript:void(0);" class="navi-link text-light-green  text-decoration-none">See all <i
                class="fas fa-angle-right ms-1 primary-color"></i>

            </a>
            </div>
        </div>
        <div class="row frequent-sec">

                <!-- Slide 1 -->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/wheat.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-badge-container">
                        <div class="text-base">
                        <span class="icon">
                            <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">    
                        </span> 01:38:11
                        </div>

                        <div class="mask-overlay">
                        <div class="text-white">
                            <span class="icon">
                                <img src="{{ asset('assets/images/icon/hurry-w.svg') }}" alt="Hurry Time" loading="lazy">    
                            </span> 01:38:11
                        </div>
                        </div>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        1 kg
                    </div>
                    </div>
                </div>
                </div>

                <!-- Slide 2 -->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/oil.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-badge-container">
                        <div class="text-base">
                        <span class="icon">
                            <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">    
                        </span> 01:38:11
                        </div>

                        <div class="mask-overlay">
                        <div class="text-white">
                            <span class="icon">
                                <img src="{{ asset('assets/images/icon/hurry-w.svg') }}" alt="Hurry Time" loading="lazy">    
                            </span> 01:38:11
                        </div>
                        </div>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        1 kg
                    </div>
                    </div>
                </div>

                </div>

                <!-- Slide 3 -->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/salt.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-badge-container">
                        <div class="text-base">
                        <span class="icon">
                            <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">    
                        </span> 01:38:11
                        </div>

                        <div class="mask-overlay">
                        <div class="text-white">
                            <span class="icon">
                                <img src="{{ asset('assets/images/icon/hurry-w.svg') }}" alt="Hurry Time" loading="lazy">    
                            </span> 01:38:11
                        </div>
                        </div>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        2
                    </div>
                    </div>
                </div>

                </div>
                <!-- Slide 4-->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/biscuit.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-badge-container">
                        <div class="text-base">
                        <span class="icon">
                            <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">    
                        </span> 01:38:11
                        </div>

                        <div class="mask-overlay">
                        <div class="text-white">
                            <span class="icon">
                                <img src="{{ asset('assets/images/icon/hurry-w.svg') }}" alt="Hurry Time" loading="lazy">    
                            </span> 01:38:11
                        </div>
                        </div>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        1 Lt
                    </div>
                    </div>
                </div>

                </div>
                <!-- Slide 5 -->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/onion.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-badge-container">
                        <div class="text-base">
                        <span class="icon">
                            <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">    
                        </span> 01:38:11
                        </div>

                        <div class="mask-overlay">
                        <div class="text-white">
                            <span class="icon">
                                <img src="{{ asset('assets/images/icon/hurry-w.svg') }}" alt="Hurry Time" loading="lazy">    
                            </span> 01:38:11
                        </div>
                        </div>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>

                        <div class="qty-dropdown">
                    <button class="qty-selected" type="button">
                    <span class="selected-text">1 kg</span>
                    <i class="fas fa-chevron-down"></i>
                    </button>

                    <ul class="qty-menu">
                    <li data-value="1 kg" class="active">1 kg</li>
                    <li data-value="5 kg">5 kg</li>
                    <li data-value="10 kg">10 kg</li>
                    <li data-value="500 g">500 g</li>
                    </ul>
                </div>
                </div>
                </div>

                </div>
                <!-- Slide 6-->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/ice-cream.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    <div class="hurry-badge-container">
                        <div class="text-base">
                        <span class="icon">
                            <img src="{{ asset('assets/images/icon/hurry.svg') }}" alt="Hurry Time" loading="lazy">    
                        </span> 01:38:11
                        </div>

                        <div class="mask-overlay">
                        <div class="text-white">
                            <span class="icon">
                                <img src="{{ asset('assets/images/icon/hurry-w.svg') }}" alt="Hurry Time" loading="lazy">    
                            </span> 01:38:11
                        </div>
                        </div>
                    </div>
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        5 kg
                    </div>
                    </div>
                </div>

                </div>

        </div>

        </div>
    </section>
    {{-- Freshness at Great Prices end --}}

    {{-- Special Offer For You Start --}}
    <section class="special-offer-main my-md-5 my-3 mt-0">
    <div>
        <div class="special-offer-header text-center py-4 px-sm-0 px-1">
            <h1 class="special-offer-title">Special Offer For You</h1>
            <p class="special-offer-text">Extra savings you don’t want to miss</p>
        </div>
        
        <div class="special-offer-content py-4">

            <div class="swiper specialOfferSwiper">

                <div class="swiper-wrapper">

                    @for ($i = 1; $i <= 20; $i++)

                        <div class="swiper-slide">
                            <div class="offer-product-card">
                                <div class="offer-badge">15% Off</div>
                                <div class="offer-img-box">
                                    <img src="{{ asset('assets/images/deals-img/deals-product-img.webp') }}" alt="Product">
                                </div>
                                <div class="offer-product-details">
                                    <h4>Traditional Gol Mathi Snack</h4>
                                    <p class="offer-qty">250 g</p>
                                    <div class="offer-price-row">
                                        <div>
                                            <h5>₹149</h5>
                                            <p class="offer-price text-decoration-line-through">₹199</p>
                                        </div>
                                        <div class="offer-action">
                                            <button class="offer-add-btn">Add</button>
                                            <div class="offer-counter">
                                                <button class="minus-btn">-</button>
                                                <span class="count">1</span>
                                                <button class="plus-btn">+</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endfor
                    
                </div>

            </div>

        </div>
    </div>
    </section>
    {{-- Special Offer For You end --}}

    {{-- Daily Grocery Deals start --}}
    <section class="category-products space-x user-select-none">
        <div class="container-fluid">
        <div class="row mb-4  align-items-center">
            <div class="col-6 col-lg-8 col-md-6">
            <div class="title-container">
                <h2 class="section-title mb-0">Daily Grocery Deals</h2>
            </div>
            </div>
            <div class="col-6 col-md-6 col-lg-4 d-flex justify-content-end">
            <a href="javascript:void(0);" class="navi-link text-light-green  text-decoration-none">See all <i
                class="fas fa-angle-right ms-1 primary-color"></i>

            </a>
            </div>
        </div>
        <div class="row frequent-sec">

                <!-- Slide 1 -->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/wheat.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        1 kg
                    </div>
                    </div>
                </div>
                </div>

                <!-- Slide 2 -->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/oil.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        1 kg
                    </div>
                    </div>
                </div>

                </div>

                <!-- Slide 3 -->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/salt.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        2
                    </div>
                    </div>
                </div>

                </div>
                <!-- Slide 4-->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/biscuit.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        1 Lt
                    </div>
                    </div>
                </div>

                </div>
                <!-- Slide 5 -->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/onion.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>

                        <div class="qty-dropdown">
                    <button class="qty-selected" type="button">
                    <span class="selected-text">1 kg</span>
                    <i class="fas fa-chevron-down"></i>
                    </button>

                    <ul class="qty-menu">
                    <li data-value="1 kg" class="active">1 kg</li>
                    <li data-value="5 kg">5 kg</li>
                    <li data-value="10 kg">10 kg</li>
                    <li data-value="500 g">500 g</li>
                    </ul>
                </div>
                </div>
                </div>

                </div>
                <!-- Slide 6-->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/ice-cream.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        5 kg
                    </div>
                    </div>
                </div>

                </div>

        </div>

        </div>
    </section>
    {{-- Daily Grocery Deals end --}}

    {{-- Snack Time Deals start --}}
    <section class="category-products space-x user-select-none my-md-5 my-3 mt-0">
        <div class="container-fluid">
        <div class="row mb-4  align-items-center">
            <div class="col-6 col-lg-8 col-md-6">
            <div class="title-container">
                <h2 class="section-title mb-0">Snack Time Deals</h2>
            </div>
            </div>
            <div class="col-6 col-md-6 col-lg-4 d-flex justify-content-end">
            <a href="javascript:void(0);" class="navi-link text-light-green  text-decoration-none">See all <i
                class="fas fa-angle-right ms-1 primary-color"></i>

            </a>
            </div>
        </div>
        <div class="row frequent-sec">

                <!-- Slide 1 -->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/wheat.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        1 kg
                    </div>
                    </div>
                </div>
                </div>

                <!-- Slide 2 -->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/oil.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        1 kg
                    </div>
                    </div>
                </div>

                </div>

                <!-- Slide 3 -->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/salt.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        2
                    </div>
                    </div>
                </div>

                </div>
                <!-- Slide 4-->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/biscuit.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        1 Lt
                    </div>
                    </div>
                </div>

                </div>
                <!-- Slide 5 -->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/onion.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>

                        <div class="qty-dropdown">
                    <button class="qty-selected" type="button">
                    <span class="selected-text">1 kg</span>
                    <i class="fas fa-chevron-down"></i>
                    </button>

                    <ul class="qty-menu">
                    <li data-value="1 kg" class="active">1 kg</li>
                    <li data-value="5 kg">5 kg</li>
                    <li data-value="10 kg">10 kg</li>
                    <li data-value="500 g">500 g</li>
                    </ul>
                </div>
                </div>
                </div>

                </div>
                <!-- Slide 6-->
                <div class="col-lg-2 col-md-4 col-6">
                <div class="card product-card">
                    <div class="img-area">
                    <div class="img-placeholder">
                        <img src="{{asset('assets/images/img/ice-cream.png') }}" alt="Product Image">
                    </div>
                    <span class="pro-orange-badge">17% Off</span>
                    <button class="wishlist-btn">
                        <svg class="heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="none"
                        stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
                        <path
                            d="M50 85 C30 70, 10 58, 10 38 C10 22, 22 12, 35 12 C42 12, 47 16, 50 20 C53 16, 58 12, 65 12 C78 12, 90 22, 90 38 C90 58, 70 70, 50 85 Z" />
                        </svg>

                    </button>
                    <div class="cart-btn" id="cartBtn">

                        <div class="counter-area">
                        <div class="minus-btn" id="minusBtn">−</div>
                        <div class="count-val" id="countVal">1</div>
                        </div>

                        <div class="plus-icon" id="plusIcon">
                        <svg width="20" height="20" viewBox="0 0 20 20">
                            <line x1="10" y1="4" x2="10" y2="16" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="vLine" />
                            <line x1="4" y1="10" x2="16" y2="10" stroke="#1a7a2e" stroke-width="2.5" stroke-linecap="round"
                            id="hLine" />
                        </svg>
                        </div>

                    </div>
                    </div>
                    <div class="info">
                    <div class="price-row">
                        <span class="price-now">₹249</span>
                        <span class="price-old">₹299</span>
                    </div>
                    
                    <div class="prod-name">Aashirvaad Whole Wheat At Our Shop</div>
                    <div class="prod-qty">
                        5 kg
                    </div>
                    </div>
                </div>

                </div>

        </div>

        </div>
    </section>
    {{-- Snack Time Deals end --}}

      
</section>
@endsection
@section('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {

        new Swiper('.specialOfferSwiper', {
            slidesPerView: 1,
            spaceBetween: 20,
            loop: true,
            loopAdditionalSlides: 10,
            speed: 600,

            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
                pauseOnMouseEnter: true,
            },

            centeredSlides: false,
            watchOverflow: true,

            breakpoints: {
                0: {
                    slidesPerView: 1,
                    spaceBetween: 12,
                },
                576: {
                    slidesPerView: 2.2,
                    spaceBetween: 14,
                },
                768: {
                    slidesPerView: 3.2,
                    spaceBetween: 16,
                },
                992: {
                    slidesPerView: 4.2,
                    spaceBetween: 18,
                },
                1200: {
                    slidesPerView: 5.5,
                    spaceBetween: 20,
                },
            }
        });

    });
</script>

<script>
    const wishlistBtns = document.querySelectorAll(".wishlist-btn");

    wishlistBtns.forEach(btn => {
      btn.addEventListener("click", () => {
        btn.classList.toggle("active");
      });
    });
  </script>

<script>
$(document).ready(function () {

    $('.offer-product-card').on('click', '.offer-add-btn', function () {

        const $card = $(this).closest('.offer-product-card');

        $card.data('count', 1);
        $card.find('.count').text(1);

        $card.find('.offer-action').addClass('active');
    });

    $('.offer-product-card').on('click', '.plus-btn', function () {

        const $card = $(this).closest('.offer-product-card');

        let count = ($card.data('count') || 1) + 1;

        $card.data('count', count);
        $card.find('.count').text(count);
    });

    $('.offer-product-card').on('click', '.minus-btn', function () {

        const $card = $(this).closest('.offer-product-card');

        let count = ($card.data('count') || 1) - 1;

        if (count < 1) {

            $card.removeData('count');
            $card.find('.offer-action').removeClass('active');
            $card.find('.count').text(1);

            return;
        }

        $card.data('count', count);
        $card.find('.count').text(count);

    });

});
</script>

<script>
    document.querySelectorAll(".qty-dropdown").forEach(drop => {
      const btn = drop.querySelector(".qty-selected");
      const text = drop.querySelector(".selected-text");
      const items = drop.querySelectorAll(".qty-menu li");

      btn.addEventListener("click", function (e) {
        e.stopPropagation();
        document.querySelectorAll(".qty-dropdown").forEach(d => {
          if (d !== drop) d.classList.remove("active");
        });
        drop.classList.toggle("active");
      });

      items.forEach(item => {
        item.addEventListener("click", function () {
          items.forEach(i => i.classList.remove("active"));
          item.classList.add("active");
          text.textContent = item.dataset.value;
          drop.classList.remove("active");
        });
      });
    });

    document.addEventListener("click", function () {
      document.querySelectorAll(".qty-dropdown").forEach(drop => {
        drop.classList.remove("active");
      });
    });
</script>
@endsection