diff --git a/index.css b/index.css
index f4e0291..d56a3c7 100644
--- a/index.css
+++ b/index.css
@@ -1,8 +1,8 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap");
 
 * {
-  font-family: 'Poppins', sans-serif;
+  font-family: "Poppins", sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
@@ -22,7 +22,7 @@ header ul li a:hover {
   text-underline-offset: transform scale(1.03);
 }
 header ul li::after {
-  content: '';
+  content: "";
   height: 2.5px;
   background: #fada5e;
   display: block;
@@ -80,7 +80,7 @@ header ul li a {
   font-weight: 500px;
   transition: 0.6s;
   font-size: 20px;
-  font-family: 'Roboto', sans-serif;
+  font-family: "Roboto", sans-serif;
 }
 
 .banner {
@@ -357,14 +357,17 @@ form {
 /* CSS TEXT ANIMATION */
 
 .info {
-  transform: translateY(-200%);
+  position: absolute;
+  top: 305px;
+  transform: translateY(100%);
+  transform: translateX(50%);
   color: white;
   font-size: 43px;
   text-align: center;
   margin-left: 5%;
 }
 .span {
-  font-family: 'Overpass', sans-serif;
+  font-family: "Overpass", sans-serif;
 }
 
 .start a {
@@ -424,7 +427,7 @@ form {
   width: 9em;
 }
 .ctn-preloader .animation-preloader .txt-loading {
-  font: bold 5em 'Montserrat', sans-serif;
+  font: bold 5em "Montserrat", sans-serif;
   text-align: center;
   user-select: none;
 }
@@ -540,7 +543,7 @@ form {
     width: 8em;
   }
   .ctn-preloader .animation-preloader .txt-loading {
-    font: bold 3.5em 'Montserrat', sans-serif;
+    font: bold 3.5em "Montserrat", sans-serif;
   }
 }
 
@@ -550,29 +553,69 @@ form {
     width: 7em;
   }
   .ctn-preloader .animation-preloader .txt-loading {
-    font: bold 2em 'Montserrat', sans-serif;
+    font: bold 2em "Montserrat", sans-serif;
   }
 }
 /*  PRELOADER END  */
 
 /* testimonial */
-.d-block{
-    padding-bottom: 170px;
-    padding-left: 538px;
-  }
-  
-  .head{
-    text-align: center;
-  }
-  
-  .text-box{
-    font-size: 16px;
+.d-block {
+  padding-bottom: 170px;
+  padding-left: 538px;
+}
+
+.head {
+  text-align: center;
+  text-transform: uppercase;
+  padding-bottom: 20px;
+}
+
+.text-box {
+  font-size: 16px;
   font-style: italic;
-  }
+}
 
-  .testimonial-section{
-    padding-top: 50px;
-    position: relative;
-    background-size: cover ;
-    background-color: #E8E8E8;
-  }
+.testimonial-section {
+  padding-top: 50px;
+  position: relative;
+  background-size: cover;
+  background-color: #e8e8e8;
+}
+/* How it Works */
+
+.section-steps {
+  background-color: #e8e8e8;
+  clear: both;
+  padding: 50px 20px 70px 20px;
+  margin: 0;
+}
+.step-box {
+  border-right: 1px solid #929217;
+}
+.step-box:last-child {
+  border-right: 0px solid #fff;
+}
+.works-section div {
+  color: #929217;
+  text-align: right;
+  font-size: 500%;
+}
+.works-section p {
+  text-align: justify;
+}
+
+.row {
+  max-width: 100%;
+  margin: 0 auto 0 auto;
+}
+.row {
+  zoom: 1;
+}
+.row:before,
+.row:after {
+  content: "";
+  display: table;
+}
+.row:after {
+  clear: both;
+}
diff --git a/index.html b/index.html
index 944c1e0..932a108 100644
--- a/index.html
+++ b/index.html
@@ -2,218 +2,244 @@
 <html lang="en">
 
 <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="index.css" />
-    <link rel="icon" href="./Images/banner.jpg" />
-    <script src="https://kit.fontawesome.com/9603a582d3.js" crossorigin="anonymous"></script>
-    <!-- CSS only -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
-    <!-- JavaScript Bundle with Popper -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-    <title>Dust Road Co.</title>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="index.css" />
+  <link rel="icon" href="./Images/banner.jpg" />
+  <script src="https://kit.fontawesome.com/9603a582d3.js" crossorigin="anonymous"></script>
+  <!-- CSS only -->
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
+  <!-- JavaScript Bundle with Popper -->
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+  <title>Dust Road Co.</title>
 </head>
 
 <body>
-    <!-- Pre-Loader Start -->
-    <section>
-        <div id="preloader">
-            <div id="ctn-preloader" class="ctn-preloader">
-                <div class="animation-preloader">
-                    <div class="spinner"></div>
-                    <div class="txt-loading">
-                        <span data-text-preloader="L" class="letters-loading"> L </span>
+  <!-- Pre-Loader Start -->
+  <section>
+    <div id="preloader">
+      <div id="ctn-preloader" class="ctn-preloader">
+        <div class="animation-preloader">
+          <div class="spinner"></div>
+          <div class="txt-loading">
+            <span data-text-preloader="L" class="letters-loading"> L </span>
 
-                        <span data-text-preloader="O" class="letters-loading"> O </span>
+            <span data-text-preloader="O" class="letters-loading"> O </span>
 
-                        <span data-text-preloader="A" class="letters-loading"> A </span>
+            <span data-text-preloader="A" class="letters-loading"> A </span>
 
-                        <span data-text-preloader="D" class="letters-loading"> D </span>
+            <span data-text-preloader="D" class="letters-loading"> D </span>
 
-                        <span data-text-preloader="I" class="letters-loading"> I </span>
+            <span data-text-preloader="I" class="letters-loading"> I </span>
 
-                        <span data-text-preloader="N" class="letters-loading"> N </span>
+            <span data-text-preloader="N" class="letters-loading"> N </span>
 
-                        <span data-text-preloader="G" class="letters-loading"> G </span>
-                    </div>
-                </div>
-                <div class="loader-section section-left"></div>
-                <div class="loader-section section-right"></div>
-            </div>
+            <span data-text-preloader="G" class="letters-loading"> G </span>
+          </div>
         </div>
-    </section>
-    <!-- Pre-Loader End -->
-    <header>
-        <a href="#" class="logo">
-            <img src="./Images/banner.jpg" class="fav" />
-        </a>
-        <ul id="navbarNav" class="list">
-            <!-- <i class="fa fa-times"onclick="hideMenu()"></i> -->
-            <li><a href="index.html">Home</a></li>
-            <li><a href="#">About</a></li>
-            <li><a href="#">Services</a></li>
-            <li><a href="#contact">Contact </a></li>
-        </ul>
-        <!-- <i class="fa fa-bars" onclick="showMenu()"></i> -->
-    </header>
-
-    <section class="banner"></section>
-    <div class="info">
-        A Step <span>Towards Bright Future!!</span>
-        <br />
-        <button type="" name="button" class="start">
-            <a href="sawo.html">Get Started</a>
-        </button>
+        <div class="loader-section section-left"></div>
+        <div class="loader-section section-right"></div>
+      </div>
+    </div>
+  </section>
+  <!-- Pre-Loader End -->
+  <header>
+    <a href="#" class="logo">
+      <img src="./Images/banner.jpg" class="fav" />
+    </a>
+    <ul id="navbarNav" class="list">
+      <!-- <i class="fa fa-times"onclick="hideMenu()"></i> -->
+      <li><a href="index.html">Home</a></li>
+      <li><a href="#">About</a></li>
+      <li><a href="#">Services</a></li>
+      <li><a href="#contact">Contact </a></li>
+    </ul>
+    <!-- <i class="fa fa-bars" onclick="showMenu()"></i> -->
+  </header>
+
+  <section class="banner"></section>
+  <div class="info">
+    A Step <span>Towards Bright Future!!</span>
+    <br />
+    <button type="" name="button" class="start">
+      <a href="sawo.html">Get Started</a>
+    </button>
+  </div>
+  <section class="section-steps">
+    <div class="row">
+      <h1 class="head"> How it works </h1>
     </div>
 
-    <!-- Testimonial Slider -->
-    <section class="testimonial-section">
-        <h1 class="head">WHAT OUR USERS SAY ABOUT OUR SERVICES?</h1>
-        <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
-            <div class="carousel-indicators">
-                <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"
-                    aria-current="true" aria-label="Slide 1"></button>
-                <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1"
-                    aria-label="Slide 2"></button>
-                <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2"
-                    aria-label="Slide 3"></button>
-            </div>
-            <div class="carousel-inner">
-                <div class="carousel-item active" data-bs-interval="10000">
-                    <img src="Images/img-2-modified.png" class="d-block">
-                    <div class="carousel-caption d-none d-md-block">
-                        <h5>Person 1</h5>
-                        <p class="text-box">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro voluptatum
-                            dolores
-                            blanditiis facere
-                            consequatur illo expedita alias, eligendi, magnam labore error ipsam placeat eum veniam
-                            nesciunt
-                            fuga
-                            ratione hic autem!"</p>
-                    </div>
-                </div>
-                <div class="carousel-item" data-bs-interval="2000">
-                    <img src="Images/img-1-modified.png" class="d-block">
-                    <div class="carousel-caption d-none d-md-block">
-                        <h5>Person 2</h5>
-                        <p class="text-box">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi,
-                            repudiandae!
-                            Repudiandae
-                            quod eaque vitae
-                            quas nemo, cum fugiat consequatur. Quo quas minima laborum animi tempore maiores ducimus
-                            perspiciatis, porro
-                            qui."</p>
-                    </div>
-                </div>
-                <div class="carousel-item">
-                    <img src="Images/img-4-modified.png" class="d-block">
-                    <div class="carousel-caption d-none d-md-block">
-                        <h5>Person 3</h5>
-                        <p class="text-box">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam dolorum,
-                            perferendis sed
-                            voluptates omnis
-                            asperiores. Optio voluptatum, aut officia possimus dolores, omnis obcaecati nihil cupiditate
-                            at
-                            ipsum
-                            officiis architecto sint!"</p>
-                    </div>
-                </div>
-            </div>
-            <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark"
-                data-bs-slide="prev">
-                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                <span class="visually-hidden">Previous</span>
-            </button>
-            <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark"
-                data-bs-slide="next">
-                <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                <span class="visually-hidden">Next</span>
-            </button>
+    <div class="row">
+      <div class="col step-box">
+        <div class="works-section">
+          <div>1</div>
+          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis ex quidem quis reprehenderit nisi
+            corrupti odit, iure, asperiores impedit consequatur tempora nam totam amet similique minus ad, repudiandae
+          </p>
         </div>
-    </section>
-    <!-- FOOTER -->
-
-    <footer>
-        <div class="content">
-            <h2 class="head-1">About</h2>
-            <p class="about">
-                Dust Car Co.is a step towards sustainable <br />environment. With the
-                to help users find <br />car & bike pool possibilities, thereby
-                <br />reducing traffic & commute costs.
-            </p>
-
-            <div class="explore">
-                <h2 class="ex">Explore</h2>
-
-                <ul class="serv-list">
-                    <li><a href="#">Car Pooling</a></li>
-                    <li><a href="#">Bike Pooling</a></li>
-                    <li><a href="#">We are hiring !</a></li>
-                </ul>
-            </div>
-
-            <!-- SOCIAL MEDIA -->
-            <div class="social">
-                <h2 class="follow">Follow Us</h2>
-                <a href="#"><i class="fab fa-instagram"></i></a>
-                <a href="#"><i class="fab fa-facebook"></i></a>
-                <a href="#"><i class="fab fa-twitter"></i></a>
-            </div>
-
-            <!--   NEWLETTER  -->
-            <form action="" class="newsletter" id="contact">
-                <h2 class="news">Subscribe Our Newsletter</h2>
-                <p class="sub">Get frequent updates from us .</p>
-                <div class="newsletter-box">
-                    <input class="emailbox" type="email" name="" value="" placeholder="Enter your email id" />
-                    <button type="button" name="button" class="letter">
-                        Subscribe
-                    </button>
-                </div>
-            </form>
+      </div>
+      <div class="col step-box">
+        <div class="works-section">
+          <div>2</div>
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero eum a, cupiditate necessitatibus itaque nobis
+            iure alias aut Iste perspiciatis ullam cumque laudantium aspernatur </p>
         </div>
-
-        <!-- Footer 2 -->
-        <div class="foot2">
-            <p class="f2" style="margin-bottom: 0px;">
-                Made with 💛 & ☕ by <span>Sandhya Agarwal</span> | ©<span id="year"></span>
-                All rights reserved<br />
-            </p>
+      </div>
+      <div class="col step-box">
+        <div class="works-section">
+          <div>3</div>
+          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis, accusantium. Ipsum, tenetur ducimus
+            molestias quam eum mollitia veritatis? Enim illo molestiae alias sapiente fugiat labore a id repellat
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Testimonial Slider -->
+  <section class="testimonial-section">
+    <h1 class="head">WHAT OUR USERS SAY ABOUT OUR SERVICES?</h1>
+    <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
+      <div class="carousel-indicators">
+        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active"
+          aria-current="true" aria-label="Slide 1"></button>
+        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
+        <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
+      </div>
+      <div class="carousel-inner">
+        <div class="carousel-item active" data-bs-interval="10000">
+          <img src="Images/img-2-modified.png" class="d-block">
+          <div class="carousel-caption d-none d-md-block">
+            <h5>Person 1</h5>
+            <p class="text-box">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro voluptatum
+              dolores
+              blanditiis facere
+              consequatur illo expedita alias, eligendi, magnam labore error ipsam placeat eum veniam
+              nesciunt
+              fuga
+              ratione hic autem!"</p>
+          </div>
+        </div>
+        <div class="carousel-item" data-bs-interval="2000">
+          <img src="Images/img-1-modified.png" class="d-block">
+          <div class="carousel-caption d-none d-md-block">
+            <h5>Person 2</h5>
+            <p class="text-box">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi,
+              repudiandae!
+              Repudiandae
+              quod eaque vitae
+              quas nemo, cum fugiat consequatur. Quo quas minima laborum animi tempore maiores ducimus
+              perspiciatis, porro
+              qui."</p>
+          </div>
+        </div>
+        <div class="carousel-item">
+          <img src="Images/img-4-modified.png" class="d-block">
+          <div class="carousel-caption d-none d-md-block">
+            <h5>Person 3</h5>
+            <p class="text-box">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam dolorum,
+              perferendis sed
+              voluptates omnis
+              asperiores. Optio voluptatum, aut officia possimus dolores, omnis obcaecati nihil cupiditate
+              at
+              ipsum
+              officiis architecto sint!"</p>
+          </div>
         </div>
-    </footer>
-
-    <!-- Sticky navbar -->
-    <script type="text/javascript">
-        window.addEventListener('scroll', function () {
-            var header = document.querySelector('header');
-            header.classList.toggle('sticky', window.scrollY > 0);
-        });
-
-        // Pre-Loader Logic
-        $(document).ready(function () {
-            setTimeout(function () {
-                $('#ctn-preloader').addClass('loaded');
-                $('body').removeClass('no-scroll-y');
-                if ($('#ctn-preloader').hasClass('loaded')) {
-                    $('#preloader')
-                        .delay(1000)
-                        .queue(function () {
-                            $(this).remove();
-                        });
-                }
-            }, 3000);
-        });
-        // Dynamic copyright year
-
-        const yearEl = document.getElementById('year');
-        const today = new Date();
-        yearEl.innerText = today.getFullYear();
-    </script>
-
-    <!--JAVASCRIPT FOR TOGGLE MENU -->
-    <!-- <script>
+      </div>
+      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Previous</span>
+      </button>
+      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">Next</span>
+      </button>
+    </div>
+  </section>
+  <!-- FOOTER -->
+
+  <footer>
+    <div class="content">
+      <h2 class="head-1">About</h2>
+      <p class="about">
+        Dust Car Co.is a step towards sustainable <br />environment. With the
+        to help users find <br />car & bike pool possibilities, thereby
+        <br />reducing traffic & commute costs.
+      </p>
+
+      <div class="explore">
+        <h2 class="ex">Explore</h2>
+
+        <ul class="serv-list">
+          <li><a href="#">Car Pooling</a></li>
+          <li><a href="#">Bike Pooling</a></li>
+          <li><a href="#">We are hiring !</a></li>
+        </ul>
+      </div>
+
+      <!-- SOCIAL MEDIA -->
+      <div class="social">
+        <h2 class="follow">Follow Us</h2>
+        <a href="#"><i class="fab fa-instagram"></i></a>
+        <a href="#"><i class="fab fa-facebook"></i></a>
+        <a href="#"><i class="fab fa-twitter"></i></a>
+      </div>
+
+      <!--   NEWLETTER  -->
+      <form action="" class="newsletter" id="contact">
+        <h2 class="news">Subscribe Our Newsletter</h2>
+        <p class="sub">Get frequent updates from us .</p>
+        <div class="newsletter-box">
+          <input class="emailbox" type="email" name="" value="" placeholder="Enter your email id" />
+          <button type="button" name="button" class="letter">
+            Subscribe
+          </button>
+        </div>
+      </form>
+    </div>
+
+    <!-- Footer 2 -->
+    <div class="foot2">
+      <p class="f2" style="margin-bottom: 0px;">
+        Made with 💛 & ☕ by <span>Sandhya Agarwal</span> | ©<span id="year"></span>
+        All rights reserved<br />
+      </p>
+    </div>
+  </footer>
+
+  <!-- Sticky navbar -->
+  <script type="text/javascript">
+    window.addEventListener('scroll', function () {
+      var header = document.querySelector('header');
+      header.classList.toggle('sticky', window.scrollY > 0);
+    });
+
+    // Pre-Loader Logic
+    $(document).ready(function () {
+      setTimeout(function () {
+        $('#ctn-preloader').addClass('loaded');
+        $('body').removeClass('no-scroll-y');
+        if ($('#ctn-preloader').hasClass('loaded')) {
+          $('#preloader')
+            .delay(1000)
+            .queue(function () {
+              $(this).remove();
+            });
+        }
+      }, 3000);
+    });
+    // Dynamic copyright year
+
+    const yearEl = document.getElementById('year');
+    const today = new Date();
+    yearEl.innerText = today.getFullYear();
+  </script>
+
+  <!--JAVASCRIPT FOR TOGGLE MENU -->
+  <!-- <script>
   var navbarNav =document.getElementById("navbarNav");
   function showMenu(){
       navbarNav.style.right="0";
