feat: fixed issues

assets/scss/_b-reset.scss

@@ -78,6 +78,12 @@ body {
   overflow-y: scroll;
   color: $black;
   background-color: $greybg;
+
+  &.hidden {
+    @include laptop {
+      overflow: hidden;
+    }
+  }
 }
 
 a,

assets/scss/_l-faq.scss

@@ -60,6 +60,7 @@
       font-size: 21px;
       line-height: 146%;
       color: $black;
+      cursor: pointer;
 
       @include tablet {
         font-size: 18px;

assets/scss/_l-header.scss

@@ -35,9 +35,12 @@
       top: 70px;
       left: 0;
       right: 0;
+      bottom: 0;
+      z-index: 1000;
       flex-direction: column;
       gap: 0;
       padding: 7px 7px 44px;
+      overflow: auto;
       border-radius: 40px 7px;
       background-color: $blue;
       transform: translateX(-200%);

assets/scss/_l-step-by-step.scss

@@ -50,8 +50,10 @@
       justify-content: flex-start;
       gap: 20px;
       padding: 11px 29px 15px;
-      border: 1px solid rgba(98, 98, 98, 0.25);
+      color: $grey;
+      border: 1px solid $white;
       border-radius: 8px 25px;
+      background-color: $white;
       transition: all ease-in-out 0.1s;
       cursor: pointer;
 
@@ -60,21 +62,21 @@
         padding: 8px 21px;
       }
 
-      &:hover,
-      &.active:hover {
+      &:hover {
         background-color: $blue;
         border-color: $blue;
+        color: $white;
       }
 
-      &:active,
-      &.active:active {
+      &:active {
         background-color: $darkblue;
         border-color: $darkblue;
+        color: $white;
       }
 
       &.active {
-        border-color: rgba($color: $white, $alpha: 1);
-        background-color: $white;
+        border-color: $blue;
+        background-color: $blue;
       }
 
       &-number {
@@ -92,23 +94,24 @@
         font-weight: 400;
         font-size: 24px;
         line-height: 146%;
-        color: $darkgrey;
-
+        color: $grey;
         font-size: 20px;
       }
 
+      &:hover &-number,
+      &:hover &-text,
+      &:active &-number,
+      &:active &-text {
+        color: $white;
+      }
+
       &.active &-number {
         font-weight: 700;
-        color: $black;
+        color: $white;
       }
 
       &.active &-text {
         font-weight: 500;
-        color: $darkgrey;
-      }
-
-      &:hover &-number,
-      &:hover &-text {
         color: $white;
       }
     }

assets/scss/_m-button.scss

@@ -5,6 +5,17 @@
   transition: all ease-in-out 0.1s;
   cursor: pointer;
 
+  @keyframes move-light {
+    from {
+      transform: translateX(-40px) skewX(-45deg);
+      opacity: 1;
+    }
+    to {
+      transform: translateX(400px) skewX(-45deg);
+      opacity: 0.8;
+    }
+  }
+
   &--lg {
     display: flex;
     align-items: center;
@@ -50,27 +61,50 @@
   }
 
   &--light {
+    position: relative;
+    overflow: hidden;
     color: $black;
     background-color: $white;
 
     &:hover {
       color: $blue;
+
+      &::after {
+        animation: move-light 0.5s;
+      }
     }
 
     &:active {
       color: $darkblue;
     }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 1.5em;
+      height: 100%;
+      background-color: rgba($color: $blue, $alpha: 0.5);
+      transform: translateX(-4em) skewX(-45deg);
+    }
   }
 
   &--dark {
-    background-color: $blue;
+    position: relative;
+    overflow: hidden;
     color: $white;
     border-color: rgba($color: $white, $alpha: 0.3);
+    background-color: $blue;
 
     &:hover {
       color: $blue;
       background-color: $white;
       border-color: $blue;
+
+      &::after {
+        animation: move-light 0.5s;
+      }
     }
 
     &:active {
@@ -78,6 +112,17 @@
       border-color: $darkblue;
     }
 
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 1.5em;
+      height: 100%;
+      background-color: rgba($color: $blue, $alpha: 0.5);
+      transform: translateX(-4em) skewX(-45deg);
+    }
+
     &::before {
       filter: brightness(10);
     }
@@ -110,7 +155,7 @@
 
     &--light {
       color: #dcdcdc;
-      border-color: rgba($color: $white, $alpha: 1.0);
+      border-color: rgba($color: $white, $alpha: 1);
     }
 
     &--white {
@@ -123,7 +168,7 @@
         border-color: $white;
         background-color: $blue;
       }
-  
+
       &:active {
         border-color: $white;
         background-color: $darkblue;