diff --git a/css/style.css b/css/style.css
index 255183b..8f47001 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,6 +1,10 @@
 /*--------------------------------------------------------------------- File Name: style.css ---------------------------------------------------------------------*/
+
+
 /*-------- impor utils.css------------*/
+
 @import url(./utils.css);
+
 /*--------------------------------------------------------------------- import Fonts ---------------------------------------------------------------------*/
 
 @import url("https://fonts.googleapis.com/css?family=Rajdhani:300,400,500,600,700");
@@ -12,6 +16,7 @@
  2) font-family: 'Poppins', sans-serif;
  ----------------------------------------*****/
 
+
 /*--------------------------------------------------------------------- skeleton ---------------------------------------------------------------------*/
 
 * {
@@ -25,7 +30,11 @@ html {
 body {
     color: #666666;
     font-size: 14px;
+
+    font-family: 'Poppins', sans-serif;
+
     font-family: "Poppins", sans-serif;
+
     line-height: 1.80857;
     font-weight: normal;
     background-color: var(--primary-background-color);
@@ -162,6 +171,7 @@ button {
     cursor: pointer;
 }
 
+
 /*---------------------------- preloader area ----------------------------*/
 
 .loader_bg {
@@ -194,6 +204,21 @@ button {
     animation: circle7124 0.5s alternate infinite ease;
 }
 
+
+@keyframes circle7124 {
+    0% {
+        top: 60px;
+        height: 5px;
+        border-radius: 50px 50px 25px 25px;
+        transform: scaleX(1.7);
+    }
+    40% {
+        height: 20px;
+        border-radius: 50%;
+        transform: scaleX(1);
+    }
+
+
 @keyframes circle7124 {
     0% {
         top: 60px;
@@ -208,6 +233,7 @@ button {
         transform: scaleX(1);
     }
 
+
     100% {
         top: 0%;
     }
@@ -265,6 +291,7 @@ button {
     animation-delay: 0.3s;
 }
 
+
 /*---------------------------- Scroll progress bar ----------------------------*/
 
 .progressBar {
@@ -313,7 +340,10 @@ ul.btn li:last-child {
     color: #fff !important;
     background: #0808ff;
 }
+
+
 /* styleing for the search bar */
+
 .searchBox {
     transform: translateY(-300px);
     background-color: white !important;
@@ -325,39 +355,51 @@ ul.btn li:last-child {
     border-bottom-left-radius: 5px;
     border-bottom-right-radius: 5px;
 }
+
 .searchBox-active {
     display: inline-block;
     transform: scaleY(1);
 }
+
 #searchInput {
     padding: 10px;
 }
+
 .suggestionBox {
     display: none;
     overflow-y: scroll;
     max-height: 200px;
     width: 100%;
 }
+
+
 /*styling the dynamically generated list*/
+
 .suggestionBox li {
     cursor: pointer;
     padding: 10px;
     width: 100%;
 }
+
 .suggestionBox li:nth-child(2n) {
     background-color: #ececec;
 }
+
 .suggestionBox li:hover {
     transition: 0.3s ease;
     background-color: pink;
 }
+
 .suggestionBox-active {
     display: block;
 }
+
+
 /* --------------------------------------------------
 ==================================================
 -------------------------------------------------- */
 
+
 /* ---------------------------
 
 Style For Header section
@@ -390,10 +432,14 @@ Style For Header section
     color: var(--color-pink);
 }
 
-.navigation.navbar-dark .navbar-nav .active > .nav-link,
+.navigation.navbar-dark .navbar-nav .active>.nav-link,
 .navigation.navbar-dark .navbar-nav .nav-link.active,
 .navigation.navbar-dark .navbar-nav .nav-link.show,
+
+.navigation.navbar-dark .navbar-nav .show>.nav-link {
+
 .navigation.navbar-dark .navbar-nav .show > .nav-link {
+
     color: var(--color-pink);
 }
 
@@ -422,6 +468,7 @@ Style For Header section
     height: 76px;
 }
 
+
 /* ---------------------------
 
 Style For Banner section
@@ -440,9 +487,13 @@ Style For Banner section
     position: relative;
     padding: 0 5px;
 }
+
 .banner_main::before {
     position: absolute;
-    content: "";
+
+    content: '';
+
+   
     width: 50px;
     height: 40px;
     background: url(../images/cross.png);
@@ -450,9 +501,10 @@ Style For Banner section
     bottom: -38px;
     right: 38px;
 }
+
 .banner_main::after {
     position: absolute;
-    content: "";
+
     width: 50px;
     height: 40px;
     background: url(../images/cross.png);
@@ -461,6 +513,7 @@ Style For Banner section
     left: 38px;
 }
 
+
 /* ---------------------------------------
 
 Style For The Background Text in Banner
@@ -530,6 +583,7 @@ Style For The Background Text in Banner
     display: none;
 }
 
+
 /* 
 Styles for Banner image  
 */
@@ -541,12 +595,14 @@ Styles for Banner image
     overflow: hidden;
     margin: 0 auto;
 }
+
 .banner-img img {
     width: 100%;
     height: 100%;
     object-fit: contain;
 }
 
+
 /* ---------------------------
 
 Style For Banner section Buttons
@@ -575,12 +631,15 @@ Style For Banner section Buttons
     transition: ease-in all 0.5s;
 }
 
+
 /* colors_used: var(--color-pink), #de5a5a (dark pink), 361C16 (brown)*/
 
+
 /* -------------------------------------
 =====================================
 ------------------------------------- */
 
+
 /* ---------------------------
 
 Style For Card-service Section
@@ -600,6 +659,9 @@ Style For Card-service Section
 }
 
 
+.card-service {
+
+
 
 
 
@@ -615,6 +677,12 @@ Style For Card-service Section
     color: var(--text-color);
     border-radius: 8px;
 
+    box-shadow: 0 3px 12px rgba(95, 92, 120, 0.12);
+    background: var(--secondary-background-color);
+}
+
+
+
     box-shadow: 0 3px 12px rgba(95, 92, 120, 0.12);
     background: var(--secondary-background-color);
 
@@ -640,10 +708,12 @@ Style For Card-service Section
     box-shadow: 1px 1px 10px 5px rgba(255, 255, 255, 0.15);
 
 }
+
 /* ------------------------------------------------
 ===============================================
 ------------------------------------------------ */
 
+
 /* ---------------------------
 
 Style For Categories Section
@@ -652,6 +722,73 @@ Style For Categories Section
 
 .categories {
     text-align: center;
+
+}
+
+.categories .headimg {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 18px;
+}
+
+.innerimg {
+    line-height: 60px;
+    border-radius: 50%;
+    text-align: center;
+    font-size: 24px;
+    box-shadow: 0 2px 14px rgba(95, 92, 120, 0.16);
+    width: 150px;
+    height: 130px !important;
+}
+
+.first-cat {
+    background: url(../images/Leather-purse.png);
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.second-cat {
+    background: url(../images/Leather-belt.png);
+    background-repeat: none;
+    background-size: cover;
+}
+
+.third-cat {
+    background: url(../images/Leather-shoes.png);
+    background-repeat: none;
+    background-size: cover;
+}
+
+.forth-cat {
+    background: url(../images/Leather-bags.png);
+    background-repeat: none;
+    background-size: cover;
+}
+
+.fifth-cat {
+    background: url(../images/Leather-wallet.jpeg);
+    background-repeat: none;
+    background-size: cover;
+}
+
+.sixth-cat {
+    background: url(../images/Leather-gloves.jpeg);
+    background-repeat: none;
+    background-size: cover;
+}
+
+.seventh-cat {
+    background: url(../images/Leather-bagpacks.png);
+    background-repeat: none;
+    background-size: cover;
+}
+
+.eighth-cat {
+    background: url(../images/Leather-caps.jpeg);
+    background-repeat: none;
+    background-size: cover;
+
     padding: 12px;
     border: solid 1px transparent;
 }
@@ -704,6 +841,7 @@ Style For Categories Section
     box-shadow: 0 2px 14px rgba(95, 92, 120, 0.16);
     width: 150px;
     height: 130px !important;
+
 }
 
 .categories h5 {
@@ -719,17 +857,21 @@ Style For Categories Section
     color: #898798;
 }
 
+
 /* --------------------------------------
 ======================================
 -------------------------------------- */
 
+
 /* ---------------------------
 
 Style For About Us Section
 
 -------------------------- */
 
+
 /* Added background using css variables instead of using hardcoded value */
+
 .aboutusbtn {
     background-color: var(--color-pink);
     color: white;
@@ -747,15 +889,20 @@ Style For About Us Section
     object-fit: contain;
 }
 
+
 /* ---------------------------
 
 Style For New Arrivals Section
 
 -------------------------- */
+
+
 /* Added background using css variables instead of using hardcoded value */
+
 #arrivals {
     background-color: var(--secondary-background-color);
 }
+
 .arrival-card {
     display: block;
     margin: 0 auto;
@@ -796,15 +943,18 @@ Style For New Arrivals Section
     transition: color 0.2s ease;
 }
 
+
 /* ------------------------------------
 ====================================
 ------------------------------------ */
 
+
 /* ---------------------------
 
 Style For Customer Review section
 
 -------------------------- */
+
 .titlepage {
     text-align: center;
     padding-bottom: 60px;
@@ -915,15 +1065,18 @@ Style For Customer Review section
     display: none;
 }
 
+
 /* -----------------------------------------------
 ===============================================
 ----------------------------------------------- */
 
+
 /* ---------------------------
 
 Style For Contact Us section
 
 -------------------------- */
+
 .contact {
     padding: 115px 0 120px;
     background: url(../images/map.jpg);
@@ -932,6 +1085,7 @@ Style For Contact Us section
     background-size: cover;
     position: relative;
 }
+
 .contact:before {
     background: #482b24e7;
     position: absolute;
@@ -939,21 +1093,26 @@ Style For Contact Us section
     top: 0;
     width: 100%;
     height: 100%;
-    content: "";
+
 }
 
+
 /*contact-head */
+
 .section-header.contact-head h2,
 .section-header.contact-head p {
     position: relative;
     color: #fff;
 }
+
 .contact-form h3 {
     color: #fff;
     font-size: 24px;
     text-transform: capitalize;
     margin-bottom: 40px;
 }
+
+
 /*contact-head */
 
 .contact-content {
@@ -961,13 +1120,16 @@ Style For Contact Us section
     margin-top: 30px;
     overflow: hidden;
 }
+
 .contact-form {
     position: relative;
     margin: 50px 0 0 0;
 }
+
 .contact-form .form-group {
     margin-bottom: 15px;
 }
+
 .contact-form .form-control {
     padding: 24px 21px;
     font-size: 16px;
@@ -979,6 +1141,7 @@ Style For Contact Us section
     color: #888;
     resize: none;
 }
+
 .contact-form .form-group {
     padding-bottom: 7px;
 }
@@ -987,7 +1150,9 @@ Style For Contact Us section
     box-shadow: 0 0 15px #ff8aa5;
 }
 
+
 /*--contct button--*/
+
 .contact-form .single-contact-btn button {
     display: flex;
     align-items: center;
@@ -1028,27 +1193,35 @@ Style For Contact Us section
     border: 1px solid #361c16;
 }
 
+
 /*--contct button--*/
 
+
 /* contact-right */
+
 .contact-right {
     display: flex;
 }
 
+
 /* contact-adress */
+
 .contact-adress {
     margin: 68px 0 0px;
     display: flex;
     flex-direction: column;
 }
+
 .contact-office-address {
     margin-bottom: 18px;
 }
+
 .contact-office-address h3 {
     color: #fff;
     font-size: 24px;
     text-transform: capitalize;
 }
+
 .contact-office-address p {
     color: #fff;
     font-size: 14px;
@@ -1056,26 +1229,39 @@ Style For Contact Us section
     margin-top: 30px;
     margin-bottom: 50px;
 }
+
 .contact-online-address {
     color: #fff;
     font-size: 14px;
 }
+
 .single-online-address {
     position: relative;
     margin-bottom: 30px;
 }
+
 .single-online-address i {
     padding-right: 7px;
 }
+
 .single-online-address span {
     position: absolute;
     font-size: 14px;
     left: 25px;
     top: 0;
     width: 100%;
+
+}
+
+
+/* contact-adress */
+
+
 } /* contact-adress */
 
+
 /*hm-foot-icon*/
+
 .contact-icon {
     margin-top: 19px;
 }
@@ -1083,7 +1269,12 @@ Style For Contact Us section
 .contact-icon ul li {
     float: left;
 }
+
+
+.contact-icon ul li>a {
+
 .contact-icon ul li > a {
+
     color: #fff;
     margin-right: 13px;
     padding: 0px 12px 0px 0px;
@@ -1097,7 +1288,12 @@ Style For Contact Us section
 .contact-icon ul li {
     float: left;
 }
+
+
+.contact-icon ul li>a {
+
 .contact-icon ul li > a {
+
     color: #ff8aa5;
     margin-right: 13px;
     padding: 0px 12px 0px 0px;
@@ -1113,10 +1309,12 @@ Style For Contact Us section
 }
 
 
+
 /* ------------------------------------
 ====================================
 ------------------------------------ */
 
+
 /* ---------------------------
 
 Style For Footer section
@@ -1161,7 +1359,8 @@ ul.social_icon li {
 }
 
 ul.social_icon li a {
-    background: #fff;
+    background-color: #ffffff;
+    color: #000000cc;
     width: 40px;
     height: 40px;
     display: flex;
@@ -1170,13 +1369,23 @@ ul.social_icon li a {
     font-size: 25px;
     border-radius: 30px;
     margin: 0 3px;
+
+    /* transition: 0s; */
+
     transition: 0s;
     transition: all 400ms ease;
+
 }
 
 ul.social_icon li .fa a:hover {
     background-color: var(--color-pink-dark);
+
+    color: white !important;
+    /* opacity: 1; */
+    /* transition: .3s; */
+
     color: #fff;
+
 }
 
 
@@ -1216,7 +1425,11 @@ ul.social_icon li .fa a:hover {
     color: #fff;
     padding: 5px 0px;
     max-width: 147px;
+
+    border-radius: 6px;
+
     border-radius: 10px;
+
     width: 100%;
     display: block;
     font-weight: 500;
@@ -1225,7 +1438,11 @@ ul.social_icon li .fa a:hover {
 }
 
 .sub_btn:hover {
+
+ 
+
     background-color: #000;
+
     transition: ease-in all 0.5s;
     color: #fff;
 }
@@ -1254,10 +1471,12 @@ ul.social_icon li .fa a:hover {
     transition: all 400ms ease;
 }
 
+
 /* ------------------------------------
 ====================================
 ------------------------------------ */
 
+
 /* ---------------------------
 
 Style For page-section
@@ -1271,10 +1490,17 @@ Style For page-section
     color: #898798;
     overflow: hidden;
 }
+
 .title-section {
     color: #65443c;
     font-size: 2rem;
+
+}
+
+.subhead {
+
 }.subhead {
+
     display: block;
     text-transform: uppercase;
     letter-spacing: 3px;
@@ -1293,6 +1519,7 @@ Style For page-section
     background-color: var(--color-pink);
 }
 
+
 /* ---------------------------
 
 Style for toggle theme button
@@ -1326,10 +1553,13 @@ Style for toggle theme button
     display: block;
 }
 
+
 /* Adding custom scroolbar  matching to the theme of website */
+
 ::-webkit-scrollbar {
     width: 20px;
 }
+
 ::-webkit-scrollbar-track {
     background-color: rgb(247, 252, 254);
 }
@@ -1339,6 +1569,9 @@ Style for toggle theme button
     border-radius: 1rem;
     border: 0.3rem solid transparent;
     background-clip: content-box;
+
+}
+
 }
 /* for back to scroll feature  */
 /* 
@@ -1369,3 +1602,4 @@ Style for toggle theme button
     font-size: 16px;
 }
 
+
diff --git a/index.html b/index.html
index 41ed430..3b8f65e 100644
--- a/index.html
+++ b/index.html
@@ -2,39 +2,70 @@
 <html lang="en">
 
 <head>
-   <!-- basic -->
-   <meta charset="utf-8">
-   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-   <!-- mobile metas -->
-   <meta name="viewport" content="width=device-width, initial-scale=1">
-   <meta name="viewport" content="initial-scale=1, maximum-scale=1">
-   <!-- site metas -->
-   <title>LeatherHoard</title>
-   <meta name="keywords" content="leather, leather products, leather website, e-commerce, selling, leather shop, leather service, buy leather">
-   <meta name="description" content="An Open Source E-commerce website for selling leather products">
-   <meta name="author" content="Kiran Panjwani">
-   <!-- bootstrap css -->
-
-   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
-      integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
-
-   <!-- style css -->
-   <link rel="stylesheet" href="css/style.css">
-   <link rel="stylesheet" href="logincss.css">
-   <link rel="stylesheet" href="css/theme.css">
-   <!-- Responsive-->
-   <link rel="stylesheet" href="css/responsive.css">
-   <!-- favicon -->
-   <link rel="icon" href="images/logo3.png" type="image/gif" />
-   <!-- Tweaks for older IEs-->
-   <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
-
-   <!-- theme.js needs to be in the head -->
-   <script src="./js/theme.js" async></script>
+    <!-- basic -->
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <!-- mobile metas -->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
+    <!-- site metas -->
+    <title>LeatherHoard</title>
+    <meta name="keywords" content="leather, leather products, leather website, e-commerce, selling, leather shop, leather service, buy leather">
+    <meta name="description" content="An Open Source E-commerce website for selling leather products">
+    <meta name="author" content="Kiran Panjwani">
+    <!-- bootstrap css -->
+
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
+
+    <!-- style css -->
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="logincss.css">
+    <link rel="stylesheet" href="css/theme.css">
+    <!-- Responsive-->
+    <link rel="stylesheet" href="css/responsive.css">
+    <!-- favicon -->
+    <link rel="icon" href="images/logo3.png" type="image/gif" />
+    <!-- Tweaks for older IEs-->
+    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
+
+    <!-- theme.js needs to be in the head -->
+    <script src="./js/theme.js" async></script>
 </head>
 <!-- body -->
 
 <body class="main-layout">
+
+    <!-- loader  -->
+    <div class="loader_bg">
+        <div class="loader-wrapper">
+            <div class="loader-circle"></div>
+            <div class="loader-circle"></div>
+            <div class="loader-circle"></div>
+            <div class="loader-shadow"></div>
+            <div class="loader-shadow"></div>
+            <div class="loader-shadow"></div>
+        </div>
+    </div>
+    <!-- end loader -->
+    <!-- header -->
+
+
+    <!-- Progress bar  -->
+    <div class="progressBar"></div>
+
+    <header>
+        <!-- header inner -->
+        <div class="header" id="top-of-page">
+            <div class="container-fluid">
+                <div class="row">
+                    <div class="col-xl-3 col-lg-3 col-md-3 col-sm-3 col logo_section">
+                        <div class="full">
+                            <div class="center-banner">
+                                <div class="logo">
+                                    <a href="index.html"><img src="./images/logo3.png" alt="#" /></a>
+                                </div>
+                            </div>
+
    <button onclick="topFunction()" id="myBtn" title="Go to top">
    <a href="#">top</a>
    </button>
@@ -66,207 +97,317 @@
                      <div class="center-banner">
                         <div class="logo">
                            <a href="index.html"><img src="./images/logo3.png" alt="#" /></a>
+
                         </div>
-                     </div>
-                  </div>
-               </div>
-               <div class="col-xl-9 col-lg-9 col-md-9 col-sm-9">
-                  <nav class="navigation navbar navbar-expand-md navbar-dark ">
-                     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04"
-                        aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
+                    </div>
+                    <div class="col-xl-9 col-lg-9 col-md-9 col-sm-9">
+                        <nav class="navigation navbar navbar-expand-md navbar-dark ">
+                            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
                         <span class="navbar-toggler-icon"></span>
                      </button>
-                     <div class="collapse navbar-collapse" id="navbarsExample04">
-                        <ul class="navbar-nav mr-auto">
-                           <li class="nav-item active">
-                              <a class="nav-link" href="index.html">Home</a>
-                           </li>
-                           <li class="nav-item">
-                              <a class="nav-link" href="#about">About</a>
-                           </li>
-
-                           <li class="nav-item">
-                              <a class="nav-link" href="#Products">Products</a>
-                           </li>
-                           <li class="nav-item">
-                              <a class="nav-link" href="#ContactUs">Contact Us</a>
-                           </li>
-                           <li class="nav-item d_none" >
-                              <i class="fa fa-search nav-link" aria-hidden="true" id="search-button"></i>
-                              <div class="searchBox">
-                                 <div class="searchInputBox">
-                                    <input type="search" name="search" id="searchInput">
-                                 </div>
-                                 <div class="suggestionBox">
-                                    <div>this </div>
-                                    <div>that </div>
-                                 </div>
-                              </div>
-                           </li>
-                           <li class="nav-item d_none">
-                              <a class="nav-link" href="login.html">Login</a>
-                           </li>
-                        </ul>
-                     </div>
-                  </nav>
-               </div>
+                            <div class="collapse navbar-collapse" id="navbarsExample04">
+                                <ul class="navbar-nav mr-auto">
+                                    <li class="nav-item active">
+                                        <a class="nav-link" href="index.html">Home</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a class="nav-link" href="#about">About</a>
+                                    </li>
+
+                                    <li class="nav-item">
+                                        <a class="nav-link" href="#Products">Products</a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a class="nav-link" href="#ContactUs">Contact Us</a>
+                                    </li>
+                                    <li class="nav-item d_none">
+                                        <i class="fa fa-search nav-link" aria-hidden="true" id="search-button"></i>
+                                        <div class="searchBox">
+                                            <div class="searchInputBox">
+                                                <input type="search" name="search" id="searchInput">
+                                            </div>
+                                            <div class="suggestionBox">
+                                                <div>this </div>
+                                                <div>that </div>
+                                            </div>
+                                        </div>
+                                    </li>
+                                    <li class="nav-item d_none">
+                                        <a class="nav-link" href="login.html">Login</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </nav>
+                    </div>
+                </div>
             </div>
-         </div>
-      </div>
-   </header>
-   <!-- end header inner -->
-   <!-- end header -->
-   <!-- banner -->
-   <section class="banner_main">
-      <div id="banner1" class="carousel slide" data-ride="carousel">
-         <ol class="carousel-indicators">
-            <li data-target="#banner1" data-slide-to="0" class="active"></li>
-            <li data-target="#banner1" data-slide-to="1"></li>
-            <li data-target="#banner1" data-slide-to="2"></li>
-            <li data-target="#banner1" data-slide-to="3"></li>
-            <li data-target="#banner1" data-slide-to="4"></li>
-         </ol>
-         <div class="carousel-inner">
-            <div class="carousel-item active">
-               <div class="container">
-                  <div class="carousel-caption">
-                     <div class="row">
-                        <div class="col-md-6">
-                           <div class="text-bg">
-                              <span>Experience Royalty With Our</span>
-                              <h1>Leather Collection</h1>
-                              <p>Every piece of leather product produced and sold by us reflects affluence, both in
-                                 its appearance as well as feel.</p>
-                              <a href="#">Buy Now </a> <a href="#ContactUs">Contact </a>
-                           </div>
+        </div>
+    </header>
+    <!-- end header inner -->
+    <!-- end header -->
+    <!-- banner -->
+    <section class="banner_main">
+        <div id="banner1" class="carousel slide" data-ride="carousel">
+            <ol class="carousel-indicators">
+                <li data-target="#banner1" data-slide-to="0" class="active"></li>
+                <li data-target="#banner1" data-slide-to="1"></li>
+                <li data-target="#banner1" data-slide-to="2"></li>
+                <li data-target="#banner1" data-slide-to="3"></li>
+                <li data-target="#banner1" data-slide-to="4"></li>
+            </ol>
+            <div class="carousel-inner">
+                <div class="carousel-item active">
+                    <div class="container">
+                        <div class="carousel-caption">
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <div class="text-bg">
+                                        <span>Experience Royalty With Our</span>
+                                        <h1>Leather Collection</h1>
+                                        <p>Every piece of leather product produced and sold by us reflects affluence, both in its appearance as well as feel.</p>
+                                        <a href="#">Buy Now </a> <a href="#ContactUs">Contact </a>
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="text_img">
+                                        <figure class="banner-img"><img src="./images/leathers.png" alt="#" /></figure>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
-                        <div class="col-md-6">
-                           <div class="text_img">
-                              <figure class="banner-img"><img src="./images/leathers.png" alt="#" /></figure>
-                           </div>
+                    </div>
+                </div>
+                <div class="carousel-item">
+                    <div class="container">
+                        <div class="carousel-caption">
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <div class="text-bg">
+                                        <span>Experience Royalty With Our</span>
+                                        <h1>Leather Collection</h1>
+                                        <p>Every piece of leather products produced and sold by us reflects affluence, both in its appearance as well as feel.</p>
+                                        <a href="#">Buy Now </a> <a href="#">Contact </a>
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="text_img">
+                                        <figure class="banner-img"><img src="./images/leathers.png" alt="leather pieces" /></figure>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
-                     </div>
-                  </div>
-               </div>
-            </div>
-            <div class="carousel-item">
-               <div class="container">
-                  <div class="carousel-caption">
-                     <div class="row">
-                        <div class="col-md-6">
-                           <div class="text-bg">
-                              <span>Experience Royalty With Our</span>
-                              <h1>Leather Collection</h1>
-                              <p>Every piece of leather products produced and sold by us reflects affluence, both in
-                                 its appearance as well as feel.</p>
-                              <a href="#">Buy Now </a> <a href="#">Contact </a>
-                           </div>
+                    </div>
+                </div>
+                <div class="carousel-item">
+                    <div class="container">
+                        <div class="carousel-caption">
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <div class="text-bg">
+                                        <span>Experience Royalty With Our</span>
+                                        <h1>Leather Collection</h1>
+                                        <p>Every piece of leather products produced and sold by us reflects affluence, both in its appearance as well as feel.</p>
+                                        <a href="#">Buy Now </a> <a href="#">Contact </a>
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="text_img">
+                                        <figure class="banner-img"><img src="./images/leathers.png" alt="leather pieces" /></figure>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
-                        <div class="col-md-6">
-                           <div class="text_img">
-                              <figure class="banner-img"><img src="./images/leathers.png" alt="leather pieces" /></figure>
-                           </div>
+                    </div>
+                </div>
+                <div class="carousel-item">
+                    <div class="container">
+                        <div class="carousel-caption">
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <div class="text-bg">
+                                        <span>Experience Royalty With Our</span>
+                                        <h1>Leather Collection</h1>
+                                        <p>Every piece of leather products produced and sold by us reflects affluence, both in its appearance as well as feel.</p>
+                                        <a href="#">Buy Now </a> <a href="#">Contact </a>
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="text_img">
+                                        <figure class="banner-img"><img src="./images/leathers.png" alt="leather pieces" /></figure>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
-                     </div>
-                  </div>
-               </div>
+                    </div>
+                </div>
+                <div class="carousel-item">
+                    <div class="container">
+                        <div class="carousel-caption">
+                            <div class="row">
+                                <div class="col-md-6">
+                                    <div class="text-bg">
+                                        <span>Experience Royalty With Our</span>
+                                        <h1>Leather Collection</h1>
+                                        <p>Every piece of leather products produced and sold by us reflects affluence, both in its appearance as well as feel.</p>
+                                        <a href="#">Buy Now </a> <a href="#">Contact </a>
+                                    </div>
+                                </div>
+                                <div class="col-md-6">
+                                    <div class="text_img">
+                                        <figure class="banner-img"><img src="./images/leathers.png" alt="leather pieces" /></figure>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div class="carousel-item">
-               <div class="container">
-                  <div class="carousel-caption">
-                     <div class="row">
-                        <div class="col-md-6">
-                           <div class="text-bg">
-                              <span>Experience Royalty With Our</span>
-                              <h1>Leather Collection</h1>
-                              <p>Every piece of leather products produced and sold by us reflects affluence, both in
-                                 its appearance as well as feel.</p>
-                              <a href="#">Buy Now </a> <a href="#">Contact </a>
-                           </div>
+            <a class="carousel-control-prev" href="#banner1" role="button" data-slide="prev">
+                <i class="fa fa-chevron-left" aria-hidden="true"></i>
+            </a>
+            <a class="carousel-control-next" href="#banner1" role="button" data-slide="next">
+                <i class="fa fa-chevron-right" aria-hidden="true"></i>
+            </a>
+        </div>
+    </section>
+    <!-- end banner -->
+
+    <!-- company quality services -->
+    <div class="page-section">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-4">
+                    <div class="card-service wow fadeInUp">
+                        <div class="service_img">
+                            <img src="./images/quality1.png" alt="">
                         </div>
-                        <div class="col-md-6">
-                           <div class="text_img">
-                              <figure class="banner-img"><img src="./images/leathers.png" alt="leather pieces" /></figure>
-                           </div>
+                        <div class="body">
+                            <h5 class="text-secondary">Providing Quality Item</h5>
+                            <p>Quality leather speaks sobriety, versatility, and timeless elegance in today's ultra-modern fashion industry. Value for money has become a trend now. Customers demand quality. Satisfying you with quality leather products is
+                                our Unique Selling Point. We claim your trust as we deliver the promise.</p>
+                            <a href="service.html" class="btn aboutusbtn mt-3">Read More</a>
                         </div>
-                     </div>
-                  </div>
-               </div>
-            </div>
-            <div class="carousel-item">
-               <div class="container">
-                  <div class="carousel-caption">
-                     <div class="row">
-                        <div class="col-md-6">
-                           <div class="text-bg">
-                              <span>Experience Royalty With Our</span>
-                              <h1>Leather Collection</h1>
-                              <p>Every piece of leather products produced and sold by us reflects affluence, both in
-                                 its appearance as well as feel.</p>
-                              <a href="#">Buy Now </a> <a href="#">Contact </a>
-                           </div>
+                    </div>
+                </div>
+                <div class="col-lg-4">
+                    <div class="card-service wow fadeInUp">
+                        <div class="service_img">
+                            <img src="./images/quality2.png" alt="">
                         </div>
-                        <div class="col-md-6">
-                           <div class="text_img">
-                              <figure class="banner-img"><img src="./images/leathers.png" alt="leather pieces" /></figure>
-                           </div>
+                        <div class="body">
+                            <h5 class="text-secondary">Customer Update</h5>
+                            <p>At Leather Company we are here to help with your shopping experience, get in touch by either email or by phone. If an item is out of stock our team will let you know when we will have it back in stock. If you are happy or unhappy
+                                with our service for any reason then please contact us on the details below.
+                            </p>
+                            <a href="service.html" class="btn aboutusbtn mt-3">Read More</a>
                         </div>
-                     </div>
-                  </div>
-               </div>
-            </div>
-            <div class="carousel-item">
-               <div class="container">
-                  <div class="carousel-caption">
-                     <div class="row">
-                        <div class="col-md-6">
-                           <div class="text-bg">
-                              <span>Experience Royalty With Our</span>
-                              <h1>Leather Collection</h1>
-                              <p>Every piece of leather products produced and sold by us reflects affluence, both in
-                                 its appearance as well as feel.</p>
-                              <a href="#">Buy Now </a> <a href="#">Contact </a>
-                           </div>
+                    </div>
+                </div>
+                <div class="col-lg-4">
+                    <div class="card-service wow fadeInUp">
+                        <div class="service_img">
+                            <img src="./images/quality3.png" alt="">
                         </div>
-                        <div class="col-md-6">
-                           <div class="text_img">
-                              <figure class="banner-img"><img src="./images/leathers.png" alt="leather pieces" /></figure>
-                           </div>
+                        <div class="body">
+                            <h5 class="text-secondary">Personalized Items</h5>
+                            <p>We are experts in all leather products, we will help you find an exact sizing, or if you are trying to track down a fashion item which is overpriced on the High Street, then we will try and source a similar and affordable item
+                                to match or we offer a bespoke made to order service in quality leather goods</p>
+                            <a href="service.html" class="btn aboutusbtn mt-3">Read More</a>
                         </div>
-                     </div>
-                  </div>
-               </div>
+                    </div>
+                </div>
             </div>
-         </div>
-         <a class="carousel-control-prev" href="#banner1" role="button" data-slide="prev">
-            <i class="fa fa-chevron-left" aria-hidden="true"></i>
-         </a>
-         <a class="carousel-control-next" href="#banner1" role="button" data-slide="next">
-            <i class="fa fa-chevron-right" aria-hidden="true"></i>
-         </a>
-      </div>
-   </section>
-   <!-- end banner -->
-
-   <!-- company quality services -->
-   <div class="page-section">
-      <div class="container">
-         <div class="row">
-            <div class="col-lg-4">
-               <div class="card-service wow fadeInUp">
-                  <div class="service_img">
-                     <img src="./images/quality1.png" alt="">
-                  </div>
-                  <div class="body">
-                     <h5 class="text-secondary">Providing Quality Item</h5>
-                     <p>Quality leather speaks sobriety, versatility, and timeless elegance in today's ultra-modern
-                        fashion industry. Value for money has become a trend now. Customers demand quality. Satisfying
-                        you with quality leather products is our Unique Selling Point. We claim
-                        your trust as we deliver the promise.</p>
-                     <a href="service.html" class="btn aboutusbtn mt-3">Read More</a>
-                  </div>
-               </div>
+        </div>
+        <!-- .container -->
+    </div>
+    <!-- .page-section -->
+
+    <!-- products -->
+    <div class="page-section bg-light" id="Products">
+        <div class="container">
+            <div class="text-center wow fadeInUp">
+                <div class="subhead">Explore New Style</div>
+                <h2 class="title-section">Our Collections</h2>
+                <div class="divider mx-auto"></div>
             </div>
+
+
+            <div class="row">
+                <div class="col-sm-6 col-lg-4 col-xl-3 py-3 wow zoomIn">
+                    <div class="categories">
+                        <div class="headimg">
+                            <div class="innerimg first-cat"></div>
+                        </div>
+                        <h5>Ladies Fancy Purse</h5>
+                        <p>Buy good quality handbags for women including clutches, shoulder bags and cross body bags at affordable prices.</p>
+                    </div>
+                </div>
+                <div class="col-sm-6 col-lg-4 col-xl-3 py-3 wow zoomIn">
+                    <div class="categories">
+                        <div class="headimg">
+                            <div class="innerimg second-cat"></div>
+                        </div>
+                        <h5>Double Sided Men's Belt</h5>
+                        <p>Explore a variety of styles from Formal Belts to stylish Casual Belts. Our diverse selection includes various stitching styles and leather qualities, so there's a belt for every look</p>
+
+                    </div>
+                </div>
+                <div class="col-sm-6 col-lg-4 col-xl-3 py-3 wow zoomIn">
+                    <div class="categories">
+                        <div class="headimg">
+                            <div class="innerimg third-cat"></div>
+                        </div>
+                        <h5>Men's Formal Shoes</h5>
+                        <p>Shop best quality Men's Formal Shoes Online. Shop Men's Dress Shoes from a wide range of colours and styles, available exclusively at LeatherHoard.</p>
+                    </div>
+                </div>
+                <div class="col-sm-6 col-lg-4 col-xl-3 py-3 wow zoomIn">
+                    <div class="categories">
+                        <div class="headimg">
+                            <div class="innerimg forth-cat"></div>
+                        </div>
+                        <h5>Grainy Leather Briefcase</h5>
+                        <p>A briefcase is still a good investment piece, as these picks will suit anyone for any purpose, from internship to retirement party.
+                        </p>
+                    </div>
+                </div>
+                <div class="col-sm-6 col-lg-4 col-xl-3 py-3 wow zoomIn">
+                    <div class="categories">
+                        <div class="headimg">
+                            <div class="innerimg fifth-cat"></div>
+                        </div>
+                        <h5>Men's Accessories</h5>
+                        <p>These genuine leather wallet mens styles have the traditional two-way fold and plenty of interior pockets and slots for your cash, cards and more.</p>
+                    </div>
+                </div>
+                <div class="col-sm-6 col-lg-4 col-xl-3 py-3 wow zoomIn">
+                    <div class="categories">
+                        <div class="headimg">
+                            <div class="innerimg sixth-cat"></div>
+                        </div>
+                        <h5>Classic Leather Gloves</h5>
+                        <p>A truly unique glove amongst the competition, giving you breathable Leather to keep hand dry and warm. </p>
+                    </div>
+                </div>
+                <div class="col-sm-6 col-lg-4 col-xl-3 py-3 wow zoomIn">
+                    <div class="categories">
+                        <div class="headimg">
+                            <div class="innerimg seventh-cat"></div>
+                        </div>
+                        <h5>School/College Bagpacks</h5>
+                        <p>Explore our range of leather backpacks for men & women bringing style, strength and multi purpose functionality at one place.</p>
+                    </div>
+                </div>
+                <div class="col-sm-6 col-lg-4 col-xl-3 py-3 wow zoomIn">
+                    <div class="categories">
+                        <div class="headimg">
+                            <div class="innerimg eighth-cat"></div>
+                        </div>
+                        <h5>Pure Leather Caps</h5>
+                        <p>*Free Size · *Adjustable · *Trendy · *Polyester and Silk inside which keeps your head from heating up ·</p>
+                    </div>
+                </div>
+
             <div class="col-lg-4">
                <div class="card-service wow fadeInUp">
                   <div class="service_img">
@@ -417,29 +558,59 @@ <h2 class="title-section">The LeatherHoard Company</h2>
                   labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
                <a href="./html/about.html" class="btn aboutusbtn mt-3">Read More</a>
+
             </div>
-            <div class="col-lg-6 py-3 wow fadeInRight">
-               <figure class="about-img py-3 text-center">
-                  <img src="./images/aboutus_img2.png" alt="">
-               </figure>
+
+        </div>
+        <!-- .container -->
+    </div>
+    <!-- end products -->
+
+
+    <!-- About us  section -->
+    <div class="page-section" id="about">
+        <div class="container">
+            <div class="row align-items-center">
+                <div class="col-lg-6 py-3 wow fadeInUp">
+                    <span class="subhead">About us</span>
+                    <h2 class="title-section">The LeatherHoard Company</h2>
+                    <div class="divider"></div>
+
+                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
+                    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.</p>
+                    <a href="./html/about.html" class="btn aboutusbtn mt-3">Read More</a>
+                </div>
+                <div class="col-lg-6 py-3 wow fadeInRight">
+                    <figure class="about-img py-3 text-center">
+                        <img src="./images/aboutus_img2.png" alt="">
+                    </figure>
+                </div>
             </div>
-         </div>
-      </div> <!-- .container -->
-   </div> <!-- .page-section -->
-   </div>
-   <!-- end About us  section -->
+        </div>
+        <!-- .container -->
+    </div>
+    <!-- .page-section -->
+    </div>
+    <!-- end About us  section -->
 
-   <!---offer-->
-   <div class="offer">
-      <div class="container">
+    <!---offer-->
+    <div class="offer">
+        <div class="container">
 
-         <div class="row align-items-center">
+            <div class="row align-items-center">
 
-            <figure class="about-img col-lg-6 py-3 wow fadeInUp">
-               <img src="./images/offerjeacket.png" class="offer-img">
-            </figure>
+                <figure class="about-img col-lg-6 py-3 wow fadeInUp">
+                    <img src="./images/offerjeacket.png" class="offer-img">
+                </figure>
 
 
+                <div class="col-lg-6 py-3 wow fadeInRight">
+                    <p> Exclusively Available on LeatherHoard</p>
+                    <h1>Stylish Winter Leather Jacket</h1>
+                    <br>
+                    <p> It is one of the most common and most affordable types of leather used in leather jackets. It is very tough and stiff at first, but as you wear the jacket in, it will become softer and more supple.
+                    </p>
+
             <div  class="col-lg-6 py-3 wow fadeInRight">
                <p class="offerp"> Exclusively Available on LeatherHoard</p>
                <h1>Stylish Winter Leather Jacket</h1>
@@ -447,388 +618,379 @@ <h1>Stylish Winter Leather Jacket</h1>
                <p class="offerp"> It is one of the most common and most affordable types of leather used in leather jackets. It is very tough and stiff at first, but as you wear the jacket in, it will become softer and more supple.
                </p>
 
-               <a href=""><button class="btn">Buy Now &#8594;</button>
+
+                    <a href=""><button class="btn">Buy Now &#8594;</button>
                </a>
+                </div>
             </div>
-         </div>
-      </div>
-   </div>
-
+        </div>
+    </div>
 
-   <div class="page-section" id="arrivals">
-      <div class="container">
-         <div class="text-center wow fadeInUp">
-            <div class="subhead">Find More Interesting Products</div>
-            <h2 class="title-section">Our New Arrivals</h2>
-            <div class="divider mx-auto"></div>
-         </div>
 
-         <div class="row mt-5">
-            <div class="col-lg-4 py-3 wow fadeInUp">
-               <div class="arrival-card">
-                  <div class="body">
-                     <figure class="arrival_picture">
-                        <img src="./images/arrival_1.jpg" alt="">
-                     </figure>
-                     <div class="bodycont">
-                        <h5 class="arrival-title"><a href="#">Handmade Bags For Women</a></h5>
-                        <div class="post-date">Price: <a href="#">Rs. 4000</a></div>
-                     </div>
-                  </div>
-               </div>
+    <div class="page-section" id="arrivals">
+        <div class="container">
+            <div class="text-center wow fadeInUp">
+                <div class="subhead">Find More Interesting Products</div>
+                <h2 class="title-section">Our New Arrivals</h2>
+                <div class="divider mx-auto"></div>
             </div>
 
-            <div class="col-lg-4 py-3 wow fadeInUp">
-               <div class="arrival-card">
-                  <div class="body">
-                     <figure class="arrival_picture">
-                        <img src="./images/arrival_2.jpg" alt="">
-                     </figure>
-                     <div class="bodycont">
-                        <h5 class="arrival-title"><a href="#">Men's Casual Boots</a></h5>
-                        <div class="post-date">Price: <a href="#">Rs. 8000</a></div>
-                     </div>
-                  </div>
-               </div>
-            </div>
+            <div class="row mt-5">
+                <div class="col-lg-4 py-3 wow fadeInUp">
+                    <div class="arrival-card">
+                        <div class="body">
+                            <figure class="arrival_picture">
+                                <img src="./images/arrival_1.jpg" alt="">
+                            </figure>
+                            <div class="bodycont">
+                                <h5 class="arrival-title"><a href="#">Handmade Bags For Women</a></h5>
+                                <div class="post-date">Price: <a href="#">Rs. 4000</a></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-lg-4 py-3 wow fadeInUp">
+                    <div class="arrival-card">
+                        <div class="body">
+                            <figure class="arrival_picture">
+                                <img src="./images/arrival_2.jpg" alt="">
+                            </figure>
+                            <div class="bodycont">
+                                <h5 class="arrival-title"><a href="#">Men's Casual Boots</a></h5>
+                                <div class="post-date">Price: <a href="#">Rs. 8000</a></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-lg-4 py-3 wow fadeInUp">
+                    <div class="arrival-card">
+                        <div class="body">
+                            <figure class="arrival_picture">
+                                <img src="./images/arrival_3.jpg" alt="">
+                            </figure>
+                            <div class="bodycont">
+                                <h5 class="arrival-title"><a href="#">Men's Vintage Chest Bag</a></h5>
+                                <div class="post-date">Price: <a href="#">Rs. 6000</a></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
 
-            <div class="col-lg-4 py-3 wow fadeInUp">
-               <div class="arrival-card">
-                  <div class="body">
-                     <figure class="arrival_picture">
-                        <img src="./images/arrival_3.jpg" alt="">
-                     </figure>
-                     <div class="bodycont">
-                        <h5 class="arrival-title"><a href="#">Men's Vintage Chest Bag</a></h5>
-                        <div class="post-date">Price: <a href="#">Rs. 6000</a></div>
-                     </div>
-                  </div>
-               </div>
+                <div class="col-12 mt-4 text-center wow fadeInUp">
+                    <a href="./html/products.html" class="btn aboutusbtn">View More</a>
+                </div>
             </div>
+        </div>
+    </div>
 
-            <div class="col-12 mt-4 text-center wow fadeInUp">
-               <a href="./html/products.html" class="btn aboutusbtn">View More</a>
-            </div>
-         </div>
-      </div>
-   </div>
-
-   <div class="customer">
-      <div class="container">
-         <div class="row">
-            <div class="col-md-12">
-               <div class="titlepage">
-                  <h2>Customer Reviews</h2>
-               </div>
+    <div class="customer">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-12">
+                    <div class="titlepage">
+                        <h2>Customer Reviews</h2>
+                    </div>
+                </div>
             </div>
-         </div>
-         <div class="row">
-            <div class="col-md-12">
-               <div id="myCarousel" class="carousel slide customer_Carousel " data-ride="carousel">
-                  <ol class="carousel-indicators">
-                     <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
-                     <li data-target="#myCarousel" data-slide-to="1"></li>
-                     <li data-target="#myCarousel" data-slide-to="2"></li>
-                  </ol>
-                  <div class="carousel-inner">
-                     <div class="carousel-item active">
-                        <div class="container">
-                           <div class="carousel-caption ">
-                              <div class="row">
-                                 <div class="col-md-9 offset-md-3">
-                                    <div class="test_box">
-                                       <i><img class="customer-review-quote" src="./images/cos.png" alt="#" /></i>
-                                       <h4>William Lucas</h4>
-                                       <p>Hi it's William from Lahore! I just received my new backpack purse and it is
-                                          exactly what I've been looking for!!!! I totally love it!!!! I just love your
-                                          stuff!!!!! Thanks so much and thanks to LeatherHoard.</p>
+            <div class="row">
+                <div class="col-md-12">
+                    <div id="myCarousel" class="carousel slide customer_Carousel " data-ride="carousel">
+                        <ol class="carousel-indicators">
+                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+                            <li data-target="#myCarousel" data-slide-to="1"></li>
+                            <li data-target="#myCarousel" data-slide-to="2"></li>
+                        </ol>
+                        <div class="carousel-inner">
+                            <div class="carousel-item active">
+                                <div class="container">
+                                    <div class="carousel-caption ">
+                                        <div class="row">
+                                            <div class="col-md-9 offset-md-3">
+                                                <div class="test_box">
+                                                    <i><img class="customer-review-quote" src="./images/cos.png" alt="#" /></i>
+                                                    <h4>William Lucas</h4>
+                                                    <p>Hi it's William from Lahore! I just received my new backpack purse and it is exactly what I've been looking for!!!! I totally love it!!!! I just love your stuff!!!!! Thanks so much and thanks to LeatherHoard.</p>
+                                                </div>
+                                            </div>
+                                        </div>
                                     </div>
-                                 </div>
-                              </div>
-                           </div>
-                        </div>
-                     </div>
-                     <div class="carousel-item">
-                        <div class="container">
-                           <div class="carousel-caption">
-                              <div class="row">
-                                 <div class="col-md-9 offset-md-3">
-                                    <div class="test_box">
-                                       <i><img class="customer-review-quote" src="./images/cos.png" alt="#" /></i>
-                                       <h4>Marry Noah</h4>
-                                       <p>Recently purchased a jacket from them and I am fairly satisfied with quality
-                                          as well as the service. The tooling, stitching, quality of the leather, all of
-                                          it is really really great. You guys totally rock!</p>
+                                </div>
+                            </div>
+                            <div class="carousel-item">
+                                <div class="container">
+                                    <div class="carousel-caption">
+                                        <div class="row">
+                                            <div class="col-md-9 offset-md-3">
+                                                <div class="test_box">
+                                                    <i><img class="customer-review-quote" src="./images/cos.png" alt="#" /></i>
+                                                    <h4>Marry Noah</h4>
+                                                    <p>Recently purchased a jacket from them and I am fairly satisfied with quality as well as the service. The tooling, stitching, quality of the leather, all of it is really really great. You guys totally
+                                                        rock!
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </div>
                                     </div>
-                                 </div>
-                              </div>
-                           </div>
-                        </div>
-                     </div>
-                     <div class="carousel-item">
-                        <div class="container">
-                           <div class="carousel-caption">
-                              <div class="row">
-                                 <div class="col-md-9 offset-md-3">
-                                    <div class="test_box">
-                                       <i><img class="customer-review-quote" src="./images/cos.png" alt="#" /></i>
-                                       <h4>Sania Khan</h4>
-                                       <p>I received my bagpack today. Thank you. I did not expect such fast service and
-                                          was very pleased to be able to use the bag this weekend. The shoulder strap is
-                                          perfect. Thanks you once again. I am a handbag nut and I must say that I have
-                                          never been as
-                                          pleased as I have been with the bags I have purchased from you. They are just
-                                          perfect.</p>
+                                </div>
+                            </div>
+                            <div class="carousel-item">
+                                <div class="container">
+                                    <div class="carousel-caption">
+                                        <div class="row">
+                                            <div class="col-md-9 offset-md-3">
+                                                <div class="test_box">
+                                                    <i><img class="customer-review-quote" src="./images/cos.png" alt="#" /></i>
+                                                    <h4>Sania Khan</h4>
+                                                    <p>I received my bagpack today. Thank you. I did not expect such fast service and was very pleased to be able to use the bag this weekend. The shoulder strap is perfect. Thanks you once again. I am a handbag
+                                                        nut and I must say that I have never been as pleased as I have been with the bags I have purchased from you. They are just perfect.
+                                                    </p>
+                                                </div>
+                                            </div>
+                                        </div>
                                     </div>
-                                 </div>
-                              </div>
-                           </div>
+                                </div>
+                            </div>
                         </div>
-                     </div>
-                  </div>
-                  <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
-                     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                     <span class="sr-only">Previous</span>
-                  </a>
-                  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
-                     <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                     <span class="sr-only">Next</span>
-                  </a>
-               </div>
+                        <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
+                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                            <span class="sr-only">Previous</span>
+                        </a>
+                        <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
+                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                            <span class="sr-only">Next</span>
+                        </a>
+                    </div>
+                </div>
             </div>
-         </div>
-      </div>
-   </div>
-   <!-- end customer -->
+        </div>
+    </div>
+    <!-- end customer -->
+
+    <!--  contact -->
+    <section class="contact" id="ContactUs">
+        <div class="container">
+            <div class="contact-details">
+                <div class="section-header contact-head  text-center">
+                    <div class="text-center wow fadeInUp">
+                        <h2 class="title-section">Contact Us</h2>
+                    </div>
+                    <p>
+                        Pallamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                    </p>
+                </div>
+                <!--/.section-header-->
+                <div class="contact-content">
+                    <div class="row">
+                        <div class="col-sm-offset-1 col-sm-5">
+                            <div class="single-contact-box">
+                                <div class="contact-right">
+                                    <div class="contact-adress">
+                                        <div class="contact-office-address">
+                                            <h3>contact info</h3>
+                                            <p>
+                                                207 XYZ St. Mountain View, Karachi, Pakistan
+                                            </p>
+                                            <div class="contact-online-address">
+                                                <div class="single-online-address">
+                                                    <i class="fa fa-phone"></i> +92 35565962049
+                                                </div>
+                                                <!--/.single-online-address-->
+
+                                                <div class="single-online-address">
+                                                    <i class="fa fa-envelope-o"></i>
+                                                    <span>leather.hoard@gmail.com</span>
+                                                </div>
+                                                <!--/.single-online-address-->
+                                            </div>
+                                            <!--/.contact-online-address-->
+                                        </div>
+                                        <!--/.contact-office-address-->
+                                        <div class="contact-office-address">
+                                            <h3>social partner</h3>
+                                            <div class="contact-icon">
+                                                <ul>
+                                                    <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
+                                                    <!--/li-->
+                                                    <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
+                                                    <!--/li-->
+                                                    <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
+                                                    <!--/li-->
+                                                    <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
+                                                    <!--/li-->
+                                                </ul>
+                                                <!--/ul-->
+                                            </div>
+                                            <!--/.contact-icon-->
+                                        </div>
+                                        <!--/.contact-office-address-->
 
-   <!--  contact -->
-   <section class="contact" id="ContactUs">
-      <div class="container">
-         <div class="contact-details">
-            <div class="section-header contact-head  text-center">
-               <div class="text-center wow fadeInUp">
-                  <h2 class="title-section">Contact Us</h2>
-               </div>
-               <p>
-                  Pallamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
-                  voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-               </p>
-            </div>
-            <!--/.section-header-->
-            <div class="contact-content">
-               <div class="row">
-                  <div class="col-sm-offset-1 col-sm-5">
-                     <div class="single-contact-box">
-                        <div class="contact-right">
-                           <div class="contact-adress">
-                              <div class="contact-office-address">
-                                 <h3>contact info</h3>
-                                 <p>
-                                    207 XYZ St. Mountain View, Karachi, Pakistan
-                                 </p>
-                                 <div class="contact-online-address">
-                                    <div class="single-online-address">
-                                       <i class="fa fa-phone"></i>
-                                       +92 35565962049
-                                    </div>
-                                    <!--/.single-online-address-->
-
-                                    <div class="single-online-address">
-                                       <i class="fa fa-envelope-o"></i>
-                                       <span>leather.hoard@gmail.com</span>
                                     </div>
-                                    <!--/.single-online-address-->
-                                 </div>
-                                 <!--/.contact-online-address-->
-                              </div>
-                              <!--/.contact-office-address-->
-                              <div class="contact-office-address">
-                                 <h3>social partner</h3>
-                                 <div class="contact-icon">
-                                    <ul>
-                                       <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
-                                       <!--/li-->
-                                       <li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
-                                       <!--/li-->
-                                       <li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
-                                       <!--/li-->
-                                       <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
-                                       <!--/li-->
-                                    </ul>
-                                    <!--/ul-->
-                                 </div>
-                                 <!--/.contact-icon-->
-                              </div>
-                              <!--/.contact-office-address-->
-
-                           </div>
-                           <!--/.contact-address-->
+                                    <!--/.contact-address-->
+                                </div>
+                                <!--/.contact-right-->
+                            </div>
+                            <!--/.single-contact-box-->
                         </div>
-                        <!--/.contact-right-->
-                     </div>
-                     <!--/.single-contact-box-->
-                  </div>
-                  <!--/.col-->
-                  <div class="col-sm-5">
-                     <div class="single-contact-box">
-                        <div class="contact-form">
-                           <h3>Leave us a Message Here</h3>
-                           <form>
-                              <div class="row">
-                                 <div class="col-sm-6 col-xs-12">
-                                    <div class="form-group">
-                                       <input type="text" class="form-control" id="firstname" placeholder="First Name"
-                                          name="firstname">
-                                    </div>
-                                    <!--/.form-group-->
-                                 </div>
-                                 <!--/.col-->
-                                 <div class="col-sm-6 col-xs-12">
-                                    <div class="form-group">
-                                       <input type="text" class="form-control" id="lastname" placeholder="Last Name"
-                                          name="laststname">
-                                    </div>
-                                    <!--/.form-group-->
-                                 </div>
-                                 <!--/.col-->
-                              </div>
-                              <!--/.row-->
-                              <div class="row">
-                                 <div class="col-sm-6 col-xs-12">
-                                    <div class="form-group">
-                                       <input type="email" class="form-control" id="email" placeholder="Email"
-                                          name="email">
-                                    </div>
-                                    <!--/.form-group-->
-                                 </div>
-                                 <!--/.col-->
-                                 <div class="col-sm-6 col-xs-12">
-                                    <div class="form-group">
-                                       <input type="text" class="form-control" id="phone" placeholder="Phone"
-                                          name="phone">
-                                    </div>
-                                    <!--/.form-group-->
-                                 </div>
-                                 <!--/.col-->
-                              </div>
-                              <!--/.row-->
-                              <div class="row">
-                                 <div class="col-sm-12">
-                                    <div class="form-group">
-                                       <textarea class="form-control" rows="7" id="comment"
-                                          placeholder="Message"></textarea>
-                                    </div>
-                                    <!--/.form-group-->
-                                 </div>
-                                 <!--/.col-->
-                              </div>
-                              <!--/.row-->
-                              <div class="row">
-                                 <div class="col-sm-12">
-                                    <div class="single-contact-btn pull-right">
-                                       <button class="contact-btn" type="button">send message</button>
-                                    </div>
-                                    <!--/.single-single-contact-btn-->
-                                 </div>
-                                 <!--/.col-->
-                              </div>
-                              <!--/.row-->
-                           </form>
-                           <!--/form-->
+                        <!--/.col-->
+                        <div class="col-sm-5">
+                            <div class="single-contact-box">
+                                <div class="contact-form">
+                                    <h3>Leave us a Message Here</h3>
+                                    <form>
+                                        <div class="row">
+                                            <div class="col-sm-6 col-xs-12">
+                                                <div class="form-group">
+                                                    <input type="text" class="form-control" id="firstname" placeholder="First Name" name="firstname">
+                                                </div>
+                                                <!--/.form-group-->
+                                            </div>
+                                            <!--/.col-->
+                                            <div class="col-sm-6 col-xs-12">
+                                                <div class="form-group">
+                                                    <input type="text" class="form-control" id="lastname" placeholder="Last Name" name="laststname">
+                                                </div>
+                                                <!--/.form-group-->
+                                            </div>
+                                            <!--/.col-->
+                                        </div>
+                                        <!--/.row-->
+                                        <div class="row">
+                                            <div class="col-sm-6 col-xs-12">
+                                                <div class="form-group">
+                                                    <input type="email" class="form-control" id="email" placeholder="Email" name="email">
+                                                </div>
+                                                <!--/.form-group-->
+                                            </div>
+                                            <!--/.col-->
+                                            <div class="col-sm-6 col-xs-12">
+                                                <div class="form-group">
+                                                    <input type="text" class="form-control" id="phone" placeholder="Phone" name="phone">
+                                                </div>
+                                                <!--/.form-group-->
+                                            </div>
+                                            <!--/.col-->
+                                        </div>
+                                        <!--/.row-->
+                                        <div class="row">
+                                            <div class="col-sm-12">
+                                                <div class="form-group">
+                                                    <textarea class="form-control" rows="7" id="comment" placeholder="Message"></textarea>
+                                                </div>
+                                                <!--/.form-group-->
+                                            </div>
+                                            <!--/.col-->
+                                        </div>
+                                        <!--/.row-->
+                                        <div class="row">
+                                            <div class="col-sm-12">
+                                                <div class="single-contact-btn pull-right">
+                                                    <button class="contact-btn" type="button">send message</button>
+                                                </div>
+                                                <!--/.single-single-contact-btn-->
+                                            </div>
+                                            <!--/.col-->
+                                        </div>
+                                        <!--/.row-->
+                                    </form>
+                                    <!--/form-->
+                                </div>
+                                <!--/.contact-form-->
+                            </div>
+                            <!--/.single-contact-box-->
                         </div>
-                        <!--/.contact-form-->
-                     </div>
-                     <!--/.single-contact-box-->
-                  </div>
-                  <!--/.col-->
-               </div>
-               <!--/.row-->
+                        <!--/.col-->
+                    </div>
+                    <!--/.row-->
+                </div>
+                <!--/.contact-content-->
             </div>
-            <!--/.contact-content-->
-         </div>
-         <!--/.contact-details-->
-      </div>
-      <!--/.container-->
-
-   </section>
-   <!--/.contact-->
-   <!-- end contact -->
-   <!--  footer -->
-   <footer>
-      <div class="footer">
-         <div class="container">
-            <div class="row">
-               <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
-                  <a href="#top-of-page">
-                     <img class="logo1" src="./images/logo3.png" alt="#" />
-                  </a>
-                  <ul class="social_icon">
-                     <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
-                     <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
-                     <li><a href="#"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a></li>
-                     <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
-                  </ul>
-               </div>
-               <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
-                  <h3>INFO</h3>
-                  <ul class="about_us">
-                     <li><a href="#">About Us</a></li>
-                     <li><a href="#">FAQs</a></li>
-                     <li><a href="#">Advertise</a></li>
-                     <li><a href="#">Terms and Conditions</a></li>
-                     <li><a href="PrivacyPolicy.html">Privacy Policy</a></li>
-                     <li><a href="#">Help & Support</a></li>
-                  </ul>
-               </div>
+            <!--/.contact-details-->
+        </div>
+        <!--/.container-->
+
+    </section>
+    <!--/.contact-->
+    <!-- end contact -->
+    <!--  footer -->
+    <footer>
+        <div class="footer">
+            <div class="container">
+                <div class="row">
+                    <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
+                        <a href="#top-of-page">
+                            <img class="logo1" src="./images/logo3.png" alt="#" />
+                        </a>
+                        <ul class="social_icon">
+                            <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
+                            <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
+                            <li><a href="#"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a></li>
+                            <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
+                        </ul>
+                    </div>
+                    <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
+                        <h3>INFO</h3>
+                        <ul class="about_us">
+                            <li><a href="#">About Us</a></li>
+                            <li><a href="#">FAQs</a></li>
+                            <li><a href="#">Advertise</a></li>
+                            <li><a href="#">Terms and Conditions</a></li>
+                            <li><a href="PrivacyPolicy.html">Privacy Policy</a></li>
+                            <li><a href="#">Help & Support</a></li>
+                        </ul>
+                    </div>
 
-               <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
-                  <h3>Contact Us</h3>
-                  <ul class="conta">
-                     <li>
-                        <p>207 XYZ St. Mountain View, Karachi, Pakistan</p>
-                     </li>
-                     <li>+92 35565962049</li>
-                     <li>leather.hoard@gmail.com</li>
+                    <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
+                        <h3>Contact Us</h3>
+                        <ul class="conta">
+                            <li>
+                                <p>207 XYZ St. Mountain View, Karachi, Pakistan</p>
+                            </li>
+                            <li>+92 35565962049</li>
+                            <li>leather.hoard@gmail.com</li>
 
-                  </ul>
-               </div>
-               <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
-                  <form class="bottom_form">
-                     <h3>Newsletter</h3>
-                     <input class="enter" placeholder="Enter your email" type="text" name="Enter your email">
-                     <button class="sub_btn">subscribe</button>
-                  </form>
-               </div>
+                        </ul>
+                    </div>
+                    <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6">
+                        <form class="bottom_form">
+                            <h3>Newsletter</h3>
+                            <input class="enter" placeholder="Enter your email" type="text" name="Enter your email">
+                            <button class="sub_btn">subscribe</button>
+                        </form>
+                    </div>
+                </div>
             </div>
-         </div>
-         <div class="copyright">
-            <div class="container">
-               <div class="row">
-                  <div class="col-md-12">
-                     <p>Copyright © 2022 LeatherHoard, Inc. All rights reserved.</a></p>
-                  </div>
-               </div>
+            <div class="copyright">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-md-12">
+                            <p>Copyright © 2022 LeatherHoard, Inc. All rights reserved.</a>
+                            </p>
+                        </div>
+                    </div>
+                </div>
             </div>
-         </div>
-      </div>
-   </footer>
-
-   <div class="toggle-theme-btn">
-      <i class="fa fa-sun-o"></i>
-      <i class="fa fa-moon-o"></i>
-   </div>
-   <!-- end footer -->
-   <!-- Javascript files-->
-   <script src="./js/jquery.min.js"></script>
-   <script src="./js/bootstrap.bundle.min.js"></script>
-   <!-- sidebar -->
-
-   <script src="./js/custom.js"></script>
-
-   <!-- reiquired js for the page  -->
-   <script src="./js/searchSuggestions.js"> </script>
-   <script src="./js/index.js"></script>
+        </div>
+    </footer>
+
+    <div class="toggle-theme-btn">
+        <i class="fa fa-sun-o"></i>
+        <i class="fa fa-moon-o"></i>
+    </div>
+    <!-- end footer -->
+    <!-- Javascript files-->
+    <script src="./js/jquery.min.js"></script>
+    <script src="./js/bootstrap.bundle.min.js"></script>
+    <!-- sidebar -->
+
+    <script src="./js/custom.js"></script>
+
+    <!-- reiquired js for the page  -->
+    <script src="./js/searchSuggestions.js">
+    </script>
+    <script src="./js/index.js"></script>
 
 </body>
 
-</html>
+</html>
\ No newline at end of file