added scroll and hovering effects to testimonials section

index.html

@@ -284,6 +284,27 @@ <h4 class="portfolio-heading">Climate smart Farming</h4>
     <h1 id="testi">OUR TESTIMONIALS</h1>
     <div class="wrapper">
       <script src="./testimonials/testimonials.js" defer></script>
+      <script>
+        document.addEventListener("DOMContentLoaded", function() {
+          const cards = document.querySelectorAll('.card');
+
+          cards.forEach(card => {
+            card.addEventListener('mouseover', () => {
+              cards.forEach(otherCard => {
+                if (otherCard !== card) {
+                  otherCard.classList.add('shrink'); 
+                }
+              });
+            });
+
+            card.addEventListener('mouseout', () => {
+              cards.forEach(otherCard => {
+                otherCard.classList.remove('shrink');
+              });
+            });
+          });
+        });
+      </script>
       <i id="left" class="fa-solid fa-angle-left"></i>
 
       <ul class="carousel">

script.js

@@ -131,12 +131,11 @@ ScrollReveal({
     delay:200
 });
 
-ScrollReveal().reveal('.home-content, .heading',{ origin:'top' });
-ScrollReveal().reveal('.home-img, .services-container, .portfolio-box, .contact form',{ origin:'bottom' });
+ScrollReveal().reveal('.home-content, .heading, #testi',{ origin:'top' });
+ScrollReveal().reveal('.home-img, .services-container, .portfolio-box, .contact form, .carousel',{ origin:'bottom' });
 ScrollReveal().reveal('.home-content h1, .about-img',{ origin:'left' });
 ScrollReveal().reveal('.home-content p, .about-content',{ origin:'left' });
 
-
 const typed=new Typed('.multiple-text',{
     strings:['Sow','Learn','Grow' ],
     typeSpeed:100,
@@ -202,8 +201,6 @@ form.addEventListener('submit', (event) => {
   }
 });
 
-
-
 (function(){
   let modal = document.getElementById("modal");
 

style.css

@@ -1870,6 +1870,46 @@ font-size: 36px;
     transition: all 0.3s ease-out;
 }
 
+/* Testimonials Section Hover Effect */
+.card {
+  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
+  border-radius: 10px; /* Rounded corners */
+  clip-path: inset(0 round 10px); /* Clip the corners */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Initial subtle shadow */
+}
+
+.card:hover {
+  background-color: #f9f9f9; /* Lighter gray background color on hover */
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* More pronounced shadow */
+  color: #333; /* Darker text color */
+}
+
+.card .img img {
+  border-radius: 10px 10px 0 0; /* Rounded corners for the image at the top */
+  transition: transform 0.3s ease;
+}
+
+.card:hover .img img {
+  transform: scale(1.1); /* Slightly zoom in the image on hover */
+}
+
+.card h2, .card span {
+  transition: color 0.3s ease;
+}
+
+.card:hover h2 {
+  color: #007BFF; /* Change heading color on hover */
+}
+
+.card:hover span {
+  color: #555; /* Change text color on hover */
+}
+
+.card.shrink {
+  transform: scale(0.9); /* Shrink effect for non-hovered cards */
+  opacity: 0.7; /* Slight transparency to make it less prominent */
+}
+
 @-webkit-keyframes spin {
     0% {
         -webkit-transform: rotate(0deg);