From f8f067aea747bd6b70cbbcd188750c809d120a77 Mon Sep 17 00:00:00 2001
From: Solanki Sarkar <158484284+solanki505@users.noreply.github.com>
Date: Thu, 18 Jul 2024 21:45:02 +0530
Subject: [PATCH 1/2] overlap of icons issue solved

---
 index.html | 21 +++++++++++----------
 style.css  | 11 +++++------
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 295374c3..481409b1 100644
--- a/index.html
+++ b/index.html
@@ -73,14 +73,8 @@
         ><h3>AgriLearnNetwork</h3>
       </a>
       
-      <!-- adding the toggle mode button -->
-      <a>
-        <div class="theme-toggle">
-          <i class="fas fa-sun"></i>
-          <i class="fas fa-moon"></i>
-        </div>
-       </a>
-
+      
+      
       <i class="bx bx-menu" id="menu-icon"></i>
       <nav class="navbar">
         <a href="#home" class="active content"
@@ -101,9 +95,16 @@
             ><i class="fa fa-shopping-cart"></i>Buy Products</a
           >
         <a href="./login/login.html">
-          <button id="log-in-btn" class="login-btn">Login</button>
-        </a>
+          <button id="log-in-btn" class="login-btn">Login</button></a>
+          <a><!-- adding the toggle mode button -->
+            <div class="theme-toggle">
+              <i class="fas fa-sun"></i>
+              <i class="fas fa-moon"></i>
+            </div>
+           </a>
       </nav>
+     
+
     </header>
 
     <section class="home" id="home">
diff --git a/style.css b/style.css
index e334f095..6c9955ad 100644
--- a/style.css
+++ b/style.css
@@ -100,7 +100,6 @@ section {
    top: 0;
    left: 0;
    width:100%;
-   padding:2rem 9%;
    background-color: var(--bg-color);
    display: flex;
    justify-content: space-between;
@@ -212,17 +211,17 @@ section {
 
 /* Theme Toggle Button */
 .theme-toggle {
-  position: fixed;
-  top: 26px;
-  right: 30px;
+ position: relative;
+ left: 48px;
+ bottom:7px;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   background-color: yellow;
   border-radius: 50%;
-  width: 40px;
-  height: 40px;
+  width: 30px;
+  height: 30px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   transition: background-color 0.3s, box-shadow 0.3s;
   z-index: 1000;

From 5cfe8e3ebd14e3f424dbd81cf7d08c91a007f8c1 Mon Sep 17 00:00:00 2001
From: Solanki Sarkar <158484284+solanki505@users.noreply.github.com>
Date: Mon, 22 Jul 2024 12:41:37 +0530
Subject: [PATCH 2/2] Feat: adding description of agro products #1209

---
 buyproducts/buy_products.css  | 341 +++++++++++++
 buyproducts/buy_products.html | 871 +++++++++++++++++++++++++++++++++-
 2 files changed, 1209 insertions(+), 3 deletions(-)

diff --git a/buyproducts/buy_products.css b/buyproducts/buy_products.css
index 787a4216..295c648d 100644
--- a/buyproducts/buy_products.css
+++ b/buyproducts/buy_products.css
@@ -11,6 +11,347 @@
   font-family: "Poppins";
 }
 
+/* The Modal (background) */
+.modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0,0,0); /* Fallback color */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content/Box */
+.modal-content {
+  background-color: #fefefe;
+  margin: 15% auto; /* 15% from the top and centered */
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%; /* Could be more or less, depending on screen size */
+}
+
+/* The Close Button */
+.close {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+
+/* The Close Button */
+.close117 {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close117:hover,
+.close117:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+
+/* The Close Button */
+.close2 {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close2:hover,
+.close2:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+
+/* The Close Button */
+.close6 {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close6:hover,
+.close6:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+
+/* The Close Button */
+.close5 {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close5:hover,
+.close5:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+
+/* The Close Button */
+.close3 {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close3:hover,
+.close3:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+
+/* The Close Button */
+.close4 {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close4:hover,
+.close4:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* The Close Button */
+.close9 {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close9:hover,
+.close9:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* The Close Button */
+.close8 {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close8:hover,
+.close8:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+
+/* The Close Button */
+.close1172 {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close1172:hover,
+.close1172:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+/* The Close Button */
+.close11 {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close11:hover,
+.close11:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* The Close Button */
+.close79 {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close79:hover,
+.close79:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* The Close Button */
+.close78 {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close78:hover,
+.close78:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+
+/* The Close Button */
+.close77 {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close77:hover,
+.close77:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* The Close Button */
+.close76 {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close76:hover,
+.close76:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+/* The Close Button */
+.close75 {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close75:hover,
+.close75:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* The Close Button */
+.close74 {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close74:hover,
+.close74:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* The Close Button */
+.close73 {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close73:hover,
+.close73:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+/* The Close Button */
+.close72 {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close72:hover,
+.close72:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+/* The Close Button */
+.close71 {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close71:hover,
+.close71:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* The Close Button */
+.close10 {
+  color: #aaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close10:hover,
+.close10:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
 /* Customizing the title */
 .swal-title {
   color: #000000 !important; /* Change title color */
diff --git a/buyproducts/buy_products.html b/buyproducts/buy_products.html
index 4b3579d1..61248b29 100644
--- a/buyproducts/buy_products.html
+++ b/buyproducts/buy_products.html
@@ -114,6 +114,47 @@ <h3>BALER-Hay & Forage Equipment</h3>
           >
             Add to Cart
           </button>
+          <button id="myBtn" class="add-to-cart" style="margin-left: 20px; background-color: rgb(119, 159, 146);">
+            Description
+          </button>
+          <!-- The Modal -->
+          <div id="myModal" class="modal">
+          
+            <!-- Modal content -->
+            <div class="modal-content" style="border-radius: 10px; background-color:rgb(119, 159, 146); ;">
+              <span class="close">&times;</span>
+              <p style="text-align: left;">
+                Looking for the latest Mild Steel 30-50 HP Redlands Baler, For Agriculture & Farming, Diesel price in Nagarkurnool?<br> BALER-Hay & Forage Equipment, one of the  best Mild Steel 30-50 HP Redlands Bale</p>
+              </div>
+          
+          </div>
+          <script>
+            // Get the modal
+            var modal = document.getElementById("myModal");
+          
+            // Get the button that opens the modal
+            var btn = document.getElementById("myBtn");
+          
+            // Get the <span> element that closes the modal
+            var span = document.getElementsByClassName("close")[0];
+          
+            // When the user clicks the button, open the modal
+            btn.onclick = function() {
+              modal.style.display = "block";
+            }
+          
+            // When the user clicks on <span> (x), close the modal
+            span.onclick = function() {
+              modal.style.display = "none";
+            }
+          
+            // When the user clicks anywhere outside of the modal, close it
+            window.onclick = function(event) {
+              if (event.target == modal) {
+                modal.style.display = "none";
+              }
+            }
+          </script>
         </div>
       </div>
       <div class="product">
@@ -134,7 +175,47 @@ <h3>ELECTRIC LAWN MOWERS-56 Volt 21 in.</h3>
             data-price="12000"
           >
             Add to Cart
+        </button>
+        <button id="myBtn4" class="add-to-cart" style="margin-left: 20px; background-color: rgb(119, 159, 146);">
+          Description
           </button>
+          <!-- The Modal -->
+          <div id="myModal4" class="modal">
+          
+          <!-- Modal content -->
+          <div class="modal-content" style="border-radius: 10px; background-color:rgb(119, 159, 146); ;">
+            <span class="close4">&times;</span>
+            
+            <p style="text-align: left;">Introducing the ELECTRIC LAWN MOWER with a powerful 56-volt battery and a robust 21-inch cutting deck. This high-performance mower combines efficiency, convenience, and eco-friendliness, making it the perfect choice for maintaining your lawn with ease.</p> </div>
+          
+          </div>
+          <script>
+          // Get the modal
+          var modal4 = document.getElementById("myModal4");
+          
+          // Get the button that opens the modal
+          var btn4 = document.getElementById("myBtn4");
+          
+          // Get the <span> element that closes the modal
+          var span4 = document.getElementsByClassName("close4")[0];
+          
+          // When the user clicks the button, open the modal
+          btn4.onclick = function() {
+            modal4.style.display = "block";
+          }
+          
+          // When the user clicks on <span> (x), close the modal
+          span4.onclick = function() {
+            modal4.style.display = "none";
+          }
+          
+          // When the user clicks anywhere outside of the modal, close it
+          window.onclick = function(event) {
+            if (event.target == modal4) {
+            modal4.style.display = "none";
+            }
+          }
+          </script>
         </div>
       </div>
       <div class="product">
@@ -155,7 +236,49 @@ <h3>PESTICIDE SPRAY BOTTLES- 30 litre</h3>
             data-price="2000"
           >
             Add to Cart
-          </button>
+            </button>
+            <button id="myBtn3" class="add-to-cart" style="margin-left: 20px; background-color: rgb(119, 159, 146);">
+            Description
+            </button>
+            <!-- The Modal -->
+            <div id="myModal3" class="modal">
+            
+            <!-- Modal content -->
+            <div class="modal-content" style="border-radius: 10px; background-color:rgb(119, 159, 146); ;">
+              <span class="close3">&times;</span>
+              
+              <p style="text-align: left;">
+              The PESTICIDE SPRAY BOTTLES- 30 litre set of 3 is perfect for spraying pesticides in your garden or farm. It has a capacity of 30 litres and comes in a set of 3 bottles. The bottles are made of high-quality material that is durable and long-lasting.</p>
+            </div>
+            
+            </div>
+            <script>
+            // Get the modal
+            var modal3 = document.getElementById("myModal3");
+            
+            // Get the button that opens the modal
+            var btn3 = document.getElementById("myBtn3");
+            
+            // Get the <span> element that closes the modal
+            var span3 = document.getElementsByClassName("close3")[0];
+            
+            // When the user clicks the button, open the modal
+            btn3.onclick = function() {
+              modal3.style.display = "block";
+            }
+            
+            // When the user clicks on <span> (x), close the modal
+            span3.onclick = function() {
+              modal3.style.display = "none";
+            }
+            
+            // When the user clicks anywhere outside of the modal, close it
+            window.onclick = function(event) {
+              if (event.target == modal3) {
+              modal3.style.display = "none";
+              }
+            }
+            </script>
         </div>
       </div>
       <div class="product">
@@ -177,6 +300,47 @@ <h3>FRUIT PLUCKER</h3>
           >
             Add to Cart
           </button>
+          <button id="myBtn2" class="add-to-cart" style="margin-left: 20px; background-color: rgb(119, 159, 146);">
+            Description
+            </button>
+            <!-- The Modal -->
+            <div id="myModal2" class="modal">
+            
+            <!-- Modal content -->
+            <div class="modal-content" style="border-radius: 10px; background-color:rgb(119, 159, 146); ;">
+              <span class="close2">&times;</span>
+              
+              <p style="text-align: left;">
+            Constructed from industrial-grade nylon, this plucker offers durability and longevity.</p> </div>
+            
+            </div>
+            <script>
+            // Get the modal
+            var modal2 = document.getElementById("myModal2");
+            
+            // Get the button that opens the modal
+            var btn2 = document.getElementById("myBtn2");
+            
+            // Get the <span> element that closes the modal
+            var span2 = document.getElementsByClassName("close2")[0];
+            
+            // When the user clicks the button, open the modal
+            btn2.onclick = function() {
+              modal2.style.display = "block";
+            }
+            
+            // When the user clicks on <span> (x), close the modal
+            span2.onclick = function() {
+              modal2.style.display = "none";
+            }
+            
+            // When the user clicks anywhere outside of the modal, close it
+            window.onclick = function(event) {
+              if (event.target == modal2) {
+              modal2.style.display = "none";
+              }
+            }
+            </script>
         </div>
       </div>
       <div class="product">
@@ -198,6 +362,46 @@ <h3>RUBBER HAND GLOVES</h3>
           >
             Add to Cart
           </button>
+          <button id="myBtn5" class="add-to-cart" style="margin-left: 20px; background-color: rgb(119, 159, 146);">
+            Description
+            </button>
+            <!-- The Modal -->
+            <div id="myModal5" class="modal">
+            
+            <!-- Modal content -->
+            <div class="modal-content" style="border-radius: 10px; background-color:rgb(119, 159, 146); ;">
+              <span class="close5">&times;</span>
+              
+              <p style="text-align: left;">Ensure maximum protection and comfort with our premium RUBBER HAND GLOVES, designed to cater to various needs, from household chores to industrial applications. These gloves are crafted from high-quality rubber to offer superior durability, flexibility, and resistance to chemicals and abrasions.</p> </div>
+            
+            </div>
+            <script>
+            // Get the modal
+            var modal5 = document.getElementById("myModal5");
+            
+            // Get the button that opens the modal
+            var btn5 = document.getElementById("myBtn5");
+            
+            // Get the <span> element that closes the modal
+            var span5 = document.getElementsByClassName("close5")[0];
+            
+            // When the user clicks the button, open the modal
+            btn5.onclick = function() {
+              modal5.style.display = "block";
+            }
+            
+            // When the user clicks on <span> (x), close the modal
+            span5.onclick = function() {
+              modal5.style.display = "none";
+            }
+            
+            // When the user clicks anywhere outside of the modal, close it
+            window.onclick = function(event) {
+              if (event.target == modal5) {
+              modal5.style.display = "none";
+              }
+            }
+            </script>
         </div>
       </div>
       <div class="product">
@@ -218,7 +422,47 @@ <h3>BIG TORCH LIGHT (HAND TORCH)</h3>
             data-price="1500"
           >
             Add to Cart
-          </button>
+          </button>  
+           <button id="myBtn6" class="add-to-cart" style="margin-left: 20px; background-color: rgb(119, 159, 146);">
+            Description
+            </button>
+            <!-- The Modal -->
+            <div id="myModal6" class="modal">
+            
+            <!-- Modal content -->
+            <div class="modal-content" style="border-radius: 10px; background-color:rgb(119, 159, 146); ;">
+              <span class="close6">&times;</span>
+              
+              <p style="text-align: left;">Illuminate your surroundings with the powerful and reliable BIG TORCH LIGHT (HAND TORCH), designed to provide exceptional brightness and long-lasting performance in various situations. Whether for outdoor adventures, emergency situations, or daily use, this torch light is the perfect companion to light your way.</p> </div>
+            
+            </div>
+            <script>
+            // Get the modal
+            var modal6 = document.getElementById("myModal6");
+            
+            // Get the button that opens the modal
+            var btn6 = document.getElementById("myBtn6");
+            
+            // Get the <span> element that closes the modal
+            var span6 = document.getElementsByClassName("close6")[0];
+            
+            // When the user clicks the button, open the modal
+            btn6.onclick = function() {
+              modal6.style.display = "block";
+            }
+            
+            // When the user clicks on <span> (x), close the modal
+            span6.onclick = function() {
+              modal6.style.display = "none";
+            }
+            
+            // When the user clicks anywhere outside of the modal, close it
+            window.onclick = function(event) {
+              if (event.target == modal6) {
+              modal6.style.display = "none";
+              }
+            }
+            </script>
         </div>
       </div>
       <div class="product">
@@ -239,7 +483,48 @@ <h3>WOLF GARDEN 7 TOOL SET</h3>
             data-price="3500"
           >
             Add to Cart
-          </button>
+            <button id="myBtn1172" class="add-to-cart" style="margin-left: 20px; background-color: rgb(119, 159, 146);">
+              Description
+              </button>
+              <!-- The Modal -->
+              <div id="myModal1172" class="modal">
+              
+              <!-- Modal content -->
+              <div class="modal-content" style="border-radius: 10px; background-color:rgb(119, 159, 146); ;">
+                <span class="close1172">&times;</span>
+                
+                <p style="text-align: left;">Enhance your gardening experience with the WOLF GARDEN 7 TOOL SET, a comprehensive collection of high-quality tools designed to make your gardening tasks easier and more efficient. This versatile set is perfect for gardeners of all levels, offering precision, durability, and comfort for a variety of gardening activities.
+  
+                </p> </div>
+              
+              </div>
+              <script>
+              // Get the modal
+              var modal1172 = document.getElementById("myModal1172");
+              
+              // Get the button that opens the modal
+              var btn1172 = document.getElementById("myBtn1172");
+              
+              // Get the <span> element that closes the modal
+              var span1172 = document.getElementsByClassName("close1172")[0];
+              
+              // When the user clicks the button, open the modal
+              btn1172.onclick = function() {
+                modal1172.style.display = "block";
+              }
+              
+              // When the user clicks on <span> (x), close the modal
+              span1172.onclick = function() {
+                modal1172.style.display = "none";
+              }
+              
+              // When the user clicks anywhere outside of the modal, close it
+              window.onclick = function(event) {
+                if (event.target == modal1172) {
+                modal1172.style.display = "none";
+                }
+              }
+              </script>
         </div>
       </div>
       <div class="product">
@@ -260,6 +545,48 @@ <h3>BALWAAN MANUAL AGRICULTURAL SEEDER</h3>
           >
             Add to Cart
           </button>
+          <button id="myBtn117" class="add-to-cart" style="margin-left: 20px; background-color: rgb(119, 159, 146);">
+            Description
+            </button>
+            <!-- The Modal -->
+            <div id="myModal117" class="modal">
+            
+            <!-- Modal content -->
+            <div class="modal-content" style="border-radius: 10px; background-color:rgb(119, 159, 146); ;">
+              <span class="close117">&times;</span>
+              
+              <p style="text-align: left;">Introducing the BALWAAN MANUAL AGRICULTURAL SEEDER, a reliable and efficient tool designed to simplify the sowing process for farmers and gardeners. This manually operated seeder ensures precise seed placement, enhancing productivity and crop yield.
+
+              </p> </div>
+            
+            </div>
+            <script>
+            // Get the modal
+            var modal117 = document.getElementById("myModal117");
+            
+            // Get the button that opens the modal
+            var btn117 = document.getElementById("myBtn117");
+            
+            // Get the <span> element that closes the modal
+            var span117 = document.getElementsByClassName("close117")[0];
+            
+            // When the user clicks the button, open the modal
+            btn117.onclick = function() {
+              modal117.style.display = "block";
+            }
+            
+            // When the user clicks on <span> (x), close the modal
+            span117.onclick = function() {
+              modal117.style.display = "none";
+            }
+            
+            // When the user clicks anywhere outside of the modal, close it
+            window.onclick = function(event) {
+              if (event.target == modal117) {
+              modal117.style.display = "none";
+              }
+            }
+            </script>
         </div>
       </div>
       <div class="product">
@@ -281,6 +608,47 @@ <h3>SOIL CRUMBLER TOOL</h3>
           >
             Add to Cart
           </button>
+          <button id="myBtn11" class="add-to-cart" style="margin-left: 20px; background-color: rgb(119, 159, 146);">
+            Description
+            </button>
+            <!-- The Modal -->
+            <div id="myModal11" class="modal">
+            
+            <!-- Modal content -->
+            <div class="modal-content" style="border-radius: 10px; background-color:rgb(119, 159, 146); ;">
+              <span class="close11">&times;</span>
+              
+              <p style="text-align: left;">Achieve the perfect soil texture for your gardening and farming needs with the SOIL CRUMBLER TOOL. Designed for efficiency and ease of use, this tool helps break up soil clumps and aerate the ground, promoting healthy plant growth
+              </p> </div>
+            
+            </div>
+            <script>
+            // Get the modal
+            var modal11 = document.getElementById("myModal11");
+            
+            // Get the button that opens the modal
+            var btn11 = document.getElementById("myBtn11");
+            
+            // Get the <span> element that closes the modal
+            var span11 = document.getElementsByClassName("close11")[0];
+            
+            // When the user clicks the button, open the modal
+            btn11.onclick = function() {
+              modal11.style.display = "block";
+            }
+            
+            // When the user clicks on <span> (x), close the modal
+            span11.onclick = function() {
+              modal11.style.display = "none";
+            }
+            
+            // When the user clicks anywhere outside of the modal, close it
+            window.onclick = function(event) {
+              if (event.target == modal11) {
+              modal11.style.display = "none";
+              }
+            }
+            </script>
         </div>
       </div>
       <div class="product">
@@ -302,6 +670,47 @@ <h3>EARTH AUGER BIT</h3>
           >
             Add to Cart
           </button>
+          <button id="myBtn79" class="add-to-cart" style="margin-left: 20px; background-color: rgb(119, 159, 146);">
+            Description
+            </button>
+            <!-- The Modal -->
+            <div id="myModal79" class="modal">
+            
+            <!-- Modal content -->
+            <div class="modal-content" style="border-radius: 10px; background-color:rgb(119, 159, 146); ;">
+              <span class="close79">&times;</span>
+              
+              <p style="text-align: left;">Simplify your digging tasks with the EARTH AUGER BIT, designed for efficient and precise drilling in various soil types. This robust tool is perfect for planting trees, installing fences, and other outdoor projects, offering power and reliability to get the job done quickly.
+              </p> </div>
+            
+            </div>
+            <script>
+            // Get the modal
+            var modal79 = document.getElementById("myModal79");
+            
+            // Get the button that opens the modal
+            var btn79 = document.getElementById("myBtn79");
+            
+            // Get the <span> element that closes the modal
+            var span79 = document.getElementsByClassName("close79")[0];
+            
+            // When the user clicks the button, open the modal
+            btn79.onclick = function() {
+              modal79.style.display = "block";
+            }
+            
+            // When the user clicks on <span> (x), close the modal
+            span79.onclick = function() {
+              modal79.style.display = "none";
+            }
+            
+            // When the user clicks anywhere outside of the modal, close it
+            window.onclick = function(event) {
+              if (event.target == modal79) {
+              modal79.style.display = "none";
+              }
+            }
+            </script>
         </div>
       </div>
       <div class="product">
@@ -323,6 +732,47 @@ <h3>NEPTUNE PRESSURE HOSE</h3>
           >
             Add to Cart
           </button>
+          <button id="myBtn78" class="add-to-cart" style="margin-left: 20px; background-color: rgb(119, 159, 146);">
+            Description
+            </button>
+            <!-- The Modal -->
+            <div id="myModal78" class="modal">
+            
+            <!-- Modal content -->
+            <div class="modal-content" style="border-radius: 10px; background-color:rgb(119, 159, 146); ;">
+              <span class="close78">&times;</span>
+              
+              <p style="text-align: left;">Ensure efficient and reliable water delivery for all your high-pressure cleaning tasks with the NEPTUNE PRESSURE HOSE. Designed to withstand the demands of both residential and commercial applications, this hose offers superior durability, flexibility, and performance.
+              </p> </div>
+            
+            </div>
+            <script>
+            // Get the modal
+            var modal78 = document.getElementById("myModal78");
+            
+            // Get the button that opens the modal
+            var btn78 = document.getElementById("myBtn78");
+            
+            // Get the <span> element that closes the modal
+            var span78 = document.getElementsByClassName("close78")[0];
+            
+            // When the user clicks the button, open the modal
+            btn78.onclick = function() {
+              modal78.style.display = "block";
+            }
+            
+            // When the user clicks on <span> (x), close the modal
+            span78.onclick = function() {
+              modal78.style.display = "none";
+            }
+            
+            // When the user clicks anywhere outside of the modal, close it
+            window.onclick = function(event) {
+              if (event.target == modal78) {
+              modal78.style.display = "none";
+              }
+            }
+            </script>
         </div>
       </div>
       <div class="product">
@@ -344,6 +794,47 @@ <h3>NEPTUNE POWER SPRAYERS</h3>
           >
             Add to Cart
           </button>
+          <button id="myBtn77" class="add-to-cart" style="margin-left: 20px; background-color: rgb(119, 159, 146);">
+            Description
+            </button>
+            <!-- The Modal -->
+            <div id="myModal77" class="modal">
+            
+            <!-- Modal content -->
+            <div class="modal-content" style="border-radius: 10px; background-color:rgb(119, 159, 146); ;">
+              <span class="close77">&times;</span>
+              
+              <p style="text-align: left;">Introducing the NEPTUNE POWER SPRAYERS, your go-to solution for efficient and effective spraying in agricultural, horticultural, and cleaning applications. Designed with precision and durability in mind, these power sprayers deliver exceptional performance to meet the needs of both professionals and homeowners.
+              </p> </div>
+            
+            </div>
+            <script>
+            // Get the modal
+            var modal77 = document.getElementById("myModal77");
+            
+            // Get the button that opens the modal
+            var btn77 = document.getElementById("myBtn77");
+            
+            // Get the <span> element that closes the modal
+            var span77 = document.getElementsByClassName("close77")[0];
+            
+            // When the user clicks the button, open the modal
+            btn77.onclick = function() {
+              modal77.style.display = "block";
+            }
+            
+            // When the user clicks on <span> (x), close the modal
+            span77.onclick = function() {
+              modal77.style.display = "none";
+            }
+            
+            // When the user clicks anywhere outside of the modal, close it
+            window.onclick = function(event) {
+              if (event.target == modal77) {
+              modal77.style.display = "none";
+              }
+            }
+            </script>
         </div>
       </div>
       <div class="product">
@@ -365,6 +856,46 @@ <h3>NEPTUNE CHAINSAW MACHINE</h3>
           >
             Add to Cart
           </button>
+          <button id="myBtn76" class="add-to-cart" style="margin-left: 20px; background-color: rgb(119, 159, 146);">
+            Description
+            </button>
+            <!-- The Modal -->
+            <div id="myModal76" class="modal">
+            
+            <!-- Modal content -->
+            <div class="modal-content" style="border-radius: 10px; background-color:rgb(119, 159, 146); ;">
+              <span class="close76">&times;</span>
+              
+              <p style="text-align: left;">Experience cutting precision and durability with the NEPTUNE CHAINSAW MACHINE. Engineered for both professional and residential use, this chainsaw is designed to handle a variety of cutting tasks with ease and efficiency.    </p> </div>
+            
+            </div>
+            <script>
+            // Get the modal
+            var modal76 = document.getElementById("myModal76");
+            
+            // Get the button that opens the modal
+            var btn76 = document.getElementById("myBtn76");
+            
+            // Get the <span> element that closes the modal
+            var span76 = document.getElementsByClassName("close76")[0];
+            
+            // When the user clicks the button, open the modal
+            btn76.onclick = function() {
+              modal76.style.display = "block";
+            }
+            
+            // When the user clicks on <span> (x), close the modal
+            span76.onclick = function() {
+              modal76.style.display = "none";
+            }
+            
+            // When the user clicks anywhere outside of the modal, close it
+            window.onclick = function(event) {
+              if (event.target == modal76) {
+              modal76.style.display = "none";
+              }
+            }
+            </script>
         </div>
       </div>
       <div class="product">
@@ -386,6 +917,54 @@ <h3>CORIANDER SEEDS</h3>
           >
             Add to Cart
           </button>
+          <button id="myBtn75" class="add-to-cart" style="margin-left: 20px; background-color: rgb(119, 159, 146);">
+            Description
+            </button>
+            <!-- The Modal -->
+            <div id="myModal75" class="modal">
+            
+            <!-- Modal content -->
+            <div class="modal-content" style="border-radius: 10px; background-color:rgb(119, 159, 146); ;">
+              <span class="close75">&times;</span>
+              
+              <p style="text-align: left;"><h3 style="text-align: left;">Key Features:</h3><br><p style="text-align: left;">
+                Premium Quality<br>
+                
+                Sourced from the finest coriander plants to ensure freshness and flavor.
+                Carefully selected and processed to maintain high quality.<br>
+                Distinctive Flavor<br>
+                
+                Delivers a unique, citrusy, and slightly spicy flavor profile.
+                Ideal for enhancing a wide range of dishes, including curries, soups, and stews.           </p></p> </div>
+            
+            </div>
+            <script>
+            // Get the modal
+            var modal75 = document.getElementById("myModal75");
+            
+            // Get the button that opens the modal
+            var btn75 = document.getElementById("myBtn75");
+            
+            // Get the <span> element that closes the modal
+            var span75 = document.getElementsByClassName("close75")[0];
+            
+            // When the user clicks the button, open the modal
+            btn75.onclick = function() {
+              modal75.style.display = "block";
+            }
+            
+            // When the user clicks on <span> (x), close the modal
+            span75.onclick = function() {
+              modal75.style.display = "none";
+            }
+            
+            // When the user clicks anywhere outside of the modal, close it
+            window.onclick = function(event) {
+              if (event.target == modal75) {
+              modal75.style.display = "none";
+              }
+            }
+            </script>
         </div>
       </div>
       <div class="product">
@@ -407,6 +986,46 @@ <h3>BOTTLE GOURD SEEDS</h3>
           >
             Add to Cart
           </button>
+          <button id="myBtn74" class="add-to-cart" style="margin-left: 20px; background-color: rgb(119, 159, 146);">
+            Description
+            </button>
+            <!-- The Modal -->
+            <div id="myModal74" class="modal">
+            
+            <!-- Modal content -->
+            <div class="modal-content" style="border-radius: 10px; background-color:rgb(119, 159, 146); ;">
+              <span class="close74">&times;</span>
+              
+              <p style="text-align: left;">Grow your own fresh and nutritious bottle gourds with our high-quality BOTTLE GOURD SEEDS. Known for their versatile culinary uses and health benefits, these seeds are perfect for home gardens and are easy to cultivate.       </p> </div>
+            
+            </div>
+            <script>
+            // Get the modal
+            var modal74 = document.getElementById("myModal74");
+            
+            // Get the button that opens the modal
+            var btn74 = document.getElementById("myBtn74");
+            
+            // Get the <span> element that closes the modal
+            var span74 = document.getElementsByClassName("close74")[0];
+            
+            // When the user clicks the button, open the modal
+            btn74.onclick = function() {
+              modal74.style.display = "block";
+            }
+            
+            // When the user clicks on <span> (x), close the modal
+            span74.onclick = function() {
+              modal74.style.display = "none";
+            }
+            
+            // When the user clicks anywhere outside of the modal, close it
+            window.onclick = function(event) {
+              if (event.target == modal74) {
+              modal74.style.display = "none";
+              }
+            }
+            </script>
         </div>
       </div>
       <div class="product">
@@ -428,6 +1047,47 @@ <h3>HYBRID CHILLI SEEDS (GREEN CHILLI)</h3>
           >
             Add to Cart
           </button>
+          <button id="myBtn73" class="add-to-cart" style="margin-left: 20px; background-color: rgb(119, 159, 146);">
+            Description
+            </button>
+            <!-- The Modal -->
+            <div id="myModal73" class="modal">
+            
+            <!-- Modal content -->
+            <div class="modal-content" style="border-radius: 10px; background-color:rgb(119, 159, 146); ;">
+              <span class="close73">&times;</span>
+              
+              <p style="text-align: left;">Grow vibrant, high-yielding green chillies with our HYBRID CHILLI SEEDS. Designed for optimal performance and robust flavor, these seeds are ideal for both home gardeners and commercial growers looking to cultivate a prolific and high-quality chilli crop.
+              </p> </div>
+            
+            </div>
+            <script>
+            // Get the modal
+            var modal73 = document.getElementById("myModal73");
+            
+            // Get the button that opens the modal
+            var btn73 = document.getElementById("myBtn73");
+            
+            // Get the <span> element that closes the modal
+            var span73 = document.getElementsByClassName("close73")[0];
+            
+            // When the user clicks the button, open the modal
+            btn73.onclick = function() {
+              modal73.style.display = "block";
+            }
+            
+            // When the user clicks on <span> (x), close the modal
+            span73.onclick = function() {
+              modal73.style.display = "none";
+            }
+            
+            // When the user clicks anywhere outside of the modal, close it
+            window.onclick = function(event) {
+              if (event.target == modal73) {
+              modal73.style.display = "none";
+              }
+            }
+            </script>
         </div>
       </div>
       <div class="product">
@@ -449,6 +1109,47 @@ <h3>HYBRID BRINJAL SEEDS</h3>
           >
             Add to Cart
           </button>
+          <button id="myBtn72" class="add-to-cart" style="margin-left: 20px; background-color: rgb(119, 159, 146);">
+            Description
+            </button>
+            <!-- The Modal -->
+            <div id="myModal72" class="modal">
+            
+            <!-- Modal content -->
+            <div class="modal-content" style="border-radius: 10px; background-color:rgb(119, 159, 146); ;">
+              <span class="close72">&times;</span>
+              
+              <p style="text-align: left;">Achieve a bountiful harvest of high-quality brinjals with our HYBRID BRINJAL SEEDS. Perfect for both home gardeners and commercial growers, these seeds offer superior yield, disease resistance, and exceptional fruit quality.
+              </p> </div>
+            
+            </div>
+            <script>
+            // Get the modal
+            var modal72 = document.getElementById("myModal72");
+            
+            // Get the button that opens the modal
+            var btn72 = document.getElementById("myBtn72");
+            
+            // Get the <span> element that closes the modal
+            var span72 = document.getElementsByClassName("close72")[0];
+            
+            // When the user clicks the button, open the modal
+            btn72.onclick = function() {
+              modal72.style.display = "block";
+            }
+            
+            // When the user clicks on <span> (x), close the modal
+            span72.onclick = function() {
+              modal72.style.display = "none";
+            }
+            
+            // When the user clicks anywhere outside of the modal, close it
+            window.onclick = function(event) {
+              if (event.target == modal72) {
+              modal72.style.display = "none";
+              }
+            }
+            </script>
         </div>
       </div>
       <div class="product">
@@ -470,6 +1171,47 @@ <h3>BIOFIT SOIL ENHANCEMENT</h3>
           >
             Add to Cart
           </button>
+          <button id="myBtn71" class="add-to-cart" style="margin-left: 20px; background-color: rgb(119, 159, 146);">
+            Description
+            </button>
+            <!-- The Modal -->
+            <div id="myModal71" class="modal">
+            
+            <!-- Modal content -->
+            <div class="modal-content" style="border-radius: 10px; background-color:rgb(119, 159, 146); ;">
+              <span class="close71">&times;</span>
+              
+              <p style="text-align: left;">Unlock the full potential of your garden or farm with BIOFIT SOIL ENHANCEMENT, a premium soil amendment designed to improve soil health, structure, and fertility. Perfect for enhancing plant growth and optimizing yields, this product provides a comprehensive solution for soil manageme
+              </p> </div>
+            
+            </div>
+            <script>
+            // Get the modal
+            var modal71 = document.getElementById("myModal71");
+            
+            // Get the button that opens the modal
+            var btn71 = document.getElementById("myBtn71");
+            
+            // Get the <span> element that closes the modal
+            var span71 = document.getElementsByClassName("close71")[0];
+            
+            // When the user clicks the button, open the modal
+            btn71.onclick = function() {
+              modal71.style.display = "block";
+            }
+            
+            // When the user clicks on <span> (x), close the modal
+            span71.onclick = function() {
+              modal71.style.display = "none";
+            }
+            
+            // When the user clicks anywhere outside of the modal, close it
+            window.onclick = function(event) {
+              if (event.target == modal71) {
+              modal71.style.display = "none";
+              }
+            }
+            </script>
         </div>
       </div>
       <div class="product">
@@ -491,6 +1233,47 @@ <h3>BIOFIT CULTURE BANNER</h3>
           >
             Add to Cart
           </button>
+          <button id="myBtn10" class="add-to-cart" style="margin-left: 20px; background-color: rgb(119, 159, 146);">
+            Description
+            </button>
+            <!-- The Modal -->
+            <div id="myModal10" class="modal">
+            
+            <!-- Modal content -->
+            <div class="modal-content" style="border-radius: 10px; background-color:rgb(119, 159, 146); ;">
+              <span class="close10">&times;</span>
+              
+              <p style="text-align: left;">Elevate your brand presence and communicate your commitment to sustainability and innovation with the BIOFIT CULTURE BANNER. Designed for promotional and informational use, this banner effectively showcases your dedication to eco-friendly practices and advanced soil solutions.
+              </p> </div>
+            
+            </div>
+            <script>
+            // Get the modal
+            var modal10 = document.getElementById("myModal10");
+            
+            // Get the button that opens the modal
+            var btn10 = document.getElementById("myBtn10");
+            
+            // Get the <span> element that closes the modal
+            var span10 = document.getElementsByClassName("close10")[0];
+            
+            // When the user clicks the button, open the modal
+            btn10.onclick = function() {
+              modal10.style.display = "block";
+            }
+            
+            // When the user clicks on <span> (x), close the modal
+            span10.onclick = function() {
+              modal10.style.display = "none";
+            }
+            
+            // When the user clicks anywhere outside of the modal, close it
+            window.onclick = function(event) {
+              if (event.target == modal10) {
+              modal10.style.display = "none";
+              }
+            }
+            </script>
         </div>
       </div>
       <div class="product">
@@ -512,6 +1295,47 @@ <h3>SLURRY BUGS</h3>
           >
             Add to Cart
           </button>
+          <button id="myBtn9" class="add-to-cart" style="margin-left: 20px; background-color: rgb(119, 159, 146);">
+            Description
+            </button>
+            <!-- The Modal -->
+            <div id="myModal9" class="modal">
+            
+            <!-- Modal content -->
+            <div class="modal-content" style="border-radius: 10px; background-color:rgb(119, 159, 146); ;">
+              <span class="close9">&times;</span>
+              
+              <p style="text-align: left;">Optimize your waste management and composting processes with SLURRY BUGS, a revolutionary solution designed to enhance the decomposition of organic waste and improve slurry quality. Ideal for agricultural and industrial applications, these bioactive agents offer efficient and environmentally-friendly waste treatment.
+              </p> </div>
+            
+            </div>
+            <script>
+            // Get the modal
+            var modal9 = document.getElementById("myModal9");
+            
+            // Get the button that opens the modal
+            var btn9 = document.getElementById("myBtn9");
+            
+            // Get the <span> element that closes the modal
+            var span9 = document.getElementsByClassName("close9")[0];
+            
+            // When the user clicks the button, open the modal
+            btn9.onclick = function() {
+              modal9.style.display = "block";
+            }
+            
+            // When the user clicks on <span> (x), close the modal
+            span9.onclick = function() {
+              modal9.style.display = "none";
+            }
+            
+            // When the user clicks anywhere outside of the modal, close it
+            window.onclick = function(event) {
+              if (event.target == modal9) {
+              modal9.style.display = "none";
+              }
+            }
+            </script>
         </div>
       </div>
       <div class="product">
@@ -533,6 +1357,47 @@ <h3>FERTILISERS NATURAL LAWN FOOD</h3>
           >
             Add to Cart
           </button>
+          <button id="myBtn8" class="add-to-cart" style="margin-left: 20px; background-color: rgb(119, 159, 146);">
+            Description
+            </button>
+            <!-- The Modal -->
+            <div id="myModal8" class="modal">
+            
+            <!-- Modal content -->
+            <div class="modal-content" style="border-radius: 10px; background-color:rgb(119, 159, 146); ;">
+              <span class="close8">&times;</span>
+              
+              <p style="text-align: left;">Revitalize your lawn with our NATURAL LAWN FOOD FERTILISER, a premium organic solution designed to nourish and enhance the health of your grass while promoting a lush, green, and vibrant lawn. Ideal for homeowners seeking an eco-friendly approach to lawn care.
+              </p> </div>
+            
+            </div>
+            <script>
+            // Get the modal
+            var modal8 = document.getElementById("myModal8");
+            
+            // Get the button that opens the modal
+            var btn8 = document.getElementById("myBtn8");
+            
+            // Get the <span> element that closes the modal
+            var span8 = document.getElementsByClassName("close8")[0];
+            
+            // When the user clicks the button, open the modal
+            btn8.onclick = function() {
+              modal8.style.display = "block";
+            }
+            
+            // When the user clicks on <span> (x), close the modal
+            span8.onclick = function() {
+              modal8.style.display = "none";
+            }
+            
+            // When the user clicks anywhere outside of the modal, close it
+            window.onclick = function(event) {
+              if (event.target == modal8) {
+              modal8.style.display = "none";
+              }
+            }
+            </script>
         </div>
       </div>
     </div>