added new style and fixed send token

app/Components/layout/Header/Header.module.css

@@ -1,20 +1,23 @@
 .logo {
   position: relative;
   z-index: 3;
+  object-fit: contain;
 }
 
-.center {
-  display: flex;
-  height: 100%;
-  align-items: center;
-  width: 350px;
+.logoContainer {
+  position: relative;
+  width: 100%;
+  max-width: 250px;
+  min-width: 200px;
+  height: auto;
+  aspect-ratio: 250/70;
 }
 
 .cedetecContainer {
   position: absolute;
   top: 0;
   right: 0;
-  width: 200px;
+  width: 300px;
   height: 100%;
   z-index: -1;
 }
@@ -33,14 +36,80 @@
   left: -20px;
   width: 100%;
   height: 30px;
-  min-width: 300px;
   background: linear-gradient(to right, #bd8c01 40%, #fff 100%);
   transform: skew(-45deg);
   z-index: 0;
 }
 
+.header {
+  width: 100vw;
+  background-color: #fff;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  padding: 0 10px;
+  position: relative;
+  z-index: 1;
+  align-items: end;
+}
+
+.header::after {
+  content: "";
+  top: 0;
+  left: -60px;
+  position: absolute;
+  background-color: #003e79;
+  height: 100%;
+  min-width: 350px;
+  transform: skew(45deg);
+  z-index: 2;
+}
+
+.header::before {
+  content: "";
+  top: 0;
+  left: -40px;
+  position: absolute;
+  background-color: rgb(1, 92, 184);
+  height: 100%;
+  width: 10%;
+  min-width: 350px;
+  transform: skew(45deg);
+  z-index: 2;
+}
+
+.containerBarNav {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  padding-left: 110px;
+  max-height: 60%;
+  align-items: end;
+}
+
 @media (max-width: 800px) {
   .yellowPart {
+    left: 0;
     background: #bd8c01;
+    transform: skew(0deg);
+  }
+  .header::after {
+    left: -100px;
+  }
+  .header::before {
+    left: -80px;
+  }
+}
+
+@media (max-width: 400px) {
+  .header::after {
+    min-width: 100%;
+    transform: skew(25deg);
+  }
+  .header::before {
+    min-width: 100%;
+    transform: skew(25deg);
+  }
+  .containerBarNav {
+    padding-left: 0;
   }
 }