oky

index.html

@@ -67,30 +67,44 @@ <h1>Make your business <span> more powerful</span> with us</h1>
 
  <!-- commapny deltiles strat  -->
 
-<section class="02">
+<section class="Section_02">
 <div class="container">
+<div class="Details_content">
 
+<div class="Details_card">
+  <div class="details_text">
+    <h4>250+</h4>
+    <p>Project Completed</p>
+   </div>
+<img src="images/rating/Line 202 (2).jpg" alt="">
 
+</div>
 
 
 
 
+<div class="Details_card">
+ <div class="details_text">
+  <h4>119</h4>
+  <p>  Happy Customer</p>
+ </div>
+  <img src="images/rating/Line 202 (2).jpg" alt="">
+
+  </div>
 
 
 
 
-
-
-
-
-
-
-
+  <div class="Details_card_2">
+    <h4> 7+</h4>
+    <p> Years Experience</p>
+  </div>
+</div>
 </div>
 </section>
 
 
-
+<!-- How it Wokrs -->
 
 
 

style.css

@@ -96,20 +96,7 @@ img.line_animation {
   align-items: center;
   gap: 10px;
 }
-.view_btn {
-  padding: 14px 32px;
-  background-color: #a8fe3b;
-  color: #111111;
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 1.7777777777777777em;
-  text-decoration: none;
-  max-width: 211px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-}
+
 .demo_btn {
   padding: 14px 32px;
   background-color: transparent;
@@ -129,16 +116,83 @@ img.line_animation {
 .slider_wrapper {
   min-height: 580px;
   position: relative;
-  border: 1px solid red;
+   
 }
 .hero_slider {
   position: relative;
 }
+.view_btn {
+  padding: 14px 32px;
+  background-color: #a8fe3b;
+  color: #111111;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 1.7777777777777777em;
+  text-decoration: none;
+  max-width: 211px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  z-index: 1;
+}
+
+
+
+
+
 .view_btn {
   position: absolute;
-  top: 95%;
+  top: 91%;
   left: 50%;
   transform: translate(-50%, -50%);
 
 }
-/* commapny deltiles strat   */
+/* commapny deltiles strat   */
+ .Section_02 {
+  background: #052846;
+  min-height: 371px;
+  position: relative;
+    bottom: 57px;
+ }
+ .Details_content {
+
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  padding-top: 120px;
+ }
+ .Details_card {
+  max-width: 351px;
+  min-height: 131px;
+  display: flex;
+  align-items: center;
+  gap: 125px;
+
+ }
+ .Details_card_2 {
+  max-width: 204px;
+  min-height: 131px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 20px;
+ }
+ .details_text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+ }
+ .Details_content h4 {
+  font-size: 64px;
+  line-height: 1.21875em;
+  font-weight: 600;
+  color: #FFF;
+ }
+ .Details_content p {
+font-size: 23px;
+line-height: 1.1666666666666667em;
+color: #FFF;
+
+ }
+