checkout/src/arquivos/sass/partials/_header.scss

@@ -1,36 +1,172 @@
-/* _header.scss */
 .headerCheckout {
     .container {
         width: auto !important;
     }
     &__wrapper {
-        align-items: center;
         display: flex;
-        justify-content: space-between;
+        align-items: center;
+        justify-content: space-around;
+        padding: 16px;
+        border-bottom: 1px solid $black;
+
+        @media (min-width: 1025px) {
+            padding: 33.5px 0;
+        }
+
+        @media (min-width: 2500px) {
+            padding: 33.5px 0;
+        }
+    }
+    .progress-bar {
+        display: flex;
+        flex-direction: column;
+        right: 31.5%;
+        top: 33%;
+        @media (max-width: 1024px) {
+            display: none;
+        }
+        @media (min-width: 2500px) {
+            right: 41%;
+        }
+
+        .containerLi {
+            display: flex;
+            position: relative;
+            align-items: center;
+        }
+        ul {
+            display: flex;
+            margin: 0;
+            gap: 100px;
+            list-style: none;
+        }
+
+        p {
+            margin-bottom: 0;
+        }
+
+        &-text {
+            font-family: $font-family-secundary;
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 14px;
+
+            @media (min-width: 2500px) {
+                font-size: 24px;
+                line-height: 28px;
+            }
+        }
+
+        &-line-1,
+        &-line-2 {
+            position: absolute;
+            width: 171px;
+            top: 82%;
+            left: 55%;
+            border: 1px solid $black;
+            z-index: 0;
+
+            @media (min-width: 2500px) {
+                width: 240px;
+                top: 79%;
+                left: 55%;
+            }
+        }
+
+        &-line-2 {
+            width: 166px;
+            left: -223%;
+
+            @media (min-width: 2500px) {
+                width: 230px;
+                left: -143%;
+            }
+        }
+
+        &-circle-1,
+        &-circle-2,
+        &-circle-3 {
+            display: flex;
+            height: 10px;
+            width: 10px;
+            align-self: center;
+            background: $white;
+            border: 1px solid $black;
+            border-radius: 50%;
+            margin-left: 40%;
+            margin-top: 9px;
+            padding: 0;
+
+            @media (min-width: 2500px) {
+                height: 22px;
+                width: 22px;
+            }
+        }
+
+        .active {
+            background: $black;
+        }
     }
 
     &__logo {
-        img {
+        width: 45.35%;
-            height: 52px;
+
-            width: auto;
+        @media (min-width: 1025px) {
+            width: 17.059%;
+        }
+
+        @media (min-width: 1025px) {
+            width: 15.28%;
+
+            img {
+                width: 100%;
+            }
+        }
+        @media (min-width: 2500px) {
+            width: 19.22%;
         }
     }
 
     &__safeBuy {
+        justify-content: flex-end;
+        display: flex;
+        align-items: center;
+
+        @media (min-width: 1025px) {
+            width: 15.5%;
+        }
+
+        @media (min-width: 2500px) {
+            width: 20%;
+        }
+
         span {
-            align-items: center;
+            min-width: fit-content;
-            display: flex;
+            height: 50%;
             text-transform: uppercase;
             font-family: $font-family;
             font-style: normal;
             font-weight: normal;
             font-size: 12px;
-            line-height: 14px;
+            line-height: 16px;
             color: $color-gray;
+            margin-left: 8px;
+
+            @media (min-width: 2500px) {
+                font-style: normal;
+                font-weight: 400;
+                font-size: 24px;
+                line-height: 33px;
+            }
         }
 
-        i {
+        img {
-            margin-right: 8px;
+            width: 4.5%;
+            min-width: 12px;
+
+            @media (min-width: 2500px) {
+                width: 6.1%;
+            }
         }
     }
 }