System: Windows NT WINDOWS18 10.0 build 17763 (Windows Server 2016) AMD64 | User: IWPD_3544(appclien)

Path: D:\Inetpub\vhosts\appclients.in\fruits-vegitables.nmvm.org

[Back to List]
<?php
   include "includes/main-action.php";
   $obj = new admin_main();
   $sel_cs = $obj->select_all("menu", "where status='Active' order by menu_id");
   //for mobile category
   $sel_cs_mobile = $obj->select_all("menu", "where status='Active' order by menu_id");
   //for products as type
   $sel_product_as_type = $obj->select_all("product", "where status='Active' group by pro_type order by pro_type desc");
   $sel_banner_top = $obj->select_all("adv_tbl1", "where status='Active' order by adv_id desc limit 2");
   $sel_banner_right = $obj->select_all("adv_tbl3", "where status='Active' order by adv_id desc limit 3");
   $sel_slider = $obj->select_all("adv_tbl2", "where status='Active' order by adv_id");
   $sel_subcat = $obj->select_all("subcategory", "where home_view='yes' order by subcat_id");
  
   //bottom banner
   $bottombanner = $obj->select_all("adv_tbl0", "where status='Active'");
   $bbannerData = mysqli_fetch_array($bottombanner);
   ?>
<!DOCTYPE html>
<html lang="en">
   <head>
      <title><?php include('title.php') ?> | Home</title>
      <meta charset="utf-8">
      <meta name="keywords" content="" />
      <meta name="description" content="" />
      <meta name="author" content="">
      <meta name="robots" content="index, follow" />
      <!-- Mobile specific metas
         ============================================ -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
      <link rel="shortcut icon" type="image/png" href="<?php echo $url ?>image/icon/favicon.png" />
      <!-- Libs CSS
         ============================================ -->
      <link rel="stylesheet" href="<?php echo $url ?>css/bootstrap/css/bootstrap.min.css">
      <link href="<?php echo $url ?>css/font-awesome/css/font-awesome.min.css" rel="stylesheet">
      <link href="<?php echo $url ?>js/datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
      <link href="<?php echo $url ?>js/owl-carousel/owl.carousel.css" rel="stylesheet">
      <link href="<?php echo $url ?>css/themecss/lib.css" rel="stylesheet">
      <link href="<?php echo $url ?>js/jquery-ui/jquery-ui.min.css" rel="stylesheet">
      <link href="<?php echo $url ?>js/minicolors/miniColors.css" rel="stylesheet">
      <script src="https://use.fontawesome.com/b6bf0fe64e.js"></script>
      <!-- Theme CSS
         ============================================ -->
      <link href="<?php echo $url ?>css/themecss/so_searchpro.css" rel="stylesheet">
      <link href="<?php echo $url ?>css/themecss/so_megamenu.css" rel="stylesheet">
      <link href="<?php echo $url ?>css/themecss/so-categories.css" rel="stylesheet">
      <link href="<?php echo $url ?>css/themecss/so-listing-tabs.css" rel="stylesheet">
      <link href="<?php echo $url ?>css/themecss/so-category-slider.css" rel="stylesheet">
      <link href="<?php echo $url ?>css/themecss/so-newletter-popup.css" rel="stylesheet">
      <link href="<?php echo $url ?>css/footer/footer2.css" rel="stylesheet">
      <link href="<?php echo $url ?>css/header/header2.css" rel="stylesheet">
      <link id="color_scheme" href="<?php echo $url ?>css/home2.css" rel="stylesheet">
      <link href="<?php echo $url ?>css/responsive.css" rel="stylesheet">
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
      <!-- Google web fonts
         ============================================ -->
      <style type="text/css">
         body {
         font-family: 'Poppins', sans-serif
         }
         .left-content-product .content-product-right .box-info-product .quantity .quantity-control {
         float: none;
         margin-top: 20px;
         }
         .products-list.grid .product-layout .product-item-container:hover .right-block .hide-cont,
         .products-list .product-grid .product-item-container:hover .right-block .hide-cont {
         visibility: visible;
         }
         .price {
         line-height: 0px;
         }
         .panel-title {
         border-bottom: 2px solid #ebebeb;
         display: inline-block;
         width: 100%;
         margin-top: 0;
         margin-bottom: 20px;
         font-size: 40px;
         color: #b55310;
         font-weight: 600;
         text-transform: capitalize;
         line-height: 35px;
         }
	.img-zoom {
     transition: transform 0.6s ease; /* slow smooth zoom */
    }
    .img-zoom:hover {
    transform: scale(1.1); /* zoom */
    } 
		  /*New*/
		/* Core Variables */
:root {
    --primary-yellow: #FFD644;
    /* Warmer, more vibrant yellow */
    --text-dark: #2c3e50;
    --text-brown: #5D4037;
    --accent-orange: #F57C00;
    --card-bg: #ffffff;
	  --primary-color: #d4832c;
    --bg-light: #fdf8e1;
    --text-muted: #777;
    --accent-yellow: #f1c40f;
    --soft-shadow: 0 20px 40px rgba(93, 64, 55, 0.08);
    /* Premium soft shadow */
    --hover-shadow: 0 25px 50px rgba(93, 64, 55, 0.15);
	 --bg-color: #FBF8F1;
    --card-bg: #FFFFFF;
    --accent-color: #D4A373;
    --primary-text: #3A2D28;
    --secondary-text: #7C6E6A;
    --button-bg: #8B4513;
    --button-hover: #6F370F;
    --shadow: 0 20px 40px rgba(58, 45, 40, 0.05);
	
}
		     /* Core Variables */
        :root {
            --primary-yellow: #FFD644;
            --text-dark: #2c3e50;
            --text-brown: #5D4037;
            --accent-green: #8bc34a;
            --soft-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            --bg-cream: #FFFDF5;
        }

body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
   /* background-color: #FFFDF5;*/
    /* Very subtle cream background */
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Merriweather', serif;
    /* Premium Serif */
    color: var(--text-brown);
}

/* Navbar Style Update */
.navbar-default {
    background-color: transparent;
    border-color: transparent;
    transition: all 0.3s;
}

.navbar-brand {
    font-family: 'Merriweather', serif;
    font-weight: 900;
    font-size: 28px;
    color: var(--text-brown) !important;
}

.navbar-nav>li>a {
    color: var(--text-brown) !important;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.5px;
}

.navbar-nav>.active>a,
.navbar-nav>.active>a:hover,
.navbar-nav>.active>a:focus {
    background-color: transparent;
    font-weight: 700;
}

.btn-contact {
    background-color: var(--text-brown);
    color: #fff !important;
    border-radius: 25px;
    padding: 8px 25px !important;
    margin-top: 5px;
    transition: transform 0.2s;
}

.btn-contact:hover {
    transform: translateY(-2px);
    background-color: #4e342e;
}

/* Hero Section */
.hero-section {
   background: radial-gradient(circle at 70% 30%, #7ba881, #65996c);
    padding-top: 60px;
    padding-bottom: 120px;
    /* Increased for torn paper effect space */
    position: relative;
    overflow: hidden;
    /* Changed to hidden to prevent scrollbars from floating elements */
}

/* Floating Elements - Adjusted for subtler premium feel */
.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.float-item {
    position: absolute;
    opacity: 0.6;
    /* More visible */
    filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.1));
}

.item-1 {
    top: 10%;
    left: 5%;
    font-size: 30px;
    animation: float 8s ease-in-out infinite;
    color: #6D4C41;
}

.item-2 {
    top: 50%;
    left: 2%;
    font-size: 24px;
    color: #c62828;
    animation: float 10s infinite reverse;
}

.item-3 {
    top: 15%;
    right: 10%;
    font-size: 40px;
    color: #2E7D32;
    animation: float 9s infinite;
}

.item-4 {
    top: 60%;
    right: 5%;
    width: 20px;
    height: 20px;
    background: #FF7043;
    border-radius: 50%;
    opacity: 0.8;
}

.display-flex {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.hero-text {
    z-index: 5;
    position: relative;
    padding-left: 15px;
}

.sub-title {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: var(--text-brown);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
    display: block;
    margin-bottom: 0px;
    opacity: 0.9;
}

.hero-text h1 {
    font-size: 72px;
    line-height: 1;
    color: #fff;
    margin-top: 0;
    margin-bottom: 6px;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.hero-text p {
    font-size: 18px;
    color: #fff;
    margin-bottom: 20px;
    max-width: 480px;
    font-weight: 500;
}

.custom-btn {
    background-color: #7d1116;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 18px 50px;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1px;
    box-shadow: 0 15px 30px rgba(93, 64, 55, 0.4);
    transition: all 0.3s;
}

.custom-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(93, 64, 55, 0.5);
    color: #fff;
    text-decoration: none;
}

.secondary-link {
    display: inline-block;
    margin-top: 20px;
    margin-left: 20px;
    color: var(--text-brown);
    font-size: 14px;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
    border-bottom: 1px solid transparent;
}

.secondary-link:hover {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #fff;
}

.hero-image {
    z-index: 2;
    text-align: center;
}

.image-wrapper {
    position: relative;
}

.main-fruit-img {
    max-width: 120%;
    /* Bursting out */
    width: 480px;
    margin-left: -5%;
    /* Center alignment correction */
    filter: drop-shadow(0 50px 70px rgba(62, 39, 35, 0.3));
    transform: rotate(-5deg);
    transition: transform 0.5s;
}

.main-fruit-img:hover {
    transform: rotate(0deg) scale(1.02);
}

/* Torn Edge Effect */
.custom-shape-divider-bottom-1 {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1 svg {
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
    /* Made substantial */
}

.custom-shape-divider-bottom-1 .shape-fill {
    fill: #FFFDF5;
    /* Match body bg */
}

/* Products / Features Section */
.section-head h2 {
    font-size: 42px;
    margin-bottom: 45px;
	margin-top: 0px;
	color: #5f8b6a;
}

.product-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid rgba(0, 0, 0, 0.02);
    position: relative;
    top: 0;
    margin-bottom: 30px;
}

.product-card:hover {
    top: -10px;
    box-shadow: var(--hover-shadow);
}

.product-img-wrapper {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    position: relative;
}

.product-img {
    max-height: 160px;
    max-width: 90%;
    filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s;
}

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

.product-card h3 {
    font-size: 24px;
    font-family: 'Merriweather', serif;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.product-desc {
    font-size: 14px;
    color: #7f8c8d;
    margin-bottom: 20px;
}

.product-card .price {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--text-dark);
    display: block;
    margin-bottom: 0px;
}

.badge-yellow {
    background-color: var(--primary-yellow);
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-brown);
}

.btn-add {
    background-color: var(--primary-yellow);
    color: var(--text-brown);
    border: none;
    border-radius: 30px;
    padding: 10px 35px;
    font-weight: 600;
    transition: all 0.3s;
    text-decoration: none;
    display: inline-block;
}

.btn-add:hover {
    background-color: #FFCA28;
    box-shadow: 0 5px 15px rgba(255, 213, 79, 0.4);
    text-decoration: none;
    color: var(--text-brown);
}

/* Juice Preview Section */
.juice-section {
    padding: 80px 0;
    background-color: #FFFDF5;
}

.juice-card {
    background-color: #FFF8E1;
    /* Light yellow tint */
    border-radius: 25px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.juice-text h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.juice-img {
    height: 300px;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15));
}

/* Map / Contact Strip (Simplified from footer) */
.contact-strip {
    text-align: center;
    padding: 50px 0;
    color: var(--text-brown);
    font-family: 'Merriweather', serif;
    font-size: 24px;
}

/* Animations */
@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

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

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

/* Responsive */
@media (max-width: 991px) {
    .container {
        width: 100%;
        padding: 0 20px;
    }

    .hero-text {
        text-align: center;
        padding: 0;
    }

    .hero-text h1 {
        font-size: 48px;
    }

    .main-fruit-img {
        width: 80%;
        margin: 40px auto 0;
        display: block;
    }

    .display-flex {
        display: block;
    }

    .juice-card {
        display: block;
        text-align: center;
    }

    .juice-img {
        margin-top: 30px;
        height: 200px;
    }
}
		  h1 {
  font-size: 35px;
			  margin-bottom: 22px;
}
@media (max-width: 991px) {
  h1 {
    font-size: 26px;
	  margin-bottom: 22px;
  }
}
@media (max-width: 575px) {
  h1 {
    font-size: 20px;
	  margin-bottom: 22px;
  }
	.offer-card {
    margin-top: 14px !important;
	}
	.offers-section {
    padding: 20px 0 !important;
	}
	.services-strip {
    padding: 40px 0;
    border-top: 1px solid #f0f0f0;
    margin-top: 20px;
}
	.service-item {
    margin-bottom: 20px;
}
	.col-xs-4 {
    padding: 0 6px;
}
}
/* Service Strip (Icons below banners) */
.services-strip {
    padding: 50px 0;
    border-top: 1px solid #f0f0f0;
    margin-top: 60px;
		  }

.service-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.service-icon-box {
    width: 60px;
    height: 60px;
    border: 2px solid #c92a3e;
    /* Green border */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c92a3e;
    font-size: 24px;
}

.service-text h5 {
    font-weight: 700;
    margin: 0 0 5px;
    color: var(--text-dark);
    font-size: 16px;
    text-transform: uppercase;
}

.service-text p {
    margin: 0;
    color: #999;
    font-size: 13px;
    line-height: 1.4;
}

.btn-add:hover {
    background-color: #FFCA28;
    box-shadow: 0 5px 15px rgba(255, 213, 79, 0.4);
    text-decoration: none;
    color: var(--text-brown);
}

/* Juice Preview Section */
.juice-section {
    padding: 80px 0;
    background-color: #FFFDF5;
}

.juice-card {
    background-color: #FFF8E1;
    /* Light yellow tint */
    border-radius: 25px;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.juice-text h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.juice-img {
    height: 300px;
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15));
}

/* Map / Contact Strip (Simplified from footer) */
.contact-strip {
    text-align: center;
    padding: 50px 0;
    color: var(--text-brown);
    font-family: 'Merriweather', serif;
    font-size: 24px;
}

/* Animations */
@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

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

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

/* Responsive */
@media (max-width: 991px) {
    .container {
        width: 100%;
        padding: 0 20px;
    }

    .hero-text {
        text-align: center;
        padding: 0;
    }

    .hero-text h1 {
        font-size: 48px;
    }

    .main-fruit-img {
        width: 80%;
        margin: 40px auto 0;
        display: block;
    }

    .display-flex {
        display: block;
    }

    .juice-card {
        display: block;
        text-align: center;
    }

    .juice-img {
        margin-top: 30px;
        height: 200px;
    }
}
		  /* Products /* Reference Matched Offers Section */
/* Special Offers Section */
.offers-section {
    padding: 40px 0;
    position: relative;
    background: linear-gradient(to bottom, rgb(243 235 212 / 42%) 0%, rgba(243, 235, 212, 0) 100%);
}

.offer-card {
    border-radius: 20px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    margin-top: 30px;
    cursor: pointer;
    min-height: 220px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Overlay removed as requested - Image contains the background color/design */

.offer-card:hover {
    transform: translateY(-5px);
}

/* Background Images mimicking "Color + Fruit" */
.offer-organic {
    /* Raspberry Theme */
    background-image: url('https://images.unsplash.com/photo-1620916566398-39f1143ab7be?auto=format&fit=crop&w=800&q=80');
    /* Fallback/Loading Color */
    background-color: #E57373;
}

.offer-fresh {
    /* Peach Theme */
    background-image: url('https://images.unsplash.com/photo-1595123550441-d377e017de6a?auto=format&fit=crop&w=800&q=80');
    background-color: #FDD835;
}

.offer-sweet {
    /* Apple Theme */
    background-image: url('https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?auto=format&fit=crop&w=800&q=80');
    background-color: #81C784;
}

.offer-content {
    width: 65%;
    z-index: 2;
    position: relative;
    /* Adding subtle text shadow for readability since overlay is gone */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.offer-title {
    font-family: 'Merriweather', serif;
    font-size: 28px;
    color: #fff;
    /* White Text */
    margin-bottom: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.offer-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    /* White transparent */
    margin-bottom: 0;
    line-height: 1.5;
    font-family: 'Poppins', sans-serif;
    font-style: italic;
}

.offer-tag-text {
    display: block;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 5px;
    letter-spacing: 1px;
    opacity: 0.9;
}

.offer-img-container {
    display: none;
    /* User asked for background image only, so hiding the floaty one */
}

.offer-img {
    max-width: 130%;
    max-height: 110%;
    filter: drop-shadow(-10px 10px 20px rgba(0, 0, 0, 0.2));
    transition: transform 0.4s;
}

.offer-card:hover .offer-img {
    transform: scale(1.05) rotate(-5deg);
}

/* Removing old specific styles */
.price-row,
.btn-grab,
.offer-tag {
    display: none;
}
		  .wavy-bottom {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #f8fefa;
    clip-path: polygon(0% 100%, 100% 100%, 100% 0%, 98% 10%, 95% 35%, 90% 45%, 85% 30%, 80% 10%, 75% 15%, 70% 40%, 65% 55%, 60% 35%, 55% 15%, 50% 25%, 45% 45%, 40% 60%, 35% 40%, 30% 20%, 25% 30%, 20% 50%, 15% 65%, 10% 45%, 5% 25%, 0% 40%);
}


.info-block {
    /*background-color: #fff;
    border-radius: 20px;
    padding: 30px;
    border: 1px solid #f0f0f0;*/
}
		  /* Product Cards */
.product-card {
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    margin-bottom: 30px;
    border:0.5px solid #c1c1c142;
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
}

.product-card img {
    margin-bottom: 20px;
    border-radius: 15px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.price {
    font-weight: 700;
    font-size: 18px;
}
.product-card h4 {
    font-weight: 700;
    margin: 15px 0 5px;
}

.product-card p {
    color: var(--text-muted);
    font-size: 14px;
}

.price-row .btn-primary {
   background-color: var(--accent-yellow);
    color: #444;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    padding: 10px 12px;
}	  
.product-grid h4{
     font-size:22px;
	}
.product-grid {
   padding: 70px 0px 0px;
}

        .flex-center {
            display: flex;
            align-items: center;
        }

        @media (max-width: 991px) {
            .flex-center {
                flex-direction: column;
                text-align: center;
                margin-bottom: 40px;
            }

            .bowl-image,
            .icon-art {
                margin-right: 0 !important;
                margin-bottom: 20px;
            }

            .split-text {
                margin: 0 auto;
            }
        }

       .bowl-image {
    /* width: 200px; */
    /* height: 200px; */
    /* border-radius: 50%; */
    object-fit: cover;
    /* box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); */
    margin-right: 25px;
}

        .orange-label {
            color: var(--primary-color);
            font-weight: 700;
            font-size: 13px;
            text-transform: uppercase;
            margin-bottom: 5px;
            display: block;
        }

        .split-title {
               /* font-family: 'Passion One', cursive; */
    font-size: 42px;
    margin: 0 0 22px;
   color: #5f8b6a;
    line-height: 1;
        }

        .split-text {
            color: var(--text-muted);
            font-size: 14px;
            line-height: 1.5;
        }

        /* Vertical Divider for Desktop */
        @media (min-width: 992px) {
            .divider-col {
                position: relative;
            }

            .divider-col::after {
                content: '';
                position: absolute;
                right: -1px;
                top: 20%;
                height: 60%;
                width: 1px;
                border-right: 2px dotted #e0e0e0;
            }
        }

        .icon-art {
            width: 80px;
            margin-right: 25px;
        }

        .right-content {
            flex: 1;
        }
		 .premium-card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 40px;
    box-shadow: var(--shadow);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    height: 100%;
}

.premium-card:hover {
    transform: translateY(-5px);
}

/* Left Card: Info & Brand */
.info-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.brand-name {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-icon {
    width: 40px;
    height: 40px;
    background: var(--accent-color);
    border-radius: 50%;
    display: inline-block;
}

.bullet-list {
    list-style: none;
    margin-top: 30px;
}

.bullet-item {
   display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
    font-size: 1.5rem;
    color: var(--secondary-text);
}

.bullet-item i {
    color: var(--accent-color);
}

.fruit-decoration {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 150px;
    opacity: 0.9;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}

.bottom-info {
   display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 16px;
    padding-top: 28px;
    border-top: 2px dotted #e0e0e0;
}

.bottom-info img {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
}

/* Right Card: Hero Showcase */
.hero-card {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, #ffffff 0%, #FBF8F1 100%);
}

.hero-content {
   <!--- flex: 1;--->
    padding-right: 40px;
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.1;
    margin-bottom: 30px;
}

.cta-button {
    background: var(--button-bg);
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(139, 69, 19, 0.2);
}

.cta-button:hover {
    background: var(--button-hover);
    transform: scale(1.05);
    box-shadow: 0 15px 30px rgba(139, 69, 19, 0.3);
}

.product-image-container {
    flex: 1.2;
    display: flex;
    justify-content: center;
    position: relative;
}

.main-product-img {
    width: 70%;
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.15));
    animation: float 6s ease-in-out infinite;
}

@keyframes float {

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

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

/* Wavy Header Element */
.wavy-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: #FFF9EF;
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
}

@media (max-width: 991.98px) {
    .premium-card {
        padding: 30px 20px;
    }

    .hero-card {
        text-align: center;
    }

    .hero-content {
        padding-right: 0;
        margin-bottom: 40px;
    }

    .fruit-decoration {
        width: 100px;
    }
} 
	
		    /* Categories Section */
        .categories-section {
            padding: 60px 0;
            background-color: #fff;
            position: relative;
            /* Above other content */
        }

        .category-grid {
            display: flex;
            justify-content: center;
            gap: 50px;
            flex-wrap: wrap;
            margin-top: 20px;
        }

        .category-item {
            text-align: center;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            width: 160px;
            position: relative;
        }

        .cat-img-wrapper {
            position: relative;
            width: 150px;
            height: 140px;
            margin: 0 auto 15px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Organic Background Shape */
        .cat-bg-shape {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 150px;
            height: 150px;
            background-color: #e2f3e4;
            /* More visible soft green */
            border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
            transition: all 0.6s ease;
            z-index: 1;
            opacity: 0.8;
        }

        /* Decorative Leaf Accents */
        .cat-img-wrapper::before,
        .cat-img-wrapper::after {
            content: '';
            position: absolute;
            background-color: #73a27a;
            /* Prominent green for accents */
            border-radius: 50% 0 50% 0;
            z-index: 3;
            /* Above shape and image */
            transition: all 0.4s ease;
        }

        .cat-img-wrapper::before {
            width: 18px;
            height: 28px;
            top: 5px;
            right: 15px;
            transform: rotate(25deg);
        }

        .cat-img-wrapper::after {
            width: 12px;
            height: 20px;
            top: 25px;
            right: 5px;
            transform: rotate(55deg);
        }

        .cat-img-box {
            width: 120px;
            height: 120px;
            margin: 0;
            overflow: visible;
            transition: all 0.4s ease;
            z-index: 2;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .cat-img-box img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.15));
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .category-item span {
            font-weight: 700;
            color: #222;
            font-size: 16px;
            display: block;
            margin-top: 10px;
            font-family: 'Poppins', sans-serif;
        }
		  @media (max-width: 576px) {
    .cat-bg-shape {
        width: 80px;
        height: 80px;
        opacity: 0.6;
    }
			  
			  .cat-img-wrapper {
    position: relative;
    width: 90px;
    height: 100px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cat-img-wrapper::before {
    width: 14px;
    height: 22px;
    top: 6px;
    right: 10px;
    transform: rotate(25deg);
}
			  .category-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
}
}


        /* Hover Effects */
        .category-item:hover .cat-bg-shape {
            transform: translate(-50%, -50%) scale(1.1) rotate(15deg);
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            background-color: #c8e6c9;
        }

        .category-item:hover .cat-img-box img {
            transform: translateY(-10px) scale(1.1);
        }

        /* Active State */
        .category-item.active .cat-bg-shape {
            background-color: #a5d6a7;
            opacity: 1;
            transform: translate(-50%, -50%) scale(1.05);
            border-radius: 50%;
            /* More circular when active */
        }

        .category-item.active span {
            color: #2e7d32;
        }

        /* Category Specific Colors */
        .category-item[data-category="all"] .cat-bg-shape {
            background-color: #e8f5e9;
        }

        .category-item[data-category="red"] .cat-bg-shape {
            background-color: #e8f5e9;
        }

        .category-item[data-category="red"].active .cat-bg-shape {
            background-color: #e8f5e9;
        }

        .category-item[data-category="golden"] .cat-bg-shape {
            background-color: #e8f5e9;
        }

        .category-item[data-category="golden"].active .cat-bg-shape {
            background-color: #e8f5e9;
        }

        .category-item[data-category="pink"] .cat-bg-shape {
            background-color: #e8f5e9;
        }

        .category-item[data-category="pink"].active .cat-bg-shape {
            background-color: #e8f5e9;
        }

        .category-item[data-category="lal"] .cat-bg-shape {
            background-color: #e8f5e9;
        }

        .category-item[data-category="lal"].active .cat-bg-shape {
            background-color: #e8f5e9;
        }
	
.about-image .text-center {
    background: #699b70;
    border-radius: 50px;
    border-radius: 20px;
}
		  
/* Product Filtering Styles */
.product-item {
    transition: all 0.4s ease;
}

.product-item.hidden {
    display: none !important;
    opacity: 0;
}

.product-item.fade-in {
    animation: fadeInScale 0.4s ease forwards;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
.product-card h4 {
   font-size:22px;
}
		  .about-section{
			  padding: 60px 0;
   
		  }
		  .features-section{
			   padding: 0px 0px 50px 0px;
		  }
		  
		   /* Gallery Section */
        .gallery-section {
            padding: 60px 0;
        }

        .gallery-title {
            text-align: center;
            margin-bottom: 50px;
        }

        .gallery-grid {
            display: flex;
            flex-wrap: wrap;
            margin: -10px;
        }

        .gallery-item {
            padding: 10px;
            width: 25%;
            transition: all 0.4s ease;
        }

        .gallery-box {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            aspect-ratio: 4/3;
            box-shadow: var(--soft-shadow);
        }

        .gallery-box img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .gallery-box:hover img {
            transform: scale(1.1);
        }

        /* Filtering Visibility */
        .product-item.hidden,
        .gallery-item.hidden {
            display: none !important;
            opacity: 0;
        }

        .fade-in {
            animation: fadeIn 0.5s ease forwards;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

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

        @media (max-width: 768px) {
            .gallery-item {
                width: 50%;
            }
        }

        @media (max-width: 480px) {
            .gallery-item {
                width: 100%;
            }

            .category-item {
                width: 80px;
            }

            .cat-img-box {
                width: 50px;
                height: 50px;
            }
        }
.about-section .cat-img-wrapper {
    position: relative;
    width: 280px;
    height: 270px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
		  .about-section .cat-bg-shape {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background-color: #e2f3e4;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transition: all 0.6s ease;
    z-index: 1;
    opacity: 0.8;
}
 .about-section .cat-img-box {
    width: 250px; 
    height: 250px; 
    margin: 0;
    overflow: visible;
    transition: all 0.4s ease;
    z-index: 2;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
		  @media (max-width: 576px) {
			  .about-section .cat-img-wrapper {
    margin-top: 60px !important;
}
	 }
  </style>
   </head>
   <body class="common-home res layout-2" style="">
      <div id="wrapper" class="wrapper-fluid banners-effect-7" style="overflow-x: hidden;">
         <!-- Header Container  -->
         <?php include "includes/topbar.php"; ?>
         <!-- //Header Top -->
         <!-- Header center -->
         <?php include "includes/searchbar.php"; ?>
         <!-- //Header center -->
         <!-- Header Bottom -->
         <?php include "includes/navbar.php"; ?>
         </header>
         <!-- //Header Container  -->
         <!-- Main Container  -->
         <div class="main-container">
            <div class="row box-content1">
               <!-- Start HEAD section -->
               <link rel="stylesheet" type="text/css" href="engine1/style.css" />
               <script type="text/javascript" src="engine1/jquery.js"></script>
               <!-- End HEAD section -->
				
				 <!-- Hero Section -->
    <section class="hero-section">
        <!-- Floating Background Elements -->
        <div class="floating-elements">
            <!-- Leaf -->
            <i class="fa fa-leaf float-item item-1"></i>
            <!-- Berry -->
            <i class="fa fa-circle float-item item-2"></i>
            <!-- Branch -->
            <i class="fa fa-pagelines float-item item-3"></i>
            <!-- Abstract Circle -->
            <div class="float-item item-4"></div>
        </div>

        <div class="container">
            <div class="row" style="align-items: center;">
                <div class="col-md-6 hero-text" style="margin-top:32px">
                    <h1>Organic <br>  Apple at Your Farm</h1>
                    <!-- Keeping the slightly seemingly nonsensical but premium text from reference, or English equivalent -->
                    <p>Discover the taste of nature with our hand-picked selection of organic berries and fruits.
                        Freshly sourced for your healthy lifestyle.</p>
                    <a href="#" class="btn custom-btn">Enquire Now</a>
                </div>
				
                <div class="col-md-6 hero-image">
                    <div class="image-wrapper">
                        <!-- Using the previous image as it's a good bowl of berries -->
                        <img src="image/apples.png"
                            alt="apples" class="img-responsive main-fruit-img" style="">
                    </div>
                </div>
            </div>
        </div>
		 <div class="wavy-bottom"></div>
        <!-- Torn Paper Effect -->
       <!--- <div class="custom-shape-divider-bottom-1">
          <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"
                preserveAspectRatio="none">
                <path
                    d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
                    class="shape-fill"></path>
            </svg>
        </div>--->
    </section>
				
	<!-- Categories Section (Filtering Controls) -->
    <section class="categories-section">
        <div class="container">
			 <div class="section-head text-center">
                <h2>Categories</h2>
            </div>
            <div class="category-grid">
                <div class="category-item active" data-category="all">
                    <div class="cat-img-wrapper">
                        <div class="cat-bg-shape"></div>
                        <div class="cat-img-box">
                            <img src="image/cat-apple.png" alt="All">
                        </div>
                    </div>
                    <span>All Products</span>
                </div>
                <div class="category-item" data-category="red">
                    <div class="cat-img-wrapper">
                        <div class="cat-bg-shape"></div>
                        <div class="cat-img-box">
                            <img src="image/cat-apple.png" alt="Red">
                        </div>
                    </div>
                    <span>Red Delicious</span>
                </div>
                <div class="category-item" data-category="golden">
                    <div class="cat-img-wrapper">
                        <div class="cat-bg-shape"></div>
                        <div class="cat-img-box">
                            <img src="image/cat-apple.png" alt="Golden">
                        </div>
                    </div>
                    <span>Golden Apples</span>
                </div>
                <div class="category-item" data-category="pink">
                    <div class="cat-img-wrapper">
                        <div class="cat-bg-shape"></div>
                        <div class="cat-img-box">
                            <img src="image/cat-apple.png" alt="Pink">
                        </div>
                    </div>
                    <span>Pink Lady</span>
                </div>
                <div class="category-item" data-category="lal">
                    <div class="cat-img-wrapper">
                        <div class="cat-bg-shape"></div>
                        <div class="cat-img-box">
                            <img src="image/cat-apple.png" alt="Lal">
                        </div>
                    </div>
                    <span>Lal Ambri</span>
                </div>
            </div>
        </div>
    </section>
				
		 <!-- Product Grid Section -->
    <section class="features-section" id="products">
        <div class="container">
            <div class="section-head text-center">
                <h2> Products</h2>
            </div>
            <div class="row product-row">
                <!-- Product 1 (Red) -->
                <div class="col-md-3 product-item" data-category="red">
                     <div class="product-card">
                        <img src="https://fruits-vegitables.nmvm.org/image/product/60c39109a77745fa16d643ccde43003f.png" alt="Tomatoes" class="img-responsive">
                        <h4>Sirgt Iderrive</h4>
                        <p>1 Kg</p>
                        <div class="price-row">
                            <span class="price">₹12.45</span>
                            <a href="#" class="btn btn-xs btn-primary">Add to Cart</a>
                        </div>
                    </div>
                </div>
                <!-- Product 2 (Golden) -->
                <div class="col-md-3 product-item" data-category="golden">
                     <div class="product-card">
                        <img src="https://fruits-vegitables.nmvm.org/image/product/60c39109a77745fa16d643ccde43003f.png" alt="Tomatoes" class="img-responsive">
                        <h4>Sirgt Iderrive</h4>
                        <p>Half Kg</p>
                        <div class="price-row">
                            <span class="price">₹12.45</span>
                            <a href="#" class="btn btn-xs btn-primary">Add to Cart</a>
                        </div>
                    </div>
                </div>
                <!-- Product 3 (Pink) -->
                <div class="col-md-3 product-item" data-category="pink">
                     <div class="product-card">
                        <img src="https://fruits-vegitables.nmvm.org/image/product/60c39109a77745fa16d643ccde43003f.png" alt="Tomatoes" class="img-responsive">
                        <h4>Sirgt Iderrive</h4>
                        <p>1 Kg</p>
                        <div class="price-row">
                            <span class="price">₹12.45</span>
                            <a href="#" class="btn btn-xs btn-primary">Add to Cart</a>
                        </div>
                    </div>
                </div>
                <!-- Product 4 (Lal) -->
                <div class="col-md-3 product-item" data-category="lal">
                     <div class="product-card">
                        <img src="https://fruits-vegitables.nmvm.org/image/product/60c39109a77745fa16d643ccde43003f.png" alt="Tomatoes" class="img-responsive">
                        <h4>Sirgt Iderrive</h4>
                        <p>Half Kg</p>
                        <div class="price-row">
                            <span class="price">₹12.45</span>
                            <a href="#" class="btn btn-xs btn-primary">Add to Cart</a>
                        </div>
                    </div>
                </div>
                <!-- Product 5 (Red) -->
                <div class="col-md-3 product-item" data-category="red">
                     <div class="product-card">
                        <img src="https://fruits-vegitables.nmvm.org/image/product/60c39109a77745fa16d643ccde43003f.png" alt="Tomatoes" class="img-responsive">
                        <h4>Sirgt Iderrive</h4>
                        <p>1 Kg</p>
                        <div class="price-row">
                            <span class="price">₹12.45</span>
                            <a href="#" class="btn btn-xs btn-primary">Add to Cart</a>
                        </div>
                    </div>
                </div>
                <!-- Product 6 (Golden) -->
                <div class="col-md-3 product-item" data-category="golden">
                    <div class="product-card">
                        <img src="https://fruits-vegitables.nmvm.org/image/product/60c39109a77745fa16d643ccde43003f.png" alt="Tomatoes" class="img-responsive">
                        <h4>Sirgt Iderrive</h4>
                        <p>Half Kg</p>
                        <div class="price-row">
                            <span class="price">₹12.45</span>
                            <a href="#" class="btn btn-xs btn-primary">Add to Cart</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
				
	<!-- About Us Section -->
    <section class="about-section">
        <div class="container">
			  <div class="row">
				    <div class="col-lg-6">
                <div class="about-text">
                        <h2 class="split-title">About Us</h2>
                        <p class="split-text">Apple Inc. ek world-leading technology company hai jo innovative products aur premium digital experiences ke liye jaani jaati hai. 1976 me establish hui Apple ne technology industry ko redefine kiya hai apne revolutionary products jaise iPhone, iPad, Mac, Apple Watch, AirPods aur powerful software ecosystem ke through.</p>
					<p class="split-text">Apple ka focus hamesha design, performance, privacy aur user experience par raha hai. Har product advanced technology aur elegant design ka perfect combination hota hai.</p>
				
                </div>
				</div>
				    <div class="col-lg-6">
						<div class="cat-img-wrapper">
                        <div class="cat-bg-shape"></div>
                        <div class="cat-img-box">
                            <img src="image/apples.png" alt="Red">
                        </div>
                    </div>
            </div>
				 
			</div>
        </div>
    </section>

    <!-- Gallery Section -->
    <section class="gallery-section">
        <div class="container">
             <div class="section-head text-center">
                <h2>Gallery</h2>
            </div>
			
            <div class="gallery-grid" id="gallery-grid">
                <!-- Red Gallery -->
                <div class="gallery-item fade-in" data-category="red">
                    <div class="gallery-box">
                        <img src="https://images.unsplash.com/photo-1570913149827-d2ac84ab3f9a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
                            alt="Red Apple">
                    </div>
                </div>
				 <!-- Red Gallery -->
                <div class="gallery-item fade-in" data-category="red">
                    <div class="gallery-box">
                        <img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
                            alt="Red Apple">
                    </div>
                </div>
                <!-- Golden Gallery -->
                <div class="gallery-item fade-in" data-category="golden">
                    <div class="gallery-box">
                        <img src="https://images.unsplash.com/photo-1590004953392-5aba2e72269a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
                            alt="Golden Apple">
                    </div>
                </div>
                <!-- Pink Gallery -->
                <div class="gallery-item fade-in" data-category="pink">
                    <div class="gallery-box">
                        <img src="https://images.unsplash.com/photo-1512149177596-f817c7ef5d4c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80"
                            alt="Pink Apple">
                    </div>
                </div>
            </div>
        </div>
    </section>

       <!-- Start BODY section -->
           <!---    <div id="wowslider-container1" style="margin-top:-5px;">
                  <div class="ws_images">
                     <ul>
                        <?php $b = 1;
                           while ($result4 = mysqli_fetch_array($sel_slider)) { ?>
                        <li><a href="<?php echo $url ?>"><img src="image/banner_top/<?php echo $result4['img'] ?>" alt="18" title="" id="wows1_<?php echo $b ?>" /></a></li>
                        <?php $b++;
                           } ?>
                     </ul>
                  </div>
                  <div class="ws_shadow"></div>
               </div>--->
               <script type="text/javascript" src="engine1/wowslider.js"></script>
               <script type="text/javascript" src="engine1/script.js"></script>
               <!-- End BODY section -->
            </div>
            <div id="content">
			   <!---	
               <div class="container">
                  <div class="row box-content1">
                     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div id="so_categories_16425506561529398732" class="so-categories module custom-slidercates" style="margin-top:15px">
                           <div class="modcontent">
                              <div class="yt-content-slider cat-wrap" data-rtl="yes" data-autoplay="no" data-autoheight="no" data-delay="4" data-speed="0.6" data-margin="15" data-items_column00="4" data-items_column0="4" data-items_column1="4" data-items_column2="3" data-items_column3="2" data-items_column4="1" data-arrows="yes" data-pagination="no" data-lazyload="yes" data-loop="no" data-hoverpause="yes">
                                 <?php while ($resul1 = mysqli_fetch_array($sel_cs)) { ?>
                                 <div class="content-box">
                                    <div class="image-cat"><a href="<?php echo $url ?>customresult.php?catid=<?php echo $resul1['menu_id'] ?>"><img src="<?php echo $url ?>image/product/<?php echo $resul1['menu_image'] ?>" alt="img" height="250"></a></div>
                                    <div class="cat-title"><a href="<?php echo $url ?>customresult.php?catid=<?php echo $resul1['menu_id'] ?>"><?php echo $resul1['menu'] ?></a></div>
                                 </div>
                                 <?php } ?>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
			   --->	
               <!--- <div class="container " style="margin-top:10px;">
                  <div class="row">
                      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                      <img src="image/mustured.png" style="width: 100%;
                  height: 238px;" alt="">
                      </div>
                  </div>
                  </div> --->
               <div class="container">
                <!---  <div class="row">
                     <div class="block-policy1" id="mobileCategory">
                        <div id="product">
                           <div class="related titleLine products-list grid module ">
                              <h1  align="center" style="border-bottom:20px">Explore our categories</h1>
                              <?php while ($mobile_cat = mysqli_fetch_array($sel_cs_mobile)) { ?>
                              <div class="item col-md-2 col-xs-3">
                                 <div class="card1">
                                    <div class="item-inner product-layout transition product-grid">
                                       <div class="product-item-container" style="margin:0px;">
                                          <div class="left-block left-b">
                                             <div class="mobViewHeight" style="padding:15px">
                                                <a href="<?php echo $url ?>customresult.php?catid=<?php echo $mobile_cat['menu_id'] ?>">
                                                   <center>
                                                      <img src="<?php echo $url ?>image/product/<?php echo $mobile_cat['menu_image'] ?>" class="img-zoom img-responsive" alt="image1">
                                                   </center>
                                                </a>
                                             </div>
                                          </div>
                                          <div class="right-block">
                                             <h4><a href="<?php echo $url ?>customresult.php?catid=<?php echo $mobile_cat['menu_id'] ?>" style="font-size: 15px;font-weight: 600;"> <?php echo $mobile_cat['menu'] ?> </a></h4>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                              <?php } ?>
                           </div>
                        </div>
                     </div>
                  </div>--->
				   
			
	   
         <!--<div class="container">-->
         <!--    <div class="row">-->
         <!--        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">-->
         <!--            <div class="so-categories module custom-slidercates" style="margin-top:15px">-->
         <!--                <div class="modcontent">-->
         <!--                    <div class="yt-content-slider cat-wrap" data-rtl="yes" data-autoplay="no" data-autoheight="no" data-delay="4" data-speed="0.6" data-margin="15" data-items_column00="4" data-items_column0="4" data-items_column1="4" data-items_column2="3" data-items_column3="2" data-items_column4="1" data-arrows="yes" data-pagination="no" data-lazyload="yes" data-loop="no" data-hoverpause="yes">-->
         <!--                                <div class="owl-item" style="border: 1px dotted black; padding: 20px;">-->
         <!--                                    <div class="card">-->
         <!--                                        <div class="img-card">-->
         <!--                                            <img src="https://images.pexels.com/photos/6625914/pexels-photo-6625914.jpeg" alt="" style="width: 80px;height: 69px;border-radius: 100%;margin-bottom: 10px;">-->
         <!--                                        </div>-->
         <!--                                        <div class="testimonial mt-4 mb-2">-->
         <!--                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus expedita dicta doloremque odit-->
         <!--                                            saepe quo natus aut accusantium alias blanditiis.-->
         <!--                                        </div>-->
         <!--                                        <h3>York Man</h3>-->
         <!--                                    </div>-->
         <!--                                </div>-->
         <!--                                <div class="owl-item" style="border: 1px dotted black; padding: 20px;">-->
         <!--                                    <div class="card">-->
         <!--                                        <div class="img-card">-->
         <!--                                            <img src="https://freefrontend.com/assets/img/bootstrap-testimonials/bootstrap-4-owl-carousel-for-user-testimonials.jpg" alt="" style="width: 80px;height: 69px;border-radius: 100%;margin-bottom: 10px;">-->
         <!--                                        </div>-->
         <!--                                        <div class="testimonial mt-4 mb-2">-->
         <!--                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus expedita dicta doloremque odit-->
         <!--                                            saepe quo natus aut accusantium alias blanditiis.-->
         <!--                                        </div>-->
         <!--                                        <h3>Donal Richie</h3>-->
         <!--                                    </div>-->
         <!--                                </div>-->
         <!--                                <div class="owl-item" style="border: 1px dotted black; padding: 20px;">-->
         <!--                                    <div class="card">-->
         <!--                                        <div class="img-card">-->
         <!--                                            <img src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" style="width: 80px;height: 69px;border-radius: 100%;margin-bottom: 10px;">-->
         <!--                                        </div>-->
         <!--                                        <div class="testimonial mt-4 mb-2">-->
         <!--                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus expedita dicta doloremque odit-->
         <!--                                            saepe quo natus aut accusantium alias blanditiis.-->
         <!--                                        </div>-->
         <!--                                        <h3>Sam Denis</h3>-->
         <!--                                    </div>-->
         <!--                                </div>-->
         <!--                                <div class="owl-item" style="border: 1px dotted black; padding: 20px;">-->
         <!--                                    <div class="card">-->
         <!--                                        <div class="img-card">-->
         <!--                                            <img src="https://images.pexels.com/photos/6625914/pexels-photo-6625914.jpeg" alt="" style="width: 80px;height: 69px;border-radius: 100%;margin-bottom: 10px;">-->
         <!--                                        </div>-->
         <!--                                        <div class="testimonial mt-4 mb-2">-->
         <!--                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus expedita dicta doloremque odit-->
         <!--                                            saepe quo natus aut accusantium alias blanditiis.-->
         <!--                                        </div>-->
         <!--                                        <h3>Denis Richie</h3>-->
         <!--                                    </div>-->
         <!--                                </div>-->
         <!--                                <div class="owl-item" style="border: 1px dotted black; padding: 20px;">-->
         <!--                                    <div class="card">-->
         <!--                                        <div class="img-card">-->
         <!--                                            <img src="https://images.pexels.com/photos/4946604/pexels-photo-4946604.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" style="width: 80px;height: 69px;border-radius: 100%;margin-bottom: 10px;">-->
         <!--                                        </div>-->
         <!--                                        <div class="testimonial mt-4 mb-2">-->
         <!--                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus expedita dicta doloremque odit-->
         <!--                                            saepe quo natus aut accusantium alias blanditiis.-->
         <!--                                        </div>-->
         <!--                                        <h3>Gentix Lare</h3>-->
         <!--                                    </div>-->
         <!--                                </div>-->
         <!--                                <div class="owl-item" style="border: 1px dotted black; padding: 20px;">-->
         <!--                                    <div class="card">-->
         <!--                                        <div class="img-card">-->
         <!--                                            <img src="https://images.pexels.com/photos/6625914/pexels-photo-6625914.jpeg" alt="" style="width: 80px;height: 69px;border-radius: 100%;margin-bottom: 10px;">-->
         <!--                                        </div>-->
         <!--                                        <div class="testimonial mt-4 mb-2">-->
         <!--                                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus expedita dicta doloremque odit-->
         <!--                                            saepe quo natus aut accusantium alias blanditiis.-->
         <!--                                        </div>-->
         <!--                                        <h3>Denis Richie</h3>-->
         <!--                            </div>-->
         <!--                        </div>-->
         <!--                    </div>-->
         <!--                </div>-->
         <!--            </div>-->
         <!--        </div>-->
         <!--    </div>-->
         <!--</div>-->
      </div>
      <!-- //Main Container -->
      <!-- Footer Container -->
      <?php include "includes/footer.php" ?>
      <script type="text/javascript" src="<?php echo $url ?>js/jquery-2.2.4.min.js"></script>
      <script type="text/javascript" src="<?php echo $url ?>js/bootstrap.min.js"></script>
      <script type="text/javascript" src="<?php echo $url ?>js/owl-carousel/owl.carousel.js"></script>
      <script type="text/javascript" src="<?php echo $url ?>js/slick-slider/slick.js"></script>
      <script type="text/javascript" src="<?php echo $url ?>js/themejs/libs.js"></script>
      <script type="text/javascript" src="<?php echo $url ?>js/unveil/jquery.unveil.js"></script>
      <script type="text/javascript" src="<?php echo $url ?>js/countdown/jquery.countdown.min.js"></script>
      <script type="text/javascript" src="<?php echo $url ?>js/dcjqaccordion/jquery.dcjqaccordion.2.8.min.js"></script>
      <script type="text/javascript" src="<?php echo $url ?>js/datetimepicker/moment.js"></script>
      <script type="text/javascript" src="<?php echo $url ?>js/datetimepicker/bootstrap-datetimepicker.min.js"></script>
      <script type="text/javascript" src="<?php echo $url ?>js/jquery-ui/jquery-ui.min.js"></script>
      <script type="text/javascript" src="<?php echo $url ?>js/modernizr/modernizr-2.6.2.min.js"></script>
      <script type="text/javascript" src="<?php echo $url ?>js/minicolors/jquery.miniColors.min.js"></script>
      <!-- Theme files
         ============================================ -->
      <script type="text/javascript" src="<?php echo $url ?>js/themejs/application.js"></script>
      <script type="text/javascript" src="<?php echo $url ?>js/themejs/homepage.js"></script>
      <script type="text/javascript" src="<?php echo $url ?>js/themejs/toppanel.js"></script>
      <script type="text/javascript" src="<?php echo $url ?>js/themejs/so_megamenu.js"></script>
      <script type="text/javascript" src="<?php echo $url ?>js/themejs/addtocart.js"></script>
      <!-- Service Worker
         ===========================================-->
      <script src="js/main.js"></script>
	  <script>
	$(document).ready(function () {
    console.log("Ready!");

    // Creative Parallax Effect on Mouse Move
    $('.hero-section').mousemove(function (e) {
        var moveX = (e.pageX * -1 / 25);
        var moveY = (e.pageY * -1 / 25);

        $('.main-fruit-img').css('transform', 'translate(' + moveX + 'px, ' + moveY + 'px) rotate(-5deg)');
    });

    // Reset on mouse leave
    $('.hero-section').mouseleave(function () {
        $('.main-fruit-img').css('transform', 'translate(0, 0) rotate(-5deg)');
    });

    // Product Filtering Logic
    $('.category-item').on('click', function () {
        // Update active class
        $('.category-item').removeClass('active');
        $(this).addClass('active');

        var filter = $(this).data('category');

        if (filter === 'all') {
            $('.product-item').removeClass('hidden').addClass('fade-in');
        } else {
            $('.product-item').each(function () {
                var itemCategory = $(this).data('category');
                if (itemCategory === filter) {
                    $(this).removeClass('hidden').addClass('fade-in');
                } else {
                    $(this).addClass('hidden').removeClass('fade-in');
                }
            });
        }
    });
});
	  </script>
   </body>
</html>