add index page

assets/scss/style.scss

@@ -7,13 +7,26 @@
   font-family: 'Lato-Regular';
   src: url('../font/Lato-Regular.ttf') format("truetype");
 }
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../font/Roboto-Regular.ttf') format("truetype");
+}
+
+@font-face {
+  font-family: 'Roboto-Bold';
+  src: url('../font/Roboto-ExtraBold.ttf') format("truetype");
+}
+
+
 html body {
   position: relative;
   min-height: 100%;
-  font-family: "Lato-Regular";
+  font-family: "Roboto";
   font-size: 16px;
   color: #505050;
   margin: 0;
+  direction: ltr;
 }
 
 html:focus,
@@ -21,41 +34,322 @@ body:focus,
 *:focus {
   outline: unset;
 }
+
 * {
   box-sizing: border-box;
 }
+
+a {
+  text-decoration: none;
+}
+
 ul {
   padding: 0;
   margin: 0;
 }
+
 li {
   list-style: none;
 }
-ul , li , h1 , h2 , h3 , h4 , h5 , h6 , p ,strong , span{
-    margin: 0;
-    padding: 0;
+
+ul,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+strong,
+span {
+  margin: 0;
+  padding: 0;
 }
+
 html body button {
   cursor: pointer;
 }
+
 html body a {
   color: #505050;
 }
+
 html body a:hover {
   text-decoration: none;
   color: #505050;
 }
+
 ::-webkit-scrollbar {
   width: 7.5px;
 }
+
 ::-webkit-scrollbar-track {
   box-shadow: inset 0 0 5px grey;
   border-radius: 15px;
 }
+
 ::-webkit-scrollbar-thumb {
   background: #a0a0a0;
   border-radius: 15px;
 }
+
 ::-webkit-scrollbar-thumb:hover {
   background: #a0a0a0;
 }
+
+
+
+
+
+
+
+
+
+// =====================================
+
+.blue-btn {
+  font-size: 14px;
+  padding: 20px 49px;
+  background-color: #0164FF;
+  color: #fff;
+  border-radius: 50px;
+  margin: 0 10px;
+  font-weight: 500;
+}
+
+.white-btn {
+  font-size: 14px;
+  padding: 20px 10px;
+  background-color: #fff;
+  color: #0164FF;
+  border-radius: 50px;
+  margin: 0 10px;
+  font-weight: 500;
+}
+
+
+
+// =====================================
+
+
+.main-section {
+  position: relative;
+
+  .effect-one {
+    height: 384px;
+    width: 384px;
+    position: absolute;
+    left: 0;
+    top: 100px;
+    z-index: -1;
+  }
+}
+
+.container {
+  max-width: 1080px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+
+.header {
+  height: 76px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .header-logo {}
+
+  .header-side {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+
+.slider {
+  padding-top: 15px;
+
+  .slider-inner {
+    display: flex;
+    // align-items: center;
+    justify-content: space-between;
+  }
+
+  .s-left {
+    width: 50%;
+    padding-top: 50px;
+
+    h1 {
+      font-family: 'Roboto-Bold';
+      font-size: 89px;
+      font-weight: 900;
+      background-image: radial-gradient(52.27% 52.27% at 50% 50%, #0164FF 0%, #2EEAE1 100%);
+      -webkit-background-clip: text;
+      background-clip: text;
+      color: transparent;
+      // margin-bottom: 50px;
+    }
+
+    h3 {
+      font-family: 'Roboto-Bold';
+      font-weight: 900;
+      font-size: 48px;
+      color: #0164FF;
+      margin-top: 40px;
+      margin-bottom: 40px;
+    }
+
+    strong {
+      font-family: 'Roboto-Bold';
+      font-weight: 900;
+      font-size: 32px;
+      color: #222222;
+    }
+
+    p {
+      font-size: 16px;
+      font-weight: 400;
+      color: #777;
+      margin-top: 20px;
+    }
+  }
+
+  .s-right {
+    width: 50%;
+
+    .s-right-inner {
+      position: relative;
+
+      img {
+        position: absolute;
+        top: 0;
+        right: -25%;
+      }
+    }
+
+
+
+
+  }
+}
+
+
+
+
+
+.our-sec {
+  padding-top: 120px;
+  padding-bottom: 130px;
+
+  .our-sec-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .os-item {
+      width: 30%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+
+      h1 {
+        font-family: 'Roboto-Bold';
+        font-size: 89px;
+        font-weight: 900;
+        background-image: radial-gradient(52.27% 52.27% at 50% 50%, #0164FF 0%, #2EEAE1 100%);
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        margin-bottom: 20px;
+      }
+
+      span {
+        font-size: 20px;
+        color: #000;
+        font-weight: 600;
+      }
+
+      p {
+        margin-top: 20px;
+        font-size: 16px;
+        color: #777777;
+        text-align: center;
+      }
+    }
+  }
+}
+
+
+.footer {
+  position: relative;
+
+
+  .effect-2 {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+  }
+
+  .footter-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-direction: column;
+    padding-top: 30px;
+    padding-bottom: 50px;
+    border-top: 1px solid #e7e7e7;
+
+
+    .f-top {
+      padding-bottom: 40px;
+
+      img {
+        width: 177px;
+      }
+    }
+
+    .f-midd {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding-bottom: 40px;
+
+      .footer-item {
+        width: 32%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        span {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          img {
+            margin-right: 20px;
+          }
+        }
+      }
+
+
+
+
+
+    }
+
+    .f-bott {
+      p {
+        font-size: 12px;
+        color: #9E9E9E;
+        text-align: center;
+        padding-bottom: 15px;
+      }
+    }
+  }
+}