add design

assets/css/style.css

@@ -10,6 +10,10 @@
   font-family: "Roboto";
   src: url("../font/Roboto-Regular.ttf") format("truetype");
 }
+@font-face {
+  font-family: "Roboto-Med";
+  src: url("../font/Roboto-Bold.ttf") format("truetype");
+}
 @font-face {
   font-family: "Roboto-Bold";
   src: url("../font/Roboto-ExtraBold.ttf") format("truetype");
@@ -120,13 +124,15 @@ html body a:hover {
   height: 384px;
   width: 384px;
   position: absolute;
-  left: 0;
+  left: -25px;
-  top: 100px;
+  top: 30px;
   z-index: -1;
 }
 
 .container {
-  max-width: 1080px;
+  width: 100%;
+  padding-right: var(--bs-gutter-x, 0.75rem);
+  padding-left: var(--bs-gutter-x, 0.75rem);
   margin-right: auto;
   margin-left: auto;
 }
@@ -143,6 +149,63 @@ html body a:hover {
   justify-content: center;
 }
 
+.footer {
+  position: relative;
+}
+.footer .effect-2 {
+  height: 522px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+}
+.footer .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;
+}
+.footer .footter-inner .f-top {
+  padding-bottom: 40px;
+}
+.footer .footter-inner .f-top img {
+  width: 177px;
+}
+.footer .footter-inner .f-midd {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 40px;
+}
+.footer .footter-inner .f-midd .footer-item {
+  width: 32%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.footer .footter-inner .f-midd .footer-item span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.footer .footter-inner .f-midd .footer-item span img {
+  margin-right: 20px;
+}
+.footer .footter-inner .f-bott p {
+  font-size: 12px;
+  color: #9E9E9E;
+  text-align: center;
+  padding-bottom: 15px;
+}
+
+.d-none {
+  display: none;
+}
+
 .slider {
   padding-top: 15px;
 }
@@ -233,56 +296,138 @@ html body a:hover {
   text-align: center;
 }
 
-.footer {
+.contact-us {
-  position: relative;
+  padding-top: 50px;
 }
-.footer .effect-2 {
+.contact-us .contact-us-inner .cu-top {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  z-index: -1;
-}
-.footer .footter-inner {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: center;
   flex-direction: column;
-  padding-top: 30px;
-  padding-bottom: 50px;
-  border-top: 1px solid #e7e7e7;
 }
-.footer .footter-inner .f-top {
+.contact-us .contact-us-inner .cu-top span {
-  padding-bottom: 40px;
+  display: inline-block;
+  padding: 7px 10px;
+  font-size: 14px;
+  background-color: #e3eeff;
+  color: #0164FF;
+  border-radius: 50px;
+  font-weight: 500;
 }
-.footer .footter-inner .f-top img {
+.contact-us .contact-us-inner .cu-top h1 {
-  width: 177px;
+  font-family: "Roboto-Bold";
+  font-size: 48px;
+  font-weight: 900;
+  color: #222222;
+  padding: 30px 0;
 }
-.footer .footter-inner .f-midd {
+.contact-us .contact-us-inner .cu-top p {
+  font-size: 16px;
+  font-weight: 300;
+  color: #222222;
+}
+.contact-us .contact-us-inner .cu-top p a {
+  color: #0164FF;
+}
+.contact-us .contact-us-inner .cu-main {
+  margin-top: 70px;
+  margin-bottom: 70px;
+  padding: 30px;
+  border-radius: 32px;
+  border: 1px solid #DADADA;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.contact-us .contact-us-inner .cu-main .cu-main-inner {
+  width: 60%;
+}
+
+.input-box {
+  margin-bottom: 25px;
+}
+.input-box label {
+  display: inline-block;
+  font-size: 16px;
+  margin-bottom: 12px;
+  color: #222;
+}
+.input-box div {
+  display: flex;
+  align-items: center;
+  border-radius: 10px;
+  height: 44px;
+  border: 1px solid #DADADA;
+  overflow: hidden;
+}
+.input-box div img {
+  margin-left: 15px;
+  margin-right: 5px;
+}
+.input-box div input {
   width: 100%;
-  display: flex;
+  height: 100%;
-  align-items: center;
+  border: 0;
-  justify-content: space-between;
+  font-family: "Roboto-Med";
-  padding-bottom: 40px;
 }
-.footer .footter-inner .f-midd .footer-item {
+.input-box div input::placeholder {
-  width: 32%;
+  font-family: "Roboto";
-  display: flex;
-  align-items: center;
-  justify-content: center;
 }
-.footer .footter-inner .f-midd .footer-item span {
+.input-box div:focus-within {
-  display: flex;
+  border: 1px solid #0164FF;
-  align-items: center;
-  justify-content: center;
 }
-.footer .footter-inner .f-midd .footer-item span img {
+.input-box.textarea div {
-  margin-right: 20px;
+  height: 90px;
+}
+.input-box.textarea textarea {
+  width: 100%;
+  height: 100%;
+  padding-left: 20px;
+  padding-top: 10px;
+  border: none;
+  resize: none;
+  font-size: 14px;
+  font-family: "Roboto";
+}
+.input-box.submit {
+  padding-top: 15px;
+}
+.input-box.submit input[type=submit],
+.input-box.submit button {
+  width: 100%;
+  border: none;
+  font-size: 16px;
+  color: #fff;
+  padding: 18.5px 0;
+  background-color: #0164FF;
+  border-radius: 50px;
+}
+
+@media (min-width: 576px) {
+  .container {
+    max-width: 540px;
+  }
+}
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+}
+@media (min-width: 992px) {
+  .container {
+    max-width: 960px;
+  }
+}
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1080px;
+  }
+}
+@media (min-width: 1441px) {
+  .container {
+    max-width: 1280px;
   }
-.footer .footter-inner .f-bott p {
-  font-size: 12px;
-  color: #9E9E9E;
-  text-align: center;
-  padding-bottom: 15px;
 }
 
 /*# sourceMappingURL=style.css.map */

assets/css/style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/style.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAaF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAIF;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;EACA;;;AAKJ;EACE;;AAEA;EACE;EAEA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;AAEA;EACE;EACA;EACA;;;AAcR;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAOR;EACE;;AAGA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAYN;EACE;EACA;EACA;EACA","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/style.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAWE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAaF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAQF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAOJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AAYN;EACE;EACA;EACA;EACA;;;AAWR;EACE;;;AAOF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;EACE;;AAEA;EACE;EACA;EACA;;;AAOR;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;;AAmBR;EACE;;AAGE;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAQR;EACE;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAIJ;EACE;;AAKF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;;AAEA;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWN;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE;;;AAIJ;EACE;IACE","file":"style.css"}

assets/image/Calling.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.3639 11.1924V10.6267C18.3639 10.5421 18.3639 10.4997 18.3634 10.4639C18.3247 7.75855 16.1409 5.57479 13.4355 5.53605C13.3997 5.53553 13.3574 5.53553 13.2728 5.53553H12.7071M21.8996 11.8995V10.9095C21.8996 10.0649 21.8996 9.64258 21.8677 9.28659C21.5226 5.43191 18.4677 2.37699 14.613 2.03187C14.257 2 13.8347 2 12.99 2L12.0001 2M8.77785 9.22339C8.32461 10.2632 8.554 11.4744 9.35605 12.2765L11.7529 14.6733C12.5549 15.4753 13.7661 15.7047 14.8059 15.2515C15.8457 14.7982 17.057 15.0276 17.859 15.8297L19.3172 17.2879C19.3878 17.3585 19.4232 17.3938 19.4518 17.425C20.1548 18.1901 20.1548 19.3662 19.4518 20.1314C19.4232 20.1625 19.3878 20.1978 19.3172 20.2685L18.4309 21.1548C17.7091 21.8766 16.6685 22.1796 15.6721 21.9582C8.88248 20.4494 3.57995 15.1468 2.07115 8.35725C1.84971 7.36079 2.15272 6.32026 2.87451 5.59846L3.76085 4.71212C3.8315 4.64147 3.86682 4.60615 3.89794 4.57756C4.6631 3.87448 5.83921 3.87448 6.60436 4.57756C6.63548 4.60615 6.67081 4.64147 6.74145 4.71212L8.19965 6.17032C9.0017 6.97237 9.23109 8.18361 8.77785 9.22339Z" stroke="#9E9E9E" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

assets/image/Message-2.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.60805 5.64824C2 6.93577 2 8.77405 2 12C2 15.7497 2 17.6246 2.95491 18.9389C3.26331 19.3634 3.6366 19.7367 4.06107 20.0451C5.3754 21 7.25027 21 11 21H13C16.7497 21 18.6246 21 19.9389 20.0451C20.3634 19.7367 20.7367 19.3634 21.0451 18.9389C22 17.6246 22 15.7497 22 12C22 8.75125 22 6.90985 21.379 5.62103M2.60805 5.64824C2.70677 5.4392 2.82153 5.24467 2.95491 5.06107C3.26331 4.6366 3.6366 4.26331 4.06107 3.95491C5.3754 3 7.25027 3 11 3H13C16.7497 3 18.6246 3 19.9389 3.95491C20.3634 4.26331 20.7367 4.6366 21.0451 5.06107C21.1727 5.23667 21.2832 5.42228 21.379 5.62103M2.60805 5.64824L3 6L4.92893 7.92893C8.26227 11.2623 9.92893 12.9289 12 12.9289C14.0711 12.9289 15.7377 11.2623 19.0711 7.92894L21 6L21.379 5.62103" stroke="#9E9E9E" stroke-width="1.5"/>
+</svg>

assets/image/user.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 6H15.25C15.25 7.79493 13.7949 9.25 12 9.25V10V10.75C14.6234 10.75 16.75 8.62335 16.75 6H16ZM12 10V9.25C10.2051 9.25 8.75 7.79493 8.75 6H8H7.25C7.25 8.62335 9.37665 10.75 12 10.75V10ZM8 6H8.75C8.75 4.20507 10.2051 2.75 12 2.75V2V1.25C9.37665 1.25 7.25 3.37665 7.25 6H8ZM12 2V2.75C13.7949 2.75 15.25 4.20507 15.25 6H16H16.75C16.75 3.37665 14.6234 1.25 12 1.25V2ZM9 13V13.75H15V13V12.25H9V13ZM15 21V20.25H9V21V21.75H15V21ZM9 21V20.25C7.20507 20.25 5.75 18.7949 5.75 17H5H4.25C4.25 19.6234 6.37665 21.75 9 21.75V21ZM19 17H18.25C18.25 18.7949 16.7949 20.25 15 20.25V21V21.75C17.6234 21.75 19.75 19.6234 19.75 17H19ZM15 13V13.75C16.7949 13.75 18.25 15.2051 18.25 17H19H19.75C19.75 14.3766 17.6234 12.25 15 12.25V13ZM9 13V12.25C6.37665 12.25 4.25 14.3766 4.25 17H5H5.75C5.75 15.2051 7.20507 13.75 9 13.75V13Z" fill="#9E9E9E"/>
+</svg>

assets/scss/style.scss

@@ -13,6 +13,11 @@
   src: url('../font/Roboto-Regular.ttf') format("truetype");
 }
 
+@font-face {
+  font-family: 'Roboto-Med';
+  src: url('../font/Roboto-Bold.ttf') format("truetype");
+}
+
 @font-face {
   font-family: 'Roboto-Bold';
   src: url('../font/Roboto-ExtraBold.ttf') format("truetype");
@@ -27,6 +32,7 @@ html body {
   color: #505050;
   margin: 0;
   direction: ltr;
+  overflow-x: hidden;
 }
 
 html:focus,
@@ -140,27 +146,26 @@ html body a:hover {
     height: 384px;
     width: 384px;
     position: absolute;
-    left: 0;
+    left: -25px;
-    top: 100px;
+    top: 30px;
     z-index: -1;
   }
 }
 
 .container {
-  max-width: 1080px;
+  width: 100%;
+  padding-right: var(--bs-gutter-x, 0.75rem);
+  padding-left: var(--bs-gutter-x, 0.75rem);
   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;
@@ -169,126 +174,13 @@ html body a:hover {
 }
 
 
-.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 {
+    height: 522px;
     position: absolute;
     right: 0;
     bottom: 0;
@@ -353,3 +245,301 @@ html body a:hover {
     }
   }
 }
+
+
+
+
+
+
+.d-none {
+  display: none;
+}
+
+
+
+// ------------------------------Index Page-------------
+
+.slider {
+  padding-top: 15px;
+
+  .slider-inner {
+    display: flex;
+    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;
+    }
+
+    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;
+      }
+    }
+  }
+}
+
+// ------------------------------Index Page END-------------
+
+
+
+
+
+
+
+
+
+
+// ------------------------------Contact Us page-------------
+
+.contact-us {
+  padding-top: 50px;
+
+  .contact-us-inner {
+    .cu-top {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+
+      span {
+        display: inline-block;
+        padding: 7px 10px;
+        font-size: 14px;
+        background-color: #e3eeff;
+        color: #0164FF;
+        border-radius: 50px;
+        font-weight: 500;
+      }
+
+      h1 {
+        font-family: 'Roboto-Bold';
+        font-size: 48px;
+        font-weight: 900;
+        color: #222222;
+        padding: 30px 0;
+      }
+
+      p {
+        font-size: 16px;
+        font-weight: 300;
+        color: #222222;
+
+        a {
+          color: #0164FF;
+        }
+      }
+    }
+
+    .cu-main {
+      margin-top: 70px;
+      margin-bottom: 70px;
+      padding: 30px;
+      border-radius: 32px;
+      border: 1px solid #DADADA;
+      background-color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .cu-main-inner {
+        width: 60%;
+      }
+    }
+  }
+}
+
+
+
+.input-box {
+  margin-bottom: 25px;
+
+  label {
+    display: inline-block;
+    font-size: 16px;
+    margin-bottom: 12px;
+    color: #222;
+  }
+
+  div {
+    display: flex;
+    align-items: center;
+    border-radius: 10px;
+    height: 44px;
+    border: 1px solid #DADADA;
+    overflow: hidden;
+
+    img {
+      margin-left: 15px;
+      margin-right: 5px;
+    }
+
+    input {
+      width: 100%;
+      height: 100%;
+      border: 0;
+      font-family: 'Roboto-Med';
+
+      &::placeholder {
+        font-family: 'Roboto';
+      }
+    }
+
+    &:focus-within {
+      border: 1px solid #0164FF;
+    }
+  }
+
+  &.textarea {
+    div {
+      height: 90px;
+    }
+
+    textarea {
+      width: 100%;
+      height: 100%;
+      padding-left: 20px;
+      padding-top: 10px;
+      border: none;
+      resize: none;
+      font-size: 14px;
+      font-family: 'Roboto';
+    }
+  }
+
+  &.submit {
+    padding-top: 15px;
+
+    & input[type="submit"],
+    button {
+      width: 100%;
+      border: none;
+      font-size: 16px;
+      color: #fff;
+      padding: 18.5px 0;
+      background-color: #0164FF;
+      border-radius: 50px;
+    }
+  }
+}
+
+// ------------------------------Contact Us page End-------------
+
+
+
+
+
+@media (min-width: 576px) {
+  .container {
+    max-width: 540px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 720px;
+  }
+}
+
+@media (min-width: 992px) {
+  .container {
+    max-width: 960px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .container {
+    max-width: 1080px;
+  }
+}
+
+@media (min-width: 1441px) {
+  .container {
+    max-width: 1280px;
+  }
+}

contact-us.html

@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
+    <title>tm landing</title>
+    <link rel="stylesheet" href="assets/css/style.css">
+</head>
+
+<body>
+
+    <header>
+        <div class="container">
+            <div class="header">
+                <div class="header-logo">
+                    <img src="./assets/image/logo.png" alt="">
+                </div>
+                <div class="header-side">
+                    <div>
+                        <a class="white-btn" href="">Contact us</a>
+                        <a class="blue-btn" href="">Login</a>
+                    </div>
+                    <div>
+                        eng
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+
+
+    <section class="main-section">
+        <img class="effect-one" src="./assets/image/effect-1.svg" alt="">
+
+        <div class="container">
+
+            <div class="contact-us">
+                <div class="contact-us-inner">
+                    <div class="cu-top">
+                        <span>Contact us</span>
+                        <h1>Let’ s Get In Touch</h1>
+                        <div>
+                            <p>Or just reach out manually to <a href="">info@Tendermanagment.com</a> </p>
+                        </div>
+                    </div>
+
+                    <div class="cu-main">
+                        <div class="cu-main-inner">
+
+                            <form action="">
+                                <div class="input-box">
+                                    <label for="">Full Name</label>
+                                    <div>
+                                        <img src="./assets/image/user.svg" alt="">
+                                        <input type="text" placeholder="Input Name">
+                                    </div>
+                                </div>
+
+                                <div class="input-box">
+                                    <label for="">Work Email</label>
+                                    <div>
+                                        <img src="./assets/image/Message-2.svg" alt="">
+                                        <input type="text" placeholder="Sadaf@gmail.com">
+                                    </div>
+                                </div>
+
+                                <div class="input-box">
+                                    <label for="">Phone Number</label>
+                                    <div>
+                                        <img src="./assets/image/Calling.svg" alt="">
+                                        <input type="text" placeholder="Phone Number">
+                                    </div>
+                                </div>
+
+                                <div class="input-box textarea">
+                                    <label for="">Phone Number</label>
+                                    <div>
+                                        <textarea name="" id="" placeholder="Message Text"></textarea>
+                                    </div>
+                                </div>
+
+                                <div class="input-box submit">
+                                    <input type="submit" value="Submit">
+                                    <!-- <button>Submit</button> -->
+                                </div>
+                            </form>
+
+                        </div>
+
+                    </div>
+
+
+                </div>
+
+            </div>
+
+        </div>
+    </section>
+
+
+    <footer>
+        <div class="footer">
+            <img class="effect-2" src="./assets/image/effect-2.png" alt="">
+
+            <div class="container">
+                <div class="footter-inner">
+
+                    <div class="f-top">
+                        <img src="./assets/image/logo.png" alt="">
+
+                    </div>
+                    <div class="f-midd">
+
+                        <div class="footer-item">
+                            <span>
+                                <img src="./assets/image/Location.svg" alt="">
+                                info@Tendermanagment.com
+                            </span>
+                        </div>
+
+                        <div class="footer-item">
+                            <span>
+                                <img src="./assets/image/Location.svg" alt="">
+                                (+1) -20000
+                            </span>
+                        </div>
+
+                        <div class="footer-item">
+                            <span>
+                                <img src="./assets/image/Location.svg" alt="">
+                                USA , California
+                            </span>
+                        </div>
+                    </div>
+                    <div class="f-bott">
+                        <p>© 2025 Opplens.com by PBL Partners AB. All Rights Reserved.</p>
+                        <p>Democratizing Tender Access for SMEs.</p>
+                    </div>
+
+
+                </div>
+            </div>
+        </div>
+    </footer>
+
+
+    <script src="assets/js/main.js"></script>
+</body>
+
+</html>

index.html

@@ -9,29 +9,32 @@
 </head>
 
 <body>
-    <div class="main-section">
-        <div class="effect-one">
-            <img src="./assets/image/effect-1.svg" alt="">
-        </div>
-
 
+    <header>
         <div class="container">
-
             <div class="header">
                 <div class="header-logo">
                     <img src="./assets/image/logo.png" alt="">
                 </div>
                 <div class="header-side">
                     <div>
-                        <a class="white-btn" href="">Contact us</a>
+                        <a class="white-btn" href="./contact-us.html">Contact us</a>
                         <a class="blue-btn" href="">Login</a>
                     </div>
-                    <div>
+                    <div class="select-box">
                         eng
                     </div>
                 </div>
             </div>
+        </div>
+    </header>
 
+    
+
+    <section class="main-section">
+        <img class="effect-one" src="./assets/image/effect-1.svg" alt="">
+
+        <div class="container">
             <div class="slider">
                 <div class="slider-inner">
                     <div class="s-left">
@@ -86,12 +89,12 @@
 
             </div>
         </div>
-    </div>
+    </section>
 
 
     <footer>
         <div class="footer">
-            <img class="effect-2" src="./assets/image/effect-2.svg" alt="">
+            <img class="effect-2" src="./assets/image/effect-2.png" alt="">
 
             <div class="container">
                 <div class="footter-inner">
@@ -105,14 +108,14 @@
                         <div class="footer-item">
                             <span>
                                 <img src="./assets/image/Location.svg" alt="">
-                                USA , California
+                                info@Tendermanagment.com
                             </span>
                         </div>
 
                         <div class="footer-item">
                             <span>
                                 <img src="./assets/image/Location.svg" alt="">
-                                USA , California
+                                (+1) -20000
                             </span>
                         </div>