feat: Redesigning section

counter.css

@@ -1,70 +1,74 @@
-
-
-  /* counter */
+ /* counter */
   .wrapper {
-
-    width: 80%;
-
+   background-image: url('./img/img1.jpeg');
+   /* background: no-repeat fill; */
+    width: 100vw;
     margin-left: auto;
     margin-right: auto;
     align-items: center;
     display: flex;
-    justify-content: space-between;
+    justify-content: space-evenly;
 
   }
   .countitem {
     width: 28vmin;
-    height: 28vmin;
+    height: 33vmin;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     padding: 1em 0;
     font-size: 16px;
     border-width: 0.5px ;
-    border-color: solid purple;
-    border-radius: 0.5em;
-    background: linear-gradient(white,rgb(153, 139, 251));
-    border-bottom: 10px solid #40349c;
+    /* border-color: solid purple; */
+    /* border-radius: 0.5em; */
+    /* background: linear-gradient(white,rgb(153, 139, 251)); */
+    /* border-bottom: 10px solid #40349c; */
   }
   .countitem i {
-    color: #06006e;
+    color: #052905;
     font-size: 2.5em;
     text-align: center;
   }
   span.num {
-    color: #32316a;
+    color: #052905;
     display: grid;
     place-items: center;
     font-weight: 600;
     font-size: 3em;
   }
   span.text {
-    color: #6c2121;
-    font-size: 1.2em;
+    font-weight: bold;
+    color: #0f0f0f;
+    font-size: 1.5rem;
     text-align: center;
     padding: 0em 00em;
     font-weight: 400;
     margin-bottom: 1em;
     line-height: 0;
   }
+
   @media screen and (max-width: 1024px) {
-    .wrapper {
+    /* .wrapper {
       width: 85vw;
-    }
+    } */
     .countitem{
       height: 26vmin;
       width: 26vmin;
       font-size: 12px;
     }
   }
-  @media screen and (max-width: 768px) {
+  @media screen and (max-width: 900px) {
     .wrapper {
-      width: 90vw;
+      /* width: 90vw; */
+      background-image: none;
+      flex-direction: column;
       flex-wrap: wrap;
-      gap: 30px;
+      gap: 10px; 
     }
     .countitem {
+      background-color: antiquewhite;
       width: calc(50% - 40px);
+      margin: 3px;
       height: 30vmin;
       font-size: 14px;
     }
@@ -74,7 +78,7 @@
       gap: 15px;
     }
     .countitem {
-      width: 100%;
+      width: 90%;
       height: 25vmin;
       font-size: 8px;
     }

index.html

@@ -529,6 +529,48 @@ <h2 data-max="30" id="test">+ Developers</h2>
       </div>  -->
 
 
+      <section>
+        <div class="wrapper">
+            <div class="countitem">
+              <i class="fa-solid fa-handshake-angle"></i>
+              <span class="num" data-val="25000">18000</span>
+              <span class="text">Guides</span>
+            </div>
+            <div class="countitem">
+              <i class="fa-solid fa-suitcase-rolling"></i> 
+              <span class="num" data-val="20000">10000</span>
+              <span class="text">Tours</span>
+            </div>
+            <div class="countitem">
+              <i class="fa-solid fa-location-dot"></i>
+              <span class="num" data-val="20000">10000</span>
+              <span class="text">Destinations</span>
+            </div>
+
+          </div>
+        </section>
+
+<script>
+  let valueDisplays = document.querySelectorAll(".num");
+let interval = 100000;
+valueDisplays.forEach((valueDisplay) => {
+  let startValue = 17500;
+  let endValue = parseInt(valueDisplay.getAttribute("data-val"));
+  let duration = 0.05 ;
+  if (endValue== 25000){
+    startValue= 22500;
+    // duration= 3;
+  }
+  let counter = setInterval(function () {
+    startValue += 10;
+    valueDisplay.textContent = startValue;
+    if (startValue == endValue) {
+      clearInterval(counter);
+    }
+  }, duration)
+});
+</script>
+
     <section>
       <div class="wrapper">
         <div class="countitem">
@@ -569,7 +611,6 @@ <h2 data-max="30" id="test">+ Developers</h2>
 
 
 
-
     <br><br>
     <!-- ending the section of About Us -->