diff --git a/css/homepage.css b/css/homepage.css
index 320c0c1..06f8b0c 100644
--- a/css/homepage.css
+++ b/css/homepage.css
@@ -648,100 +648,6 @@ footer h3 {
   margin-top: 40px;
   margin-left: 20px;
 }
-/* testimonils stylng  */
-.testi{
-  margin-top: 100px;
-}
-.hero{
-  background: #222;
-  height: 120vh;
-  width: 100%;
-  position: relative;
-}
-.hero h1{
-  text-align: center;
-  padding-top: 80px;
-  font-size: 4rem;
-  color: #8a39e1;
-}
-.slide-row{
-  display: flex;
-  width: 3200px;
-  overflow-x:visible;
-  transition: all 0.5s;
-}
-.slide-col{
-  width: 800px;
-  height: 400px;
-  position: relative;
-}
-.user-img{
-  position: absolute;
-  top: 0;
-  right: 0;
-  height: 100%;
-}
-.user-img img{
-  height:100%;
-border-radius: 10px;
-
-}
-.user-text{
-  background-color: #8a39e1;
-  width: 520px;
-  height: 270px;
-  position: absolute;
-  left: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  border-radius: 10px;
-  color: #fff;
-  padding: 45px;
-  box-sizing:border-box;
-  z-index: 2;
-}
-.user-text p{
-  font-size: 18px;
-  line-height: 24px;
-}
-.user-text h3{
-  margin: 35px 0px 5px;
-  color: #FBB31C;
-}
-.container2{
-  margin-top: 40px;
-  width: 800px;
-  height: 400px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) ;
-}
-.indicator{
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: -50px;
-}
-.btn2{
-  display: inline-block;
-  height: 15px;
-  width: 15px;
-  margin: 4px;
-  border-radius: 10px;
-  background-color: #8a39e1;
-  cursor: pointer;
-  transition: all 0.5s;
-}
-.active2{
-  width: 45px;
-}
-.testimonial{
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
 
 @media only screen and (max-width: 960px) {
   main .row {
@@ -926,3 +832,229 @@ footer p a {
   color: red;
 }
 
+
+
+/* testimonils stylng  */
+.testi{
+  margin-top: 100px;
+}
+.hero{
+  background: #222;
+  height: 120vh;
+  width: 100%;
+  position: relative;
+}
+.hero h1{
+  text-align: center;
+  padding-top: 80px;
+  font-size: 4rem;
+  color: #8a39e1;
+}
+.slide-row{
+  display: flex;
+  width: 3200px;
+  overflow-x:visible;
+  transition: all 0.5s;
+}
+.slide-col{
+  width: 800px;
+  height: 400px;
+  position: relative;
+}
+.user-img{
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+}
+.user-img img{
+  height:100%;
+border-radius: 10px;
+
+}
+.user-text{
+  background-color: #8a39e1;
+  width: 520px;
+  height: 270px;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  border-radius: 10px;
+  color: #fff;
+  padding: 45px;
+  box-sizing:border-box;
+  z-index: 2;
+}
+.user-text p{
+  font-size: 18px;
+  line-height: 24px;
+}
+.user-text h3{
+  margin: 35px 0px 5px;
+  color: #FBB31C;
+}
+.container{
+  margin-top: 40px;
+  width: 800px;
+  height: 400px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) ;
+}
+.indicator{
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -50px;
+}
+.btn2{
+  display: inline-block;
+  height: 15px;
+  width: 15px;
+  margin: 4px;
+  border-radius: 10px;
+  background-color: #8a39e1;
+  cursor: pointer;
+  transition: all 0.5s;
+}
+.active2{
+  width: 45px;
+}
+.testimonial{
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* lightmode testimonials  */
+.light-mode .hero{
+  background: #fff;
+
+}
+
+
+/* Testimonials resposivity  */
+@media(max-width:947px){
+  .hero{
+    height: 90vh;
+  }
+  .hero h1{
+      font-size: 2.8rem;
+    }
+    .slide-row{
+      width: 1920px;
+    }
+    .slide-col{
+      font-size: 14px;
+      width: 960px;
+      height: 320px;
+    }
+    .user-img{
+      height: 95%;
+    }
+    .user-img img{
+      height:95%;  
+    }
+    .user-text{
+      width: 320px;
+      height: 220px;
+      padding: 20px;
+      z-index: 2;
+    }
+    .user-text p{
+      font-size: 15px;
+      line-height: 22px;
+    }
+    .user-text h3{
+      margin: 25px 0px 5px;
+    }
+    .container{
+      margin-top: 30px;
+      width: 480px;
+      height: 350px;
+    }
+}
+
+@media(max-width:690px){
+  .hero{
+    height: 80vh;
+  }
+  .hero h1{
+      font-size: 2.2rem;
+    }
+    .slide-row{
+      width: 1840px;
+    }
+    .slide-col{
+      font-size: 14px;
+      width: 920px;
+      height: 300px;
+    }
+    .user-img{
+      height: 95%;
+    }
+    .user-img img{
+      height:95%;  
+    }
+    .user-text{
+      width: 300px;
+      height: 170px;
+      padding: 12px;
+      z-index: 2;
+    }
+    .user-text p{
+      font-size: 12px;
+      line-height: 18px;
+    }
+    .user-text h3{
+      margin: 15px 0px 2px;
+    }
+    .container{
+      margin-top: 30px;
+      width: 460px;
+      height: 300px;
+    }
+  }
+@media(max-width:500px){
+  .hero{
+    height: 75vh;
+  }
+  .hero h1{
+    font-size: 2rem;
+  }
+  .slide-row{
+    width: 1200px;
+  }
+  .slide-col{
+    font-size: 8px;
+    width: 600px;
+    height: 300px;
+  }
+  .user-img{
+    height: 85%;
+  }
+  .user-img img{
+    height:85%;  
+  }
+  .user-text{
+    width: 170px;
+    height: 190px;
+    padding: 12px;
+    z-index: 2;
+  }
+  .user-text p{
+    font-size: 8.5px;
+    line-height: 18px;
+  }
+  .user-text h3{
+    margin: 15px 0px 2px;
+  }
+  .container{
+    margin-top: 30px;
+    width: 300px;
+    height: 270px;
+  }
+}
+
diff --git a/index.html b/index.html
index 15d85ac..ebdc0c7 100644
--- a/index.html
+++ b/index.html
@@ -112,7 +112,7 @@ <h2>Our services<span class="toolsicon">⚙️</span></h2>
 <div class="hero">
   <h1>Testimonials</h1>
 
-<div class="container2">
+<div class="container">
   <div class="indicator">
     <span class="btn2 active2"></span>
     <span class="btn2"></span>
@@ -207,8 +207,13 @@ <h3>
 
 <!-- script for testimonials  -->
 <script>
+  
   var btn2 = document.getElementsByClassName("btn2");
   var slide = document.getElementById("slide");
+  const mediaQuery2 = window.matchMedia('(min-width: 947px)');
+function handleTabletChange2(e) {
+  // Check if the media query is true
+  if (e.matches) {
 btn2[0].onclick = function(){
   slide.style.transform ="translateX(0px)";
   for(var i=0; i<4;i++){
@@ -237,6 +242,141 @@ <h3>
   }
   this.classList.add("active2");
 }
+}
+}
+// Register event listener
+mediaQuery2.addListener(handleTabletChange2);
+
+// Initial check
+handleTabletChange2(mediaQuery2);
+
+const mediaQuery = window.matchMedia('(max-width: 690px)');
+function handleTabletChange(e) {
+  // Check if the media query is true
+  if (e.matches) {
+
+  btn2[0].onclick = function(){
+  slide.style.transform ="translateX(0px)";
+  for(var i=0; i<4;i++){
+    btn2[i].classList.remove("active2");
+  }
+  this.classList.add("active2");
+}
+btn2[1].onclick = function(){
+  slide.style.transform ="translateX(-460px)";
+  for(var i=0; i<4;i++){
+    btn2[i].classList.remove("active2");
+  }
+  this.classList.add("active2");
+}
+btn2[2].onclick = function(){
+  slide.style.transform ="translateX(-920px)";
+  for(var i=0; i<4;i++){
+    btn2[i].classList.remove("active2");
+  }
+  this.classList.add("active2");
+}
+btn2[3].onclick = function(){
+  slide.style.transform ="translateX(-1380px)";
+  for(var i=0; i<4;i++){
+    btn2[i].classList.remove("active2");
+  }
+  this.classList.add("active2");
+}
+}
+}
+// Register event listener
+mediaQuery.addListener(handleTabletChange);
+
+// Initial check
+handleTabletChange(mediaQuery);
+
+
+const mediaQuery3 = window.matchMedia('(max-width: 500px)');
+function handleTabletChange3(e) {
+  // Check if the media query is true
+  if (e.matches) {
+
+  btn2[0].onclick = function(){
+  slide.style.transform ="translateX(0px)";
+  for(var i=0; i<4;i++){
+    btn2[i].classList.remove("active2");
+  }
+  this.classList.add("active2");
+}
+btn2[1].onclick = function(){
+  slide.style.transform ="translateX(-300px)";
+  for(var i=0; i<4;i++){
+    btn2[i].classList.remove("active2");
+  }
+  this.classList.add("active2");
+}
+btn2[2].onclick = function(){
+  slide.style.transform ="translateX(-600px)";
+  for(var i=0; i<4;i++){
+    btn2[i].classList.remove("active2");
+  }
+  this.classList.add("active2");
+}
+btn2[3].onclick = function(){
+  slide.style.transform ="translateX(-900px)";
+  for(var i=0; i<4;i++){
+    btn2[i].classList.remove("active2");
+  }
+  this.classList.add("active2");
+}
+}
+}
+// Register event listener
+mediaQuery3.addListener(handleTabletChange3);
+
+// Initial check
+handleTabletChange3(mediaQuery3);
+
+const mediaQuery4 = window.matchMedia('(max-width: 947px)');
+function handleTabletChange4(e) {
+  // Check if the media query is true
+  if (e.matches) {
+
+  btn2[0].onclick = function(){
+  slide.style.transform ="translateX(0px)";
+  for(var i=0; i<4;i++){
+    btn2[i].classList.remove("active2");
+  }
+  this.classList.add("active2");
+}
+btn2[1].onclick = function(){
+  slide.style.transform ="translateX(-480px)";
+  for(var i=0; i<4;i++){
+    btn2[i].classList.remove("active2");
+  }
+  this.classList.add("active2");
+}
+btn2[2].onclick = function(){
+  slide.style.transform ="translateX(-960px)";
+  for(var i=0; i<4;i++){
+    btn2[i].classList.remove("active2");
+  }
+  this.classList.add("active2");
+}
+btn2[3].onclick = function(){
+  slide.style.transform ="translateX(-1440px)";
+  for(var i=0; i<4;i++){
+    btn2[i].classList.remove("active2");
+  }
+  this.classList.add("active2");
+}
+}
+}
+// Register event listener
+mediaQuery4.addListener(handleTabletChange4);
+
+// Initial check
+handleTabletChange4(mediaQuery4);
+
+
+
+
 </script>
 
     <!-- Javascript  -->