/*------------------------------------------------------------------------category-card-------------------------------------------------------------------------------/*
/* Base styling for the cards */
.category-card {
   /* padding: 20px;
    margin: 20px;  Spacing between cards 
        height : 255px;
        overflow: hidden; /* Hide overflow if any content exceeds card limits */*/

    padding: 20px;
    background-color: white; /* Card background */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Initial shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */

    cursor: pointer; /* Makes it clickable */
    position: relative;

}

/* Hover effect: lift the card and change shadow */
.category-card:hover {
    transform: scale(1.05); /* Scales the card to 105% of its size */
    box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2); /* Stronger shadow */
    background-color: #f9f9f9; /* Optional: subtle background color change on hover */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition effect */
}


/* Additional hover effect: border or glow */
.category-card:hover::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #4caf50; /* Green border or any highlight color */
    border-radius: 15px;
    opacity: 0.8; /* Slight transparency */
    z-index: -1; /* Keep it behind the content */
}

/*------------------------------------------------------------------------category-card-------------------------------------------------------------------------------/*






/* Container for the product grid */
.products-container {
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap onto multiple lines if needed */
  justify-content: space-around; /* Adjusts spacing between product boxes */
  margin: 0; /* Remove any default margin */
  padding: 0; /* Remove any default padding */
}

/* Product card styling */
.product-card {
  flex: 0 1 calc(33.33% - 10px); /* 3 items per row with some spacing */
  margin: 5px; /* Space between items */
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Hover effects for the product card */
.product-card:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

/* Zoom effect for the image */
.product-card img {
  width: 100%;
  border-radius: 4px;
  transition: transform 0.3s ease; /* Transition for smooth zoom effect */
}

/* Zoom on image hover */
.product-card:hover img {
  transform: scale(1.1); /* Image zooms in on hover */
}


/*------------------------------------------------------------------------------- Wave containers)--------------------------------------------------------------- */
.wave-container-bg1 {
    position: relative;
    background-color: #fff; /* Background color */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCI+PHBhdGggZmlsbD0iI2IwYzQ3MSIgZD0iTTAsMTAwIFEzNjAsMjAwIDcyMCwxMDAgVDE0NDAsMTAwIFYzMjAgSDAgTTAwIHYxMDB6Ij48L3BhdGg+PC9zdmc+'); /* Update with the correct SVG */
    background-repeat: no-repeat; /* Prevent repeating the SVG */
    background-size: cover;
}

/* Wave container for Shade 2 (#76b43a) */
.wave-container-bg2 {
    position: relative;
    background-color: #B0C471; /* Background color */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCI+PHBhdGggZmlsbD0iI2Q3ZTFiOCIgZD0iTTAsMTAwIFEzNjAsMjAwIDcyMCwxMDAgVDE0NDAsMTAwIFYzMjAgSDAgTTAwIHYxMDB6Ij48L3BhdGg+PC9zdmc+'); /* Update with the correct SVG */
    background-repeat: no-repeat; /* Prevent repeating the SVG */
    background-size: cover;
}
/* Wave container for Shade 2 (#76b43a) */
.wave-container-bg2w {
    position: relative;
    background-color: #B0C471; /* Background color */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTAsMTAwIFEzNjAsMjAwIDcyMCwxMDAgVDE0NDAsMTAwIFYzMjAgSDAgTTAwIHYxMDB6Ij48L3BhdGg+PC9zdmc+'); /* Update with the correct SVG */
    background-repeat: no-repeat; /* Prevent repeating the SVG */
    background-size: cover;
}

/* Wave container for Shade 3 (#86be4b) */
.wave-container-bg3 {
    position: relative;
    background-color: #d7e1b8; /* Background color */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCI+PHBhdGggZmlsbD0iI2ZmZjllYSIgZD0iTTAsMTAwIFEzNjAsMjAwIDcyMCwxMDAgVDE0NDAsMTAwIFYzMjAgSDAgTTAwIHYxMDB6Ij48L3BhdGg+PC9zdmc+'); /* Update with the correct SVG */
    background-repeat: no-repeat; /* Prevent repeating the SVG */
    background-size: cover;
}
/* Wave container for Shade 3 (#86be4b) */
.wave-container-bg3w {
    position: relative;
    background-color: #fff; /* Background color */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCI+PHBhdGggZmlsbD0iI2ZmZjllYSIgZD0iTTAsMTAwIFEzNjAsMjAwIDcyMCwxMDAgVDE0NDAsMTAwIFYzMjAgSDAgTTAwIHYxMDB6Ij48L3BhdGg+PC9zdmc+'); /* Update with the correct SVG */
    background-repeat: no-repeat; /* Prevent repeating the SVG */
    background-size: cover;
}

/* Wave container for Shade 4 (#96c65b) */
.wave-container-bg4 {
    position: relative;
    background-color: #fff9ea; /* Background color */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCI+PHBhdGggZmlsbD0iI2YyZWJkMSIgZD0iTTAsMTAwIFEzNjAsMjAwIDcyMCwxMDAgVDE0NDAsMTAwIFYzMjAgSDAgTTAwIHYxMDB6Ij48L3BhdGg+PC9zdmc+'); /* Update with the correct SVG */
    background-repeat: no-repeat; /* Prevent repeating the SVG */
    background-size: cover;
}

/* Wave container for Shade 5 (#a6ce6c) */
.wave-container-bg5 {
    position: relative;
    background-color: #f2ebd1; /* Background color */
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCI+PHBhdGggZmlsbD0iI2ZmZjllYSIgZD0iTTAsMTAwIFEzNjAsMjAwIDcyMCwxMDAgVDE0NDAsMTAwIFYzMjAgSDAgTTAwIHYxMDB6Ij48L3BhdGg+PC9zdmc+'); /* Update with the correct SVG */
    background-repeat: no-repeat; /* Prevent repeating the SVG */
    background-size: cover;
}
.wave-container-bg6 {
    position: relative;
    background-color:#fff9ea;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCI+PHBhdGggZmlsbD0iI2IwYzQ3MSIgZD0iTTAsMTAwIFEzNjAsMjAwIDcyMCwxMDAgVDE0NDAsMTAwIFYzMjAgSDAgTTAwIHYxMDB6Ij48L3BhdGg+PC9zdmc+'); /* Update with the correct SVG */
    background-repeat: no-repeat; /* Prevent repeating the SVG */
    background-size: cover;
}

/*------------------------------------------------------------------------------- Wave containers)--------------------------------------------------------------- */


/* Responsive media queries */
@media (max-width: 768px) {
  .product-card {
    flex: 0 1 calc(50% - 10px); /* 2 items per row for tablets */
  }
  .category-card{
    flex: 0 1 calc(50% - 10px); /* 2 items per row for tablets */
  }
  .wave-container-green {
    height: 200px; /* Adjust height for smaller devices */
  }
}

@media (max-width: 480px) {
  .product-card {
    flex: 0 1 100%; /* 1 item per row for mobile devices */
  }
}