H                                                        /* Here to Start for copy */


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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    overflow-x:hidden;
    background:#fff;
    color:#222;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

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

/* =========================
   TOP CATEGORY SLIDER
========================= */

.top-bar{
    width:100%;
    background:#fff;
    border-bottom:1px solid #f1f1f1;
    overflow:hidden;
    white-space:nowrap;
    position:relative;
}

.top-slider{
    display:flex;
    align-items:center;
    gap:50px;
    padding:10px 0;
    animation: marquee 90s linear infinite;
    width:max-content;
}

.top-bar:hover .top-slider{
    animation-play-state:paused;
}

.slide-item{
    display:flex;
    align-items:center;
    gap:8px;
    color:#333;
    font-size:15px;
    font-weight:500;
    cursor:pointer;
    transition:.3s;
}

.slide-item i{
    color:#d97904;
    font-size:14px;
}

.slide-item:hover{
    color:#d97904;
}

@keyframes marquee{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}

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

.main-header{
    background:#fff;
    padding:18px 0;
}

.header-wrapper{
    max-width:1400px;
    margin:auto;
    padding:0 30px;

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

/* Search */

.search-area button{
    width:60px;
    height:60px;
    border:none;
    background:#fff;
    box-shadow:0 0 15px rgba(0,0,0,.08);
    cursor:pointer;
    transition:.3s;
}

.search-area button:hover{
    transform:translateY(-3px);
}

.search-area i{
    font-size:28px;
    color:#222;
}

/* Logo */

.logo-area img{
    height:90px;
    width:auto;
    object-fit:contain;
}

/* Cart */

.cart-area{
    display:flex;
    align-items:center;
    gap:15px;
}

.price{
    color:#798090;
    font-size:16px;
}

.cart-area a{
    position:relative;
    color:#777;
    font-size:26px;
}

.cart-count{
    position:absolute;
    top:-10px;
    right:-10px;

    width:20px;
    height:20px;

    border-radius:50%;
    background:#e53935;
    color:#fff;

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

    font-size:11px;
    font-weight:600;
}

/* =====================================================
   GLOBAL NAVIGATION RESET
===================================================== */


.navbar,
.navbar *{
    box-sizing:border-box;
}


.navbar{

    width:100%;

    background:#111;

    position:relative;

    z-index:9999;

    font-family:
    "Poppins",
    Arial,
    sans-serif;

}



.nav-container{

    max-width:1400px;

    margin:auto;

    padding:0 20px;

}





/* =====================================================
   MAIN MENU
===================================================== */


.nav-menu{

    list-style:none;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0;

    padding:0;

}



.nav-item{

    position:relative;

}





.nav-link{

    display:flex;

    align-items:center;

    gap:8px;

    padding:20px 28px;


    color:#fff;


    text-decoration:none;


    font-size:16px;

    font-weight:500;


    transition:.3s ease;


}



.nav-link i{

    font-size:12px;

}



.nav-link:hover,
.nav-link.active{


    color:#ff6b00;

}





/* underline animation */


.nav-link::after{


    content:"";


    position:absolute;


    bottom:8px;


    left:50%;


    width:0;


    height:3px;


    background:#ff6b00;


    transform:translateX(-50%);


    transition:.35s;



}



.nav-link:hover::after,
.nav-link.active::after{


    width:45%;


}






/* =====================================================
   MEGA MENU MAIN BOX
===================================================== */


.mega-menu{


    position:absolute;


    top:100%;


    left:30%;



    transform:
    translateX(-20%)
    translateY(30px);



    width:1250px;



    background:#fff;



    padding:35px;



    border-radius:

    0 0 18px 18px;



    box-shadow:

    0 20px 45px rgba(0,0,0,.18);



    opacity:0;


    visibility:hidden;



    transition:.35s ease;



}





.mega-parent:hover .mega-menu{


    opacity:1;


    visibility:visible;



    transform:

    translateX(-50%)

    translateY(0);



}





/* =====================================================
   MEGA SECTION
===================================================== */


.mega-section{


    margin-bottom:35px;



}




.mega-section h3{


    margin:0 0 30px;



    font-size:40px;


    color:#222;



    font-weight:700;



    position:relative;



    padding-bottom:20px;



}



.mega-section h3::after{


    content:"";


    position:absolute;


    left:0;


    bottom:0;


    width:60px;


    height:6px;


    background:#ff6b00;



}







/* =====================================================
   PRODUCT GRID
===================================================== */


.mega-products{


    display:grid;


    grid-template-columns:

    repeat(6,1fr);



    gap:18px;



}






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


.mega-product{


    text-decoration:none;



    background:#fff;



    border-radius:14px;



    overflow:hidden;



    border:

    1px solid #eee;



    transition:.35s ease;



    display:flex;



    flex-direction:column;



    align-items:center;



    padding-bottom:12px;



}






.mega-product img{


    width:100%;



    height:110px;



    object-fit:cover;



    transition:.4s ease;



}






.mega-product span{


    color:#333;



    font-size:14px;



    text-align:center;



    margin-top:12px;



    padding:0 5px;



    font-weight:500;



}






.mega-product:hover{


    transform:

    translateY(-8px);



    box-shadow:

    0 12px 25px rgba(0,0,0,.15);



    border-color:#ff6b00;



}






.mega-product:hover img{


    transform:scale(1.12);



}






.mega-product:hover span{


    color:#ff6b00;



}







/* =====================================================
   CATEGORY COLORS
===================================================== */



.fruits-menu .mega-product:hover{


    border-color:#4caf50;


}




.vegetables-menu .mega-product:hover{


    border-color:#2e7d32;


}







/* =====================================================
   VIEW ALL BUTTON
===================================================== */


.view-all,
.mega-footer a{


    display:inline-block;



    margin-top:20px;



    padding:12px 25px;



    background:#ff6b00;



    color:white;



    border-radius:25px;



    text-decoration:none;



    font-size:14px;



    font-weight:600;



    transition:.3s;



}



.view-all:hover,
.mega-footer a:hover{


    background:#111;



}







.mega-footer{


    text-align:center;



    margin-top:20px;



}








/* =====================================================
   SPECIAL LARGE MENU WIDTHS
===================================================== */


.fruits-menu,
.vegetables-menu{


    width:1300px;


}







/* =====================================================
   ANIMATION EFFECT
===================================================== */


.mega-product{


    opacity:0;


    animation:

    productFade .5s forwards;



}



.mega-parent:hover .mega-product{


    animation:

    productFade .5s forwards;



}





@keyframes productFade{


    from{


        opacity:0;


        transform:

        translateY(15px);



    }


    to{


        opacity:1;


        transform:

        translateY(0);



    }


}









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


@media(max-width:1200px){


    .mega-menu{


        width:95vw;


    }


    .mega-products{


        grid-template-columns:

        repeat(4,1fr);


    }


}





@media(max-width:900px){



    .nav-menu{


        flex-direction:column;


        align-items:flex-start;


    }




    .nav-link{


        width:100%;


    }



    .mega-menu{


        position:static;


        width:100%;


        transform:none;



        display:none;



    }




    .mega-parent:hover .mega-menu{


        display:block;


    }




    .mega-products{


        grid-template-columns:

        repeat(2,1fr);



    }



}






@media(max-width:500px){



    .mega-products{


        grid-template-columns:

        repeat(1,1fr);



    }



    .mega-product img{


        height:160px;


    }


}


.nav-menu > li > a{
    display:flex;
    align-items:center;
    gap:8px;

    color:#fff;
    padding:18px 28px;

    font-size:18px;
    font-weight:500;

    transition:.3s;
}

.nav-menu > li > a:hover{
    color:#ff6b00;
}

.nav-menu > li > a.active{
    color:#ff6b00;
}

                                                        /* Here to End for copy */
/* =========================
   HERO SECTION
========================= */

.hero-section{
    min-height:600px;

    background:
    linear-gradient(
    rgba(0,0,0,.55),
    rgba(0,0,0,.55)),
    url('https://i.pinimg.com/1200x/f6/3f/ae/f63fae36896c12dc47e7cd6a8c4530cf.jpg');

    background-size:cover;
    background-position:center;

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

.hero-content{
    text-align:center;
    color:#fff;
}

.hero-content h1{
    font-size:60px;
    font-weight:700;
    margin-bottom:20px;
}

.hero-content p{
    font-size:20px;
    margin-bottom:35px;
}

.hero-btn{
    display:inline-block;

    padding:15px 40px;

    background:#ff6b00;
    color:#fff;

    border-radius:5px;

    font-weight:600;

    transition:.3s;
}

.hero-btn:hover{
    transform:translateY(-5px);
    box-shadow:0 10px 25px rgba(255,107,0,.4);
}

/* =========================
   DROPDOWN ICON
========================= */

.nav-menu i{
    font-size:12px;
}

/* =========================
   SCROLL EFFECT
========================= */

.navbar.sticky{
    position:fixed;
    top:0;
    left:0;
    width:100%;

    animation:slideDown .4s ease;
}

@keyframes slideDown{
    from{
        transform:translateY(-100%);
    }

    to{
        transform:translateY(0);
    }
}

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

@media(max-width:1200px){

    .mega-menu{
        width:1000px;
    }
}

@media(max-width:992px){

    .header-wrapper{
        flex-direction:column;
        gap:20px;
    }

    .nav-menu{
        flex-wrap:wrap;
    }

    .mega-menu{
        width:90vw;
        left:50%;
        transform:translateX(-50%);
        flex-wrap:wrap;
    }

    .hero-content h1{
        font-size:42px;
    }
}

@media(max-width:768px){

    .nav-menu{
        flex-direction:column;
    }

    .nav-menu > li{
        width:100%;
    }

    .nav-menu > li > a{
        justify-content:center;
    }

    .mega-menu{
        position:static;
        width:100%;
        opacity:1;
        visibility:visible;
        display:none;
        transform:none;
    }

    .mega-parent:hover .mega-menu{
        display:flex;
    }

    .hero-content h1{
        font-size:34px;
    }

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

    .logo-area img{
        height:70px;
    }
}

@media(max-width:480px){

    .search-area button{
        width:50px;
        height:50px;
    }

    .search-area i{
        font-size:22px;
    }

    .hero-content h1{
        font-size:28px;
    }
}






/* JS Reveal Animation */

.hidden{
    opacity:0;
    transform:translateY(40px);
    transition:all .8s ease;
}

.show{
    opacity:1;
    transform:translateY(0);
}

/* Search Click Animation */

.search-click{
    animation:searchPulse .4s ease;
}

@keyframes searchPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(.9);
    }

    100%{
        transform:scale(1);
    }
}



/* =================================
   SECTION BACKGROUND
================================= */

.fresh-food-section{
    background:#a8f0a3;
    padding:60px 40px;
    text-align:center;
}

.fresh-food-section h2{
    font-size:58px;
    color:#006400;
    font-weight:900;
    margin-bottom:50px;
}

/* =================================
   TOP FOOD SLIDER
================================= */

.food-slider-section{
    background:#fff;
    overflow:hidden;
    border-top:1px solid #eee;
    border-bottom:1px solid #eee;
}

.food-slider-track{
    display:flex;
    gap:50px;
    width:max-content;
    padding:15px 0;
    animation:foodTicker 25s linear infinite;
}

.food-slide{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:18px;
    font-weight:500;
    color:#222;
}

.food-slide i{
    color:#ff8c00;
}

@keyframes foodTicker{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }
}

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

.food-grid{
    max-width:1300px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:40px 20px;
}

.food-card{
    transition:.4s;
    cursor:pointer;
}

.food-card:hover{
    transform:translateY(-10px);
}

.food-card img{
    width:140px;
    height:140px;
    object-fit:contain;
    margin:auto;

    animation:floatFruit 3s ease-in-out infinite;
}

.food-card h3{
    margin-top:15px;
    font-size:22px;
    color:#003d1f;
    font-weight:400;
}

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

.shop-btn{
    display:inline-block;

    margin-top:40px;

    padding:16px 50px;

    background:#ff9b38;
    color:#fff;

    border-radius:40px;

    font-size:18px;
    transition:.4s;
}

.shop-btn:hover{
    background:#ff7e00;
    transform:translateY(-5px);
}

/* =================================
   DIVIDER
================================= */

.fruit-divider{
    background:#a8f0a3;

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

    gap:20px;

    padding:20px 0;
}

.fruit-divider span{
    width:40%;
    height:1px;
    background:#4a7f4a;
}

.fruit-divider i{
    color:#b10000;
    font-size:34px;
}

/* =================================
   FLOAT ANIMATION
================================= */

@keyframes floatFruit{

    0%{
        transform:translateY(0px);
    }

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

    100%{
        transform:translateY(0px);
    }
}

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

@media(max-width:991px){

    .food-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .fresh-food-section h2{
        font-size:42px;
    }
}

@media(max-width:576px){

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

    .food-card img{
        width:100px;
        height:100px;
    }

    .fresh-food-section h2{
        font-size:32px;
    }
}



/* ====================================
   OUR CATEGORIES
==================================== */

.categories-section{
    background:#fff;
    padding:70px 0;
    overflow:hidden;
}

.section-line{
    width:85%;
    height:3px;
    border-top:3px double #111;
    margin:0 auto 50px;
}

.categories-title{
    text-align:center;
    font-size:58px;
    font-weight:900;
    color:#222;
    margin-bottom:50px;
}

.categoriesSwiper{
    width:100%;
    max-width:1300px;
    margin:auto;
    padding-bottom:60px;
}

.categoriesSwiper .swiper-slide{
    display:flex;
    justify-content:center;
}

.category-item{
    text-align:center;
    transition:.4s;
}

.category-circle{
    width:240px;
    height:240px;
    border-radius:50%;
    overflow:hidden;
    border:2px solid #111;
    margin:auto;
    background:#fff;
}

.category-circle img{
    object-fit: contain;
    padding:10px;
}

.category-circle img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.category-item:hover{
    transform:translateY(-8px);
}

.category-item:hover img{
    transform:scale(1.08);
}

.category-item h3{
    margin-top:15px;
    font-size:22px;
    font-weight:700;
    color:#111;
    line-height:1.2;
}

/* Pagination */

.categoriesSwiper .swiper-pagination{
    bottom:0 !important;
}

.categoriesSwiper .swiper-pagination-bullet{
    width:10px;
    height:10px;
    background:#d4d4d4;
    opacity:1;
}

.categoriesSwiper .swiper-pagination-bullet-active{
    background:#111;
}

/* Desktop */

@media(min-width:1200px){

    .categoriesSwiper .swiper-slide{
        width:auto !important;
    }
}

/* Tablet */

@media(max-width:991px){

    .categories-title{
        font-size:42px;
    }

    .category-circle{
        width:190px;
        height:190px;
    }
}

/* Mobile */

@media(max-width:576px){

    .categories-title{
        font-size:34px;
    }

    .category-circle{
        width:150px;
        height:150px;
    }

    .category-item h3{
        font-size:18px;
    }
}



/*==============================
        FEATURES SECTION
===============================*/

.features-section{

    max-width:1320px;
    margin:70px auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:25px;

    padding:0 20px;

}

.feature-box{

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

    background:#fff;

    padding:28px 25px;

    border-radius:12px;

    border:1px solid #ececec;

    transition:.35s ease;

    cursor:pointer;

    position:relative;

    overflow:hidden;

}

/* Orange Top Line */

.feature-box::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:0;

    height:4px;

    background:#ff6b00;

    transition:.4s;

}

.feature-box:hover::before{

    width:100%;

}

.feature-box:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.feature-icon{

    width:70px;
    height:70px;

    border-radius:50%;

    background:#fff4ec;

    color:#ff6b00;

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

    font-size:30px;

    transition:.4s;

}

.feature-box:hover .feature-icon{

    background:#ff6b00;

    color:#fff;

    transform:rotateY(180deg);

}

.feature-content h3{

    font-size:20px;

    color:#222;

    margin-bottom:6px;

    font-weight:700;

}

.feature-content p{

    color:#777;

    font-size:15px;

    line-height:24px;

}

/* Responsive */

@media(max-width:991px){

.features-section{

    grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.features-section{

    grid-template-columns:1fr;

}

}



/* ==========================
   TRENDING PRODUCTS
========================== */



/*



<!-- Product 13 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/green-chilli.avif" alt="Green Chilli">
</div>

<h3>
Fresh Green Chilli Wholesale – Premium Quality Green Chilli
</h3>

<p class="category">Vegetables</p>

<div class="price">
<span class="old-price">$5.99</span>
<span class="new-price">$4.49</span>
</div>

</div>

</a>


<!-- Product 14 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/cabbage.webp" alt="Cabbage">
</div>

<h3>
Fresh Cabbage Wholesale – Premium Farm Fresh Cabbage
</h3>

<p class="category">Vegetables</p>

<div class="price">
<span class="old-price">$5.99</span>
<span class="new-price">$4.50</span>
</div>

</div>

</a>


<!-- Product 15 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/cauliflower.webp" alt="Cauliflower">
</div>

<h3>
Fresh Cauliflower Wholesale – Premium Quality Cauliflower
</h3>

<p class="category">Vegetables</p>

<div class="price">
<span class="old-price">$6.99</span>
<span class="new-price">$5.49</span>
</div>

</div>

</a>


<!-- Product 16 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/cucumber.webp" alt="Cucumber">
</div>

<h3>
Fresh Cucumber Wholesale – Farm Fresh Premium Quality
</h3>

<p class="category">Vegetables</p>

<div class="price">
<span class="old-price">$5.49</span>
<span class="new-price">$4.25</span>
</div>

</div>

</a>


<!-- Product 17 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/peas.webp" alt="Peas">
</div>

<h3>
Fresh Green Peas Wholesale – Premium Quality Peas
</h3>

<p class="category">Vegetables</p>

<div class="price">
<span class="old-price">$7.99</span>
<span class="new-price">$6.49</span>
</div>

</div>

</a>


<!-- Product 18 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/spinach.jpeg" alt="Spinach">
</div>

<h3>
Fresh Spinach Wholesale – Healthy Green Leaf Vegetable
</h3>

<p class="category">Vegetables</p>

<div class="price">
<span class="old-price">$4.99</span>
<span class="new-price">$3.99</span>
</div>

</div>

</a>


<!-- Product 19 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/guava.jpg" alt="Guava">
</div>

<h3>
Fresh Guava Wholesale – Premium Quality Guava
</h3>

<p class="category">Fruits</p>

<div class="price">
<span class="old-price">$8.99</span>
<span class="new-price">$6.99</span>
</div>

</div>

</a>


<!-- Product 20 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/hoodie-sweatshirt.webp" alt="Hoodie Sweatshirt">
</div>

<h3>
Premium Hoodie / Sweatshirt Wholesale Collection
</h3>

<p class="category">Apparel & Clothing</p>

<div class="price">
<span class="old-price">$29.99</span>
<span class="new-price">$24.99</span>
</div>

</div>

</a>


<!-- Product 21 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/hoodie-jacket.webp" alt="Hoodie Jacket">
</div>

<h3>
Premium Hoodie Jacket Wholesale Fashion Wear
</h3>

<p class="category">Apparel & Clothing</p>

<div class="price">
<span class="old-price">$39.99</span>
<span class="new-price">$32.99</span>
</div>

</div>

</a>


<!-- Product 22 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/sweatshirt.jpeg" alt="Sweatshirt">
</div>

<h3>
Fashion Sweatshirt Wholesale – Premium Clothing
</h3>

<p class="category">Apparel & Clothing</p>

<div class="price">
<span class="old-price">$28.99</span>
<span class="new-price">$22.99</span>
</div>

</div>

</a>


<!-- Product 23 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/mint-leaves.jpg" alt="Mint Leaves">
</div>

<h3>
Fresh Mint Leaves Wholesale – Premium Quality Herbs
</h3>

<p class="category">Vegetables</p>

<div class="price">
<span class="old-price">$4.50</span>
<span class="new-price">$3.25</span>
</div>

</div>

</a>


<!-- Product 24 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/puffer-jacket.webp" alt="Puffer Jacket">
</div>

<h3>
Premium Puffer Jacket Wholesale – Winter Fashion Collection
</h3>

<p class="category">Apparel & Clothing</p>

<div class="price">
<span class="old-price">$45.99</span>
<span class="new-price">$38.99</span>
</div>

</div>

</a>


<!-- Product 25 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/puffer-jacket-2.webp" alt="Puffer Jacket">
</div>

<h3>
High Quality Puffer Jacket Wholesale – Premium Winter Wear
</h3>

<p class="category">Apparel & Clothing</p>

<div class="price">
<span class="old-price">$49.99</span>
<span class="new-price">$39.99</span>
</div>

</div>

</a>


<!-- Product 26 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/mango.webp" alt="Mango">
</div>

<h3>
Fresh Mango Wholesale – Premium Quality Mangoes
</h3>

<p class="category">Fruits</p>

<div class="price">
<span class="old-price">$13.99</span>
<span class="new-price">$11.99</span>
</div>

</div>

</a>


<!-- Product 27 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/mangoes.jpg" alt="Mangoes">
</div>

<h3>
Fresh Mangoes Wholesale – Export Quality Mangoes
</h3>

<p class="category">Fruits</p>

<div class="price">
<span class="old-price">$15.99</span>
<span class="new-price">$12.99</span>
</div>

</div>

</a>


<!-- Product 28 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/onion.webp" alt="Onion">
</div>

<h3>
Fresh Onion Wholesale – Premium Quality Onions
</h3>

<p class="category">Vegetables</p>

<div class="price">
<span class="old-price">$5.99</span>
<span class="new-price">$4.49</span>
</div>

</div>

</a>


<!-- Product 29 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/orange.jpg" alt="Orange">
</div>

<h3>
Fresh Orange Wholesale – Premium Citrus Fruits
</h3>

<p class="category">Fruits</p>

<div class="price">
<span class="old-price">$9.99</span>
<span class="new-price">$7.99</span>
</div>

</div>

</a>


<!-- Product 30 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/papaya.webp" alt="Papaya">
</div>

<h3>
Fresh Papaya Wholesale – Premium Quality Papaya
</h3>

<p class="category">Fruits</p>

<div class="price">
<span class="old-price">$8.99</span>
<span class="new-price">$6.99</span>
</div>

</div>

</a>


<!-- Product 31 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/pomegranate.webp" alt="Pomegranate">
</div>

<h3>
Fresh Pomegranate Wholesale – Premium Export Quality
</h3>

<p class="category">Fruits</p>

<div class="price">
<span class="old-price">$12.99</span>
<span class="new-price">$10.99</span>
</div>

</div>

</a>


<!-- Product 32 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/potatoes.jpg" alt="Potatoes">
</div>

<h3>
Fresh Potatoes Wholesale – Premium Farm Quality
</h3>

<p class="category">Vegetables</p>

<div class="price">
<span class="old-price">$5.99</span>
<span class="new-price">$4.99</span>
</div>

</div>

</a>


<!-- Product 33 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/formal-wear.jpeg" alt="Suits Formal Wear">
</div>

<h3>
Premium Suits / Formal Wear Wholesale Collection
</h3>

<p class="category">Apparel & Clothing</p>

<div class="price">
<span class="old-price">$89.99</span>
<span class="new-price">$74.99</span>
</div>

</div>

</a>


<!-- Product 34 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/fruit-basket.webp" alt="Fruit Basket">
</div>

<h3>
Fresh Fruit Basket Wholesale – Premium Market Display
</h3>

<p class="category">Fruits</p>

<div class="price">
<span class="old-price">$25.99</span>
<span class="new-price">$19.99</span>
</div>

</div>

</a>


<!-- Product 35 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/vegetable-basket.webp" alt="Vegetable Basket">
</div>

<h3>
Fresh Vegetable Basket / Market Display Collection
</h3>

<p class="category">Vegetables</p>

<div class="price">
<span class="old-price">$29.99</span>
<span class="new-price">$22.99</span>
</div>

</div>

</a>


<!-- Product 36 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/radish.webp" alt="Radish">
</div>

<h3>
Fresh Radish Wholesale – Premium Farm Fresh Quality
</h3>

<p class="category">Vegetables</p>

<div class="price">
<span class="old-price">$4.99</span>
<span class="new-price">$3.75</span>
</div>

</div>

</a>


<!-- Product 37 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/red-bell-pepper.jpg" alt="Red Bell Pepper">
</div>

<h3>
Fresh Red Bell Pepper / Capsicum Wholesale
</h3>

<p class="category">Vegetables</p>

<div class="price">
<span class="old-price">$8.99</span>
<span class="new-price">$6.99</span>
</div>

</div>

</a>


<!-- Product 38 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/green-grapes.webp" alt="Green Grapes">
</div>

<h3>
Fresh Green Grapes Wholesale – Premium Quality Grapes
</h3>

<p class="category">Fruits</p>

<div class="price">
<span class="old-price">$11.99</span>
<span class="new-price">$9.99</span>
</div>

</div>

</a>


<!-- Product 39 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/sweet-potato.webp" alt="Sweet Potato">
</div>

<h3>
Fresh Sweet Potato Wholesale – Premium Farm Quality
</h3>

<p class="category">Vegetables</p>

<div class="price">
<span class="old-price">$6.99</span>
<span class="new-price">$5.49</span>
</div>

</div>

</a>


<!-- Product 40 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/ladyfinger-okra.jpg" alt="Ladyfinger Okra">
</div>

<h3>
Fresh Ladyfinger / Okra Wholesale – Premium Quality
</h3>

<p class="category">Vegetables</p>

<div class="price">
<span class="old-price">$6.49</span>
<span class="new-price">$4.99</span>
</div>

</div>

</a>


<!-- Product 41 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/pumpkin.jpg" alt="Pumpkin">
</div>

<h3>
Fresh Pumpkin Wholesale – Premium Farm Fresh Quality
</h3>

<p class="category">Vegetables</p>

<div class="price">
<span class="old-price">$7.99</span>
<span class="new-price">$5.99</span>
</div>

</div>

</a>


<!-- Product 42 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/sponge-gourd.webp" alt="Sponge Gourd">
</div>

<h3>
Fresh Sponge Gourd Wholesale – Premium Quality Vegetable
</h3>

<p class="category">Vegetables</p>

<div class="price">
<span class="old-price">$5.99</span>
<span class="new-price">$4.49</span>
</div>

</div>

</a>


<!-- Product 43 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/tomato.webp" alt="Tomato">
</div>

<h3>
Fresh Tomato Wholesale – Premium Quality Tomatoes
</h3>

<p class="category">Vegetables</p>

<div class="price">
<span class="old-price">$5.99</span>
<span class="new-price">$4.25</span>
</div>

</div>

</a>


<!-- Product 44 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/trousers-sweatpants.webp" alt="Trousers Sweatpants">
</div>

<h3>
Premium Trousers / Sweatpants Wholesale Collection
</h3>

<p class="category">Apparel & Clothing</p>

<div class="price">
<span class="old-price">$32.99</span>
<span class="new-price">$26.99</span>
</div>

</div>

</a>


<!-- Product 45 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/trousers.webp" alt="Trousers">
</div>

<h3>
Fashion Trousers Wholesale – Premium Clothing Collection
</h3>

<p class="category">Apparel & Clothing</p>

<div class="price">
<span class="old-price">$35.99</span>
<span class="new-price">$29.99</span>
</div>

</div>

</a>


<!-- Product 46 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/t-shirt.webp" alt="T-Shirt">
</div>

<h3>
Premium T-Shirt Wholesale – High Quality Apparel
</h3>

<p class="category">Apparel & Clothing</p>

<div class="price">
<span class="old-price">$19.99</span>
<span class="new-price">$14.99</span>
</div>

</div>

</a>


<!-- Product 47 -->
<a href="products.html" class="product-link">

<div class="product-card">

<span class="sale-badge">Sale!</span>

<div class="product-image">
<img src="assets/images/products/turnip.webp" alt="Turnip">
</div>

<h3>
Fresh Turnip Wholesale – Premium Farm Fresh Quality
</h3>

<p class="category">Vegetables</p>

<div class="price">
<span class="old-price">$4.99</span>
<span class="new-price">$3.49</span>
</div>

</div>

</a>

*/









.trending-products{
    background:#fff;
    padding:70px 0;
}

.section-title{
    text-align:center;
    font-size:52px;
    font-weight:900;
    color:#222;
    margin-bottom:60px;
}

/* Grid */

.products-grid{
    width:90%;
    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px 20px;
}

/* Card */

.product-card{
    position:relative;
    transition:.4s ease;
}

.product-card:hover{
    transform:translateY(-6px);
}

/* Sale Badge */

.sale-badge{
    position:absolute;
    top:5px;
    right:5px;

    width:34px;
    height:34px;

    border-radius:50%;

    background:#ff9d3c;
    color:#000;

    font-size:11px;
    font-weight:500;

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

    z-index:2;
}

/* Product Image */

.product-image{
    overflow:hidden;
}

.product-image img{
    width:100%;
    height:260px;
    object-fit:contain;
    transition:.5s ease;
}

.product-card:hover img{
    transform:scale(1.06);
}

/* Product Title */

.product-card h3{
    margin-top:12px;
    font-size:18px;
    line-height:1.35;
    font-weight:500;
    color:#222;
}

/* Category */

.category{
    margin-top:10px;
    font-size:14px;
    color:#999;
}

/* Price */

.price{
    margin-top:8px;
    display:flex;
    gap:6px;
    align-items:center;
}

.old-price{
    color:#999;
    text-decoration:line-through;
    font-size:14px;
}

.new-price{
    color:#222;
    font-weight:600;
    font-size:16px;
}

/* Responsive */

@media(max-width:1200px){

    .products-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:768px){

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

    .section-title{
        font-size:38px;
    }
}

@media(max-width:480px){

    .products-grid{
        grid-template-columns:1fr;
    }
}

.product-card{
    opacity:0;
    transform:translateY(30px);
    animation:fadeUp .7s ease forwards;
}

.product-card:nth-child(2){animation-delay:.1s;}
.product-card:nth-child(3){animation-delay:.2s;}
.product-card:nth-child(4){animation-delay:.3s;}
.product-card:nth-child(5){animation-delay:.4s;}
.product-card:nth-child(6){animation-delay:.5s;}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(30px);
    }

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




/* ==========================
   FOLLOW BANNER
========================== */

.follow-banner{

    height:160px;

    background:
    linear-gradient(
    rgba(0,0,0,.35),
    rgba(0,0,0,.35)),
    url('https://i.pinimg.com/1200x/e6/39/b4/e639b4042af26cadc9610ab50c94ab15.jpg');

    background-size:cover;
    background-position:center;

    position:relative;

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

.follow-overlay{
    text-align:center;
}

.follow-overlay h2{
    color:#fff;
    font-size:20px;
    font-weight:600;
    margin-bottom:25px;
}

.follow-icons{
    display:flex;
    justify-content:center;
    gap:28px;
}

.follow-icons a{
    color:#fff;
    font-size:32px;
    transition:.3s;
}

.follow-icons a:hover{
    transform:translateY(-4px);
}

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

.main-footer{
    background:#fff;
    padding:50px 0 20px;
}

/* Top Row */

.footer-top{

    width:85%;
    margin:auto;

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

.footer-logo img{
    width:70px;
}

.footer-menu{

    display:flex;
    gap:35px;
}

.footer-menu a{

    color:#111;
    font-size:17px;
    font-weight:500;
    transition:.3s;
}

.footer-menu a:hover{
    color:#d97706;
}

.footer-social{

    display:flex;
    gap:25px;
}

.footer-social a{
    color:#111;
    font-size:24px;
}

/* Divider */

.footer-divider{

    width:85%;
    height:1px;

    background:#ddd;

    margin:35px auto;
}

/* Newsletter */

.newsletter-form{

    max-width:600px;
    margin:auto;

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:12px;
}

.newsletter-form input{

    height:42px;

    border:1px solid #ddd;
    border-radius:25px;

    padding:0 15px;

    outline:none;
}

.newsletter-form button{

    height:42px;

    border:none;

    background:#000;
    color:#fff;

    border-radius:25px;

    cursor:pointer;

    transition:.3s;
}

.newsletter-form button:hover{

    background:#222;
}

/* Copyright */

.copyright{

    text-align:center;

    margin-top:25px;

    color:#444;

    font-size:16px;
}


.follow-overlay{
    animation:fadeUp 1s ease;
}

.footer-top{
    animation:fadeUp 1.2s ease;
}

.newsletter-form{
    animation:fadeUp 1.4s ease;
}

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(40px);
    }

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



/*======================================================
                Products.htmi file code for [All Products] Section in it
======================================================*/

#pagination{
    display:flex;
    justify-content:center;
    gap:10px;
    margin:40px 0;
}

#pagination button{
    padding:10px 15px;
    border:none;
    background:#111;
    color:white;
    cursor:pointer;
}

#pagination button.active{
    background:#e91e63;
}