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

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

@section('content')
<section class="fresh-main">
    {{-- Fresh Home banner start --}}
    <section class="home-banner">
        <div class="container-fluid">
            <div class="row justify-content-between align-items-center">
                <div class="col-lg-5 col-12 d-flex align-items-center order-2 order-sm-1 order-md-1 justify-content-center">
                    <div class="img-wrapper mt-4">
                        <img class="hero-banner-img" src="{{ asset('assets/images/fresh-img/fresh-hero-banner-img.webp') }}" alt="cart">

                        <img class="cart-float-icons-1" src="{{ asset('assets/images/fresh-img/fresh-hero-float-1.png') }}" alt="icon">
                        <img class="cart-float-icons-2" src="{{ asset('assets/images/fresh-img/fresh-hero-float-2.png') }}" alt="icon">
                        <img class="cart-float-icons-3" src="{{ asset('assets/images/fresh-img/fresh-hero-float-3.png') }}" alt="icon">
                        <img class="cart-float-icons-4" src="{{ asset('assets/images/fresh-img/fresh-hero-float-4.png') }}" alt="icon">
                    </div>
                </div>

                <div class="col-lg-7 col-12 order-1 order-sm-2 order-md-2">
                    <h1 class="hero-banner-title">FRESH FROM FARM</h1>
                    <p class="mb-4 hero-banner-content">
                        Handpicked fresh produce straight from local farms. Carefully selected for quality, taste, and nutrition — every single day.
                    </p>

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

                </div>
            </div>
        </div>
    </section>
    {{-- Fresh Home banner end --}}

    {{-- Explore Categories Start --}}
    <section class="explore-categories gro-category-section space-x py-5">
        <div class="container-fluid">
            <div class="row my-4  align-items-center ">
                <div class="col-8 col-md-8 col-lg-8">
                <div class="title-container">
                    <h2 class="section-title mb-0">Explore Categories</h2>
                </div>
                </div>
                <div class="col-2 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 g-4">

                <!-- Card 1 -->
                <div class="col-lg-2 col-md-4 col-6">
                    <a href="javascript:void(0);">
                        <div class="category-card">
                            <h5 class="category-title">Atta & Rice</h5>
                            <img src="{{asset('assets/images/img/atta.png') }}" class="category-img" alt="">
                        </div>
                    </a>
                </div>

                <!-- Card 2 -->
                <div class="col-lg-2 col-md-4 col-6">
                    <a href="javascript:void(0);">
                        <div class="category-card">
                            <h5 class="category-title">Oil & Ghee</h5>
                            <img src="{{asset('assets/images/img/ghee-img.png') }}" class="category-img" alt="">
                        </div>
                    </a>
                </div>

                <!-- Card 3 -->
                <div class="col-lg-2 col-md-4 col-6">
                    <a href="javascript:void(0);">
                        <div class="category-card">
                            <h5 class="category-title">Breakfast Cereals</h5>
                            <img src="{{asset('assets/images/img/choco.png') }}" class="category-img" alt="">
                        </div>
                    </a>
                </div>

                <!-- Card 4 -->
                <div class="col-lg-2 col-md-4 col-6">
                    <a href="javascript:void(0);">
                        <div class="category-card">
                            <h5 class="category-title">Pasta & Noodles</h5>
                            <img src="{{asset('assets/images/img/pasta.png') }}" class="category-img" alt="">
                        </div>
                    </a>
                </div>

                <!-- Card 5 -->
                <div class="col-lg-2 col-md-4 col-6">
                    <a href="javascript:void(0);">
                        <div class="category-card">
                            <h5 class="category-title">Dry Fruits & Seeds</h5>
                            <img src="{{asset('assets/images/img/nuts-img.png') }}" class="category-img" alt="">
                        </div>
                    </a>
                </div>

                <!-- Card 6 -->
                <div class="col-lg-2 col-md-4 col-6">
                    <a href="javascript:void(0);">
                        <div class="category-card">
                            <h5 class="category-title">Cool Drinks & Juices</h5>
                            <img src="{{asset('assets/images/img/cool-img.png') }}" class="category-img" alt="">
                        </div>
                    </a>
                </div>
            </div>

        </div>
    </section>
    {{-- Explore Categories end --}}

    {{-- Hot 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">Hot Deals</h2>
            </div>
            </div>
            <div class="col-6 col-md-6 col-lg-4 d-flex justify-content-end">
            <a href="{{ route('frontend.category') }}" 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>
    {{-- Hot Deals end --}}

    {{-- Every day Fresh Start --}}
    <section class="every-day-fresh-main my-5">
        <div class="container-fluid ">
            <div class="every-day-fresh-wrapper mx-lg-5 mx-2">
                <div class="row align-items-center">
                    <div class="col-lg-4   order-2 order-lg-1">
                        <div class="fresh-cta-img-wrapper">
                            <img class="fresh-cta-img" src="{{ asset('assets/images/fresh-img/fresh-cta-img.webp') }}" alt="bg">
                        </div>
                    </div>

                    <div class="col-lg-8   order-1 order-lg-2">
                        <div class="fresh-cta-content">
                            <h1 class="fresh-cta-title position-relative">
                                Every day Fresh
                                <img class="fresh-cta-span position-absolute" src="{{ asset('assets/images/fresh-img/fresh-title-span.webp') }}" alt="image">
                            </h1>
                            <p class="fresh-cta-text">Fruits at Great Prices</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </section>
    {{-- Every day Fresh end --}}

    {{-- Fresh From Farm at Lowest 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">Fresh From Farm at Lowest Prices</h2>
            </div>
            </div>
            <div class="col-6 col-md-6 col-lg-4 d-flex justify-content-end">
            <a href="{{ route('frontend.category') }}" 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>
    {{-- Fresh From Farm at Lowest Prices end --}}

    {{-- Fresh Picks for You start --}}
    <section class="category-products space-x user-select-none my-5">
        <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">Fresh Picks for You</h2>
            </div>
            </div>
            <div class="col-6 col-md-6 col-lg-4 d-flex justify-content-end">
            <a href="{{ route('frontend.category') }}" 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>
    {{-- Fresh Picks for You end --}}

    {{-- Eat Fresh. Live Better. start --}}
    <section class="eat-fresh">
        <div class="container-fluid">
            <div class="eat-fresh-wrapper mx-lg-5 mx-2">
                <div class="row gx-4 justify-content-center">
                    <div class="col-lg-3 col-12  d-flex align-items-center justify-content-center">
                        <div class="eat-freshimg-left-wrapper pb-3">
                            <img src="{{ asset('assets/images/fresh-img/eat-fresh-left.webp') }}" alt="image">
                        </div>
                    </div>
                    <div class="col-lg-5 col-12">
                        <div class="eat-freshimg-center h-100">
                            <h1 class="text-start">Eat Fresh.</h1>
                            <h1 class="text-start">Live Better.</h1>
                        </div>
                    </div>
                    <div class="col-lg-3 col-12   d-flex align-items-center justify-content-center">
                        <div class="eat-freshimg-right-wrapper">
                            <img src="{{ asset('assets/images/fresh-img/eat-fresh-right.webp') }}" alt="image">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {{-- Eat Fresh. Live Better. end --}}

    {{-- Summer Special start --}}
    <section class="category-products space-x user-select-none my-5">
        <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">Summer Special</h2>
            </div>
            </div>
            <div class="col-6 col-md-6 col-lg-4 d-flex justify-content-end">
            <a href="{{ route('frontend.category') }}" 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>
    {{-- Summer Special end --}}

    {{-- Pick Fresh, Eat Better start --}}
    <section class="category-products space-x user-select-none mb-5">
        <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">Pick Fresh, Eat Better</h2>
            </div>
            </div>
            <div class="col-6 col-md-6 col-lg-4 d-flex justify-content-end">
            <a href="{{ route('frontend.category') }}" 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>
    {{-- Pick Fresh, Eat Better end --}}

</section>
@endsection

@section('scripts')

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

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

<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