diff --git a/src/scss/app.scss b/src/scss/app.scss
index 752f8972..be06e1dc 100755
--- a/src/scss/app.scss
+++ b/src/scss/app.scss
@@ -1,38 +1,41 @@
+// Flexbox Grid Setup
 @import "~flexboxgrid-sass/flexboxgrid";
+
 $name: xs;
 
 @for $i from 1 through 12 {
   .col-#{$name}-offset-#{$i} {
     @include flexboxgrid-sass-col-common;
-    margin-right: 100% / 12 * $i;
     margin-left: 0;
+    margin-right: (100% / 12) * $i;
   }
 }
 
 @each $breakpoint in $breakpoints {
   $name: nth($breakpoint, 1);
   $size: nth($breakpoint, 2);
+
   @media only screen and (min-width: $size) {
     @for $i from 1 through $grid-columns {
       .col-#{$name}-offset-#{$i} {
         @include flexboxgrid-sass-col-common;
-        margin-right: 100% / $grid-columns * $i;
         margin-left: 0;
+        margin-right: (100% / $grid-columns) * $i;
       }
     }
   }
 }
 
-
+// Responsive Utilities
 @import "responsive/media";
 
-//Common
+// Common Styles
 @import "./pages/variables";
 @import "./pages/fonts";
 @import "./pages/common";
 @import "./partials/_forms";
 
-//Partials
+// Layout Partials
 @import "./partials/animation";
 @import "./partials/header";
 @import "./partials/blue_header";
@@ -40,9 +43,9 @@ $name: xs;
 @import "./partials/page_section";
 @import "./partials/customer";
 @import "./partials/footer";
-
-//Pages
 @import "./partials/page";
+
+// Page-Specific Styles
 @import "./pages/index";
 @import "./pages/contact";
 @import "./pages/responsible";
diff --git a/src/scss/campaign/bizhero.scss b/src/scss/campaign/bizhero.scss
index 93ef92fb..6b8a3c86 100644
--- a/src/scss/campaign/bizhero.scss
+++ b/src/scss/campaign/bizhero.scss
@@ -1,87 +1,94 @@
 @import "@material/textfield/mdc-text-field";
 @import "@material/snackbar/mdc-snackbar";
 @import "~animate.css";
+
 @font-face {
-  font-family: Lalezar;
+  font-family: 'Lalezar';
   font-style: normal;
   font-weight: 500;
-  src: url('../../fonts/woff2/Lalezar.woff2') format('woff2'); /* FF39+,Chrome36+, Opera24+*/
-}
-.mdc-snackbar__text{
-  font-family: IRANSans;
+  src: url('../../fonts/woff2/Lalezar.woff2') format('woff2');
 }
-.mdc-snackbar__action-button{
-  font-family: IRANSans;
+
+.mdc-snackbar__text,
+.mdc-snackbar__action-button {
+  font-family: 'IRANSans';
 }
+
 .bizhero {
-  font-family: IRANSans;
-  .light-line{
+  font-family: 'IRANSans';
+
+  .light-line {
     border-color: #2d4881 !important;
     max-width: 50px;
-    margin-bottom: 1.5rem;
+    margin: -1.5rem auto 1.5rem;
     border-width: 2px;
-    margin-top: -1.5rem;
   }
-  #two{
+
+  #two {
     background-color: #ffee00;
-    padding-bottom: 8rem ;
     padding: 3rem;
-    margin-right: -8px;
-    margin-left: -8px;
-  .title-content{
-    font-family: Lalezar !important;
-    color: #2c4982;
-    font-size: 32px;
-    border-radius: 10px;
-    text-align: center;
-  }
-    .title-describee{
-      font-family: IRANSans;
+    padding-bottom: 8rem;
+    margin: 0 -8px;
+
+    .title-content {
+      font-family: 'Lalezar' !important;
       color: #2c4982;
-      line-height: 2.5em;
+      font-size: 32px;
+      border-radius: 10px;
+      text-align: center;
+    }
+
+    .title-describee {
+      font-family: 'IRANSans';
+      color: #2c4982;
+      line-height: 2.5;
       font-size: 18px;
       margin: auto;
       padding-bottom: 2rem;
     }
   }
+
   #one {
     .logo-bizhero {
       background: url("../../images/back.jpg") no-repeat center;
       background-size: cover;
-      height: 101Vh;
+      height: 101vh;
       margin-top: -10px;
 
-      .row-two{
+      .row-two {
         margin: auto;
       }
-      .title-champion{
-        font-family: Lalezar !important;
+
+      .title-champion {
+        font-family: 'Lalezar' !important;
         color: #fff;
-        margin: auto;
         font-size: 4em;
-        margin-top: 2.5em;
+        margin: 2.5em auto 0;
       }
-      .content-champion{
+
+      .content-champion {
         font-size: 1.5rem;
-        font-family: iransans;
+        font-family: 'IRANSans';
       }
+
       .logo-img {
         background: url("../../images/ZarinPal-Logo.svg") no-repeat center;
+        background-size: contain;
         width: 150px;
         height: 50px;
-        background-size: contain;
-        right: 16px;
         position: absolute;
+        right: 16px;
         padding-bottom: 60px;
       }
-      .btn-go-bottom{
+
+      .btn-go-bottom {
         margin-top: auto;
-        .icon-arrow-down{
+
+        .icon-arrow-down {
           display: inline-block;
           font-size: 33px;
-          background-color: #FFFFFF;
-          -webkit-box-shadow: 0 -2px 9px 0 rgba(0, 0, 0, 0.1);
-          box-shadow: 0 -2px 9px 0 rgba(0, 0, 0, 0.1);
+          background: #fff;
+          box-shadow: 0 -2px 9px rgba(0, 0, 0, 0.1);
           border-radius: 100px;
           color: #21254E;
           position: relative;
@@ -91,244 +98,181 @@
         }
       }
     }
+
     .social-networks {
-      margin-top: auto;
-      margin-bottom: auto;
+      margin: auto 0;
       float: left;
+
       .icon-link {
         border: 1px solid #fff;
         border-radius: 50%;
         margin: 10px;
         display: block;
+
         &:hover {
           background-color: #ffee00;
-          border: 1px solid #ffee00;
-
+          border-color: #ffee00;
         }
       }
-      .twitter-bg {
-        padding: 16px 8px 0px 11px;
-      }
-      .instagram-bg {
-        padding: 16px 8px 0px 13px;
-      }
-      .telegram-bg {
-        padding: 16px 8px 0px 11px;
-      }
+
+      .twitter-bg { padding: 16px 8px 0 11px; }
+      .instagram-bg { padding: 16px 8px 0 13px; }
+      .telegram-bg { padding: 16px 8px 0 11px; }
+
       .icon {
         display: inline-block;
-        &:hover {
-          opacity: 0.7;
-        }
+        &:hover { opacity: 0.7; }
       }
-      .telegram {
-        background-repeat: no-repeat;
+
+      .telegram, .instagram, .twitter {
         background-color: #fff;
-        -webkit-mask: url("../../images/social/telegram.svg") no-repeat 50% 50%;
-        mask: url("../../images/social/telegram.svg") no-repeat 50% 50%;
-        width: 24px;
-        height: 21px;
-        background-size: 100% 100%;
-        position: relative;
-        top: -1px;
-        bottom: 0px;
-        right: 3px;
-        left: 0px;
-        &:hover {
-          background-color: #2B4A83;
-        }
-      }
-      .instagram {
         background-repeat: no-repeat;
-        background-color: #fff;
-        -webkit-mask: url("../../images/social/instagram.svg") no-repeat 50% 50%;
-        mask: url("../../images/social/instagram.svg") no-repeat 50% 50%;
-        width: 22px;
-        height: 22px;
         background-size: 100% 100%;
+        width: 24px;
+        height: 22px;
         position: relative;
         top: -1px;
-        bottom: 0px;
-        right: 2px;
-        left: 7px;
-        &:hover {
-          background-color: #2B4A83;
-        }
 
+        &:hover { background-color: #2B4A83; }
       }
-      .twitter {
-        background-repeat: no-repeat;
-        background-color: #fff;
-        -webkit-mask: url("../../images/social/twitter.svg") no-repeat 50% 50%;
-        mask: url("../../images/social/twitter.svg") no-repeat 50% 50%;
-        width: 25px;
-        height: 20px;
-        background-size: 100% 100%;
-        position: relative;
-        top: -1px;
-        bottom: 0px;
-        right: 1px;
-        left: 7px;
-        &:hover {
-          background-color: #2B4A83;
-        }
+
+      .telegram {
+        -webkit-mask: url("../../images/social/telegram.svg") no-repeat center;
+        mask: url("../../images/social/telegram.svg") no-repeat center;
+      }
+
+      .instagram {
+        -webkit-mask: url("../../images/social/instagram.svg") no-repeat center;
+        mask: url("../../images/social/instagram.svg") no-repeat center;
       }
-      .l {
-        background-color: red;
+
+      .twitter {
+        -webkit-mask: url("../../images/social/twitter.svg") no-repeat center;
+        mask: url("../../images/social/twitter.svg") no-repeat center;
       }
+
+      .l { background-color: red; }
     }
   }
-  #tree{
-    height: auto;
+
+  #tree {
     margin-top: 40px;
 
-    .cta{
+    .cta {
       background-color: #2c4982;
-      margin-top:72px;
-
+      margin-top: 72px;
     }
-    .register{
+
+    .register {
       padding: 0.5rem 2rem;
       border-radius: 300px;
     }
-    .cta-title{
-      font-size: 20px;
-      font-family: Lalezar !important;
-      color: #fff;
+
+    .cta-title, .title-content {
+      font-family: 'Lalezar' !important;
       font-size: 2.5em;
       border-radius: 10px;
       text-align: center;
-    }
-    .btn-register{
-      padding-bottom: 50px;
-    }
-    .title-content{
-      font-family: Lalezar !important;
-      font-size: 32px;
-      margin-right: 22px;
-      border-radius: 10px;
-      text-align: center;
       color: #2c4982;
     }
-    .title-describee{
+
+    .btn-register { padding-bottom: 50px; }
+
+    .title-describee {
       color: #757575;
-      line-height: 2.5em;
+      line-height: 2.5;
       font-size: 15px;
     }
-    .form-info{
+
+    .form-info {
       margin-right: 5px;
-      input{
-        &:focus{
-          -webkit-box-shadow: unset;
-          box-shadow: unset;
-        }
-      }
-      .input-outline{
-        width: 50%;
-      }
-      .input-text-area{
-        width: 100%;
-      }
-      .mdc-floating-label{
-        font-family: IRANSans;
-      }
-      .input-text-area{
-        margin-right: 2px;
-      }
-      .submit{
-        margin-top: 10px;
+
+      input:focus {
+        box-shadow: unset;
+        -webkit-box-shadow: unset;
       }
+
+      .input-outline { width: 50%; }
+      .input-text-area { width: 100%; margin-right: 2px; }
+      .mdc-floating-label { font-family: 'IRANSans'; }
+      .submit { margin-top: 10px; }
     }
   }
-  #for{
-    margin-top: 66px;
-    margin-bottom: 70px;
-    .info-footer{
+
+  #for {
+    margin: 66px 0 70px;
+
+    .info-footer {
       width: 58%;
       margin: auto;
     }
-    .mobile-pic{
-      background: url("../../images/telephone.png") no-repeat center;
-      background-size: cover;
-      height: 60px;
-      width: 60px;
-      margin: auto;
-    }
-    .mobile-txt{
-      margin-top: 20px;
-      font-size: 18px;
-      font-family: iransansmedium;
-    }
-    .email-pic{
-      background: url("../../images/email.png") no-repeat center;
+
+    .mobile-pic, .email-pic {
       background-size: cover;
       height: 60px;
       width: 60px;
       margin: auto;
     }
-    .email-txt{
+
+    .mobile-pic { background: url("../../images/telephone.png") no-repeat center; }
+    .email-pic { background: url("../../images/email.png") no-repeat center; }
+
+    .mobile-txt, .email-txt {
       margin-top: 20px;
       font-size: 18px;
-      font-family: iransansmedium;
+      font-family: 'iransansmedium';
     }
-    .email-link{
+
+    .email-link {
       text-align: center;
       margin-top: 12px;
     }
-    .title-content-footer{
-      font-family: Lalezar !important;
+
+    .title-content-footer {
+      font-family: 'Lalezar' !important;
       font-size: 32px;
       margin-right: 22px;
       border-radius: 10px;
       text-align: center;
       color: #2c4982;
     }
-    .title-describee-footer{
+
+    .title-describee-footer {
       color: #757575;
-      line-height: 2.5em;
+      line-height: 2.5;
       font-size: 18px;
     }
   }
 }
 
 .text-field-custom-colors:not(.mdc-text-field--invalid) {
-
-  @include mdc-text-field-focused-outline-color( #fde051);
+  @include mdc-text-field-focused-outline-color(#fde051);
   @include mdc-text-field-textarea-stroke-color(#c3c6cd);
 
   &.mdc-text-field--focused {
-    @include mdc-text-field-label-color( #000);
+    @include mdc-text-field-label-color(#000);
     @include mdc-text-field-textarea-stroke-color(#fde051);
-
   }
 }
 
-
 @media (max-width: 1042px) {
   #one {
     .logo-bizhero {
-      height: 136Vh !important;
-      .content-champion{
-        height: 2em;
-      }
+      height: 136vh !important;
+
+      .content-champion { height: 2em; }
+
       .social-networks {
         float: none;
         text-align: center !important;
-        .icon-link {
-          display: unset;
-        }
+
+        .icon-link { display: unset; }
       }
     }
   }
-  #for{
-    .info-footer{
-      .l{
-        margin-top: 35px;
-      }
-    }
+
+  #for .info-footer .l {
+    margin-top: 35px;
   }
 }
-
-
-
-
+ 
diff --git a/src/scss/pages/_aboutus.scss b/src/scss/pages/_aboutus.scss
index 214daf40..e3f611f0 100755
--- a/src/scss/pages/_aboutus.scss
+++ b/src/scss/pages/_aboutus.scss
@@ -33,7 +33,7 @@
       border-bottom: none !important;
     }
   }
-  
+
   .section-tree {
     max-width: 85%;
     margin: auto;
@@ -41,28 +41,25 @@
     .personal {
       margin-top: 35px;
 
-      .avatar-img {
-        .avatar {
-          background: #fff;
-          width: 100px;
-          height: 100px;
-          border-radius: 50%;
-          box-shadow: 0 4px 12px 0 rgba(48, 56, 71, 0.15);
-        }
+      .avatar-img .avatar {
+        background: #fff;
+        width: 100px;
+        height: 100px;
+        border-radius: 50%;
+        box-shadow: 0 4px 12px rgba(48, 56, 71, 0.15);
       }
 
       .name {
         font-family: IRANSansBold;
-        margin: 12px auto 18px auto;
-        padding: 0 8px 0 8px;
+        margin: 12px auto 18px;
+        padding: 0 8px;
         text-align: center;
         width: max-content;
-        height: auto;
         font-size: 16px;
         color: #303030;
         line-height: 40px;
-        background: #FFFFFF;
-        box-shadow: 0 2px 6px 0 rgba(48, 56, 71, 0.15);
+        background: #fff;
+        box-shadow: 0 2px 6px rgba(48, 56, 71, 0.15);
         border-radius: 100px;
       }
 
@@ -73,147 +70,116 @@
   }
 }
 
-/* Media----------------------------- */
-@media(max-width: 326px) {
-  .section-one {
-    .links {
-      .btn-gold {
-        margin: 1em auto;
-      }
-
-      .btn-normal {
-        margin: 1em auto;
-      }
-    }
+/* Media Queries */
+@media (max-width: 326px) {
+  .section-one .links .btn-gold,
+  .section-one .links .btn-normal {
+    margin: 1em auto;
   }
+
   .section-tree {
-    .vl-left-xs {
+    .vl-left-xs,
+    .vl-right-xs {
       height: 35px;
       position: absolute;
       background: #bfc6d3;
       width: 1px;
+    }
+
+    .vl-left-xs {
       margin-left: 80px;
       margin-right: 3em;
     }
 
     .vl-right-xs {
-      height: 35px;
-      position: absolute;
-      background: #bfc6d3;
-      width: 1px;
       margin-right: 3em;
     }
 
-    .personal {
-      .background-linetabletsm {
-        &:before {
-          margin: 45px auto;
-          content: '';
-          position: absolute;
-          width: 150px;
-          height: 1px;
-          background: #BFC6D2;
-          z-index: -1;
-        }
-      }
+    .personal .background-linetabletsm:before {
+      margin: 45px auto;
+      content: '';
+      position: absolute;
+      width: 150px;
+      height: 1px;
+      background: #bfc6d2;
+      z-index: -1;
     }
   }
 }
 
-/* extra small */
-@media(min-width: 326px) and (max-width: 575px) {
-  .section-one {
-    .links {
-      .btn-gold {
-        margin: 1em auto;
-      }
+@media (min-width: 326px) and (max-width: 575px) {
+  .section-one .links .btn-gold {
+    margin: 1em auto;
+  }
 
-      .btn-normal {
-        margin: 1em;
-      }
-    }
+  .section-one .links .btn-normal {
+    margin: 1em;
   }
+
   .section-tree {
-    .vl-left-xs {
+    .vl-left-xs,
+    .vl-right-xs {
       height: 35px;
       position: absolute;
       background: #bfc6d3;
       width: 1px;
+    }
+
+    .vl-left-xs {
       margin-left: 80px;
       margin-right: 5em;
     }
 
     .vl-right-xs {
-      height: 35px;
-      position: absolute;
-      background: #bfc6d3;
-      width: 1px;
       margin-right: 5em;
     }
 
-    .personal {
-      .background-linetabletsm {
-        &:before {
-          margin: 45px auto;
-          content: '';
-          position: absolute;
-          width: 230px;
-          height: 1px;
-          background: #BFC6D2;
-          z-index: -1;
-        }
-      }
+    .personal .background-linetabletsm:before {
+      margin: 45px auto;
+      content: '';
+      position: absolute;
+      width: 230px;
+      height: 1px;
+      background: #bfc6d2;
+      z-index: -1;
     }
   }
 }
 
-/*  media (desktops, 576px and 767px) */
 @media (min-width: 576px) and (max-width: 767px) {
   .section-tree {
-    .vl-left-xs {
+    .vl-left-xs,
+    .vl-right-xs {
       height: 35px;
       position: absolute;
       background: #bfc6d3;
       width: 1px;
+    }
+
+    .vl-left-xs {
       margin-left: 80px;
       margin-right: 8em;
     }
 
     .vl-right-xs {
-      height: 35px;
-      position: absolute;
-      background: #bfc6d3;
-      width: 1px;
       margin-right: 8em;
     }
 
-    .personal {
-      .background-linetabletsm {
-        &:before {
-          margin: 45px auto;
-          content: '';
-          position: absolute;
-          width: 310px;
-          height: 1px;
-          background: #BFC6D2;
-          z-index: -1;
-        }
-      }
+    .personal .background-linetabletsm:before {
+      margin: 45px auto;
+      content: '';
+      position: absolute;
+      width: 310px;
+      height: 1px;
+      background: #bfc6d2;
+      z-index: -1;
     }
   }
 }
 
-/* Medium devices (tablets, 768px and up) */
 @media (min-width: 768px) and (max-width: 991px) {
   .section-tree {
-    .vl-left-sm {
-      height: 35px;
-      position: absolute;
-      background: #bfc6d3;
-      width: 1px;
-      margin-right: 6em;
-    }
-
+    .vl-left-sm,
     .vl-right-sm {
       height: 35px;
       position: absolute;
@@ -222,162 +188,49 @@
       margin-right: 6em;
     }
 
-    .personal {
-      .background-linetablet {
-        &:before {
-          margin: 45px auto;
-          content: '';
-          position: absolute;
-          width: 290px;
-          height: 1px;
-          background: #BFC6D2;
-          z-index: -1;
-        }
-      }
-    }
-  }
-}
-
-/* Large devices (desktops, 992px and up) */
-@media (min-width: 992px) and (max-width: 1199px) {
-  .section-tree {
-    .vl-left-lg {
-      height: 35px;
-      position: absolute;
-      background: #bfc6d3;
-      width: 1px;
-      margin-left: 80px;
-      margin-right: 8%;
-    }
-
-    .vl-right-lg {
-      height: 35px;
+    .personal .background-linetablet:before {
+      margin: 45px auto;
+      content: '';
       position: absolute;
-      background: #bfc6d3;
-      width: 1px;
-      margin-right: 8%;
-    }
-
-    .personal {
-      .background-line {
-        &:before {
-          margin: 45px auto;
-          content: '';
-          position: absolute;
-          width: 300px;
-          height: 1px;
-          background: #BFC6D2;
-          z-index: -1;
-        }
-      }
+      width: 290px;
+      height: 1px;
+      background: #bfc6d2;
+      z-index: -1;
     }
   }
 }
 
-/* Extra large devices (large desktops, 1200px and up) */
-@media (min-width: 1200px) and (max-width: 1600px) {
+@media (min-width: 992px) and (max-width: 1199px),
+       (min-width: 1200px) and (max-width: 1600px),
+       (min-width: 1600px) and (max-width: 1900px),
+       (min-width: 1900px) {
   .section-tree {
-    .vl-left-lg {
-      height: 35px;
-      position: absolute;
-      background: #bfc6d3;
-      width: 1px;
-      margin-left: 80px;
-      margin-right: 7em;
-    }
-
+    .vl-left-lg,
     .vl-right-lg {
       height: 35px;
       position: absolute;
       background: #bfc6d3;
       width: 1px;
-      margin-right: 7em;
-    }
-
-    .personal {
-      .background-line {
-        &:before {
-          margin: 45px auto;
-          content: '';
-          position: absolute;
-          width: 350px;
-          height: 1px;
-          background: #BFC6D2;
-          z-index: -1;
-        }
-      }
     }
-  }
-}
 
-/* media for border in top-position img(large desktops, 1600px and 1900px)*/
-@media (min-width: 1600px) and (max-width: 1900px) {
-  .section-tree {
     .vl-left-lg {
-      height: 35px;
-      position: absolute;
-      background: #bfc6d3;
-      width: 1px;
       margin-left: 80px;
       margin-right: 7em;
     }
 
     .vl-right-lg {
-      height: 35px;
-      position: absolute;
-      background: #bfc6d3;
-      width: 1px;
-      margin-right: 7em;
-    }
-
-    .personal {
-      .background-line {
-        &:before {
-          margin: 45px auto;
-          content: '';
-          position: absolute;
-          width: 350px;
-          height: 1px;
-          background: #BFC6D2;
-          z-index: -1;
-        }
-      }
-    }
-  }
-}
-
-/* media for border in top-position img(large desktops, 1900px and up)*/
-@media (min-width: 1900px) {
-  .section-tree {
-    .vl-left-lg {
-      height: 35px;
-      position: absolute;
-      background: #bfc6d3;
-      width: 1px;
-      margin-left: 80px;
       margin-right: 7em;
     }
 
-    .vl-right-lg {
-      height: 35px;
+    .personal .background-line:before {
+      margin: 45px auto;
+      content: '';
       position: absolute;
-      background: #bfc6d3;
-      width: 1px;
-      margin-right: 7em;
-    }
-
-    .personal {
-      .background-line {
-        &:before {
-          margin: 45px auto;
-          content: '';
-          position: absolute;
-          width: 350px;
-          height: 1px;
-          background: #BFC6D2;
-          z-index: -1;
-        }
-      }
+      width: 350px;
+      height: 1px;
+      background: #bfc6d2;
+      z-index: -1;
     }
   }
-}
\ No newline at end of file
+}
+ 
diff --git a/src/scss/pages/_applications.scss b/src/scss/pages/_applications.scss
index d42e878f..b3e4b30f 100755
--- a/src/scss/pages/_applications.scss
+++ b/src/scss/pages/_applications.scss
@@ -1,74 +1,97 @@
 .application-page {
-
   .application-title {
-    margin-top: 50px;
-    margin-bottom: -60px;
+    margin: 50px 0 -60px;
+    text-align: center;
+    font-size: 2rem;
+    font-weight: bold;
+  }
+
+  .zarinpal-application-image,
+  .zarinak-application-image {
+    display: block;
+    margin: 0 auto;
+    max-width: 100%;
+    height: auto;
   }
 
   .zarinpal-application-image {
-    margin: 80px auto 30px auto;
+    margin-top: 80px;
+    margin-bottom: 30px;
   }
 
   .zarinak-application-image {
-    margin: 73px auto 0 auto;
+    margin-top: 73px;
   }
 
   .buttons {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
     margin: 40px 0;
 
     .btn {
-      margin-left: 20px;
+      margin: 0;
     }
   }
 
   .properties {
     ul {
-      padding-right: 0;
+      list-style: none;
+      padding: 0;
 
       li {
+        position: relative;
+        padding-left: 25px;
+        margin-bottom: 10px;
+        font-size: 16px;
+
         &::before {
-          content: "•";
+          content: "\2022";
           color: #FAD749;
-          display: inline-block;
-          height: 20px;
           font-size: 30px;
-          position: relative;
-          top: 5px;
-          margin-left: 15px;
+          position: absolute;
+          left: 0;
+          top: 0;
+          line-height: 1;
         }
       }
     }
-
   }
-
 }
 
+/* Responsive Styles */
 
-
-// extra small
 @media (max-width: 575px) {
-
+  .buttons {
+    flex-direction: column;
+    align-items: center;
+  }
 }
 
-// Small devices (landscape phones, 576px and up)
-@media (min-width: 576px)  and (max-width: 767px){
-
+@media (min-width: 576px) and (max-width: 767px) {
+  .buttons {
+    justify-content: space-around;
+  }
 }
 
-// Medium devices (tablets, 768px and up)
-@media (min-width: 768px)  and (max-width: 991px){
-
+@media (min-width: 768px) and (max-width: 991px) {
+  .buttons {
+    justify-content: center;
+    gap: 15px;
+  }
 }
 
-// Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199px){
-
+@media (min-width: 992px) and (max-width: 1199px) {
+  .buttons {
+    gap: 25px;
+  }
 }
 
-// Extra large devices (large desktops, 1200px and up)
 @media (min-width: 1200px) {
   .zarinpal-application-image,
-  .zarinak-application-image{
+  .zarinak-application-image {
     width: 429px;
   }
-}
\ No newline at end of file
+}
+ 
diff --git a/src/scss/pages/_common.scss b/src/scss/pages/_common.scss
index f8ab3018..9f608a13 100755
--- a/src/scss/pages/_common.scss
+++ b/src/scss/pages/_common.scss
@@ -1,5 +1,5 @@
 body {
-  background-color: #ffffff;
+  background-color: #fff;
   letter-spacing: -0.5px;
 }
 
@@ -45,27 +45,31 @@ li {
 }
 
 .hidden {
-  display: none;
+  display: none !important;
+}
+
+table {
+  border-collapse: collapse;
 }
 
 .ta-center {
-  text-align: center;
+  text-align: center !important;
 }
 
 .ta-right {
-  text-align: right;
+  text-align: right !important;
 }
 
 .ta-left {
-  text-align: left;
+  text-align: left !important;
 }
 
 .ta-justify {
-  text-align: justify;
+  text-align: justify !important;
 }
 
 .pull-left {
-  float: left;
+  float: left !important;
 }
 
 .disp-block {
@@ -77,15 +81,15 @@ li {
 }
 
 .horizontal-line {
-  background-color: #DFE1E4;
-  height: 1px;
   width: 100%;
+  height: 1px;
+  background-color: #DFE1E4;
 }
 
 .vertical-line {
-  background-color: #DFE1E4;
   width: 1px;
   min-height: 100%;
+  background-color: #DFE1E4;
 }
 
 .disable {
@@ -99,12 +103,13 @@ li {
   margin-top: -10px;
 }
 
-.title{
+.title {
   font-size: $titleFontSize;
   font-family: IRANSansBold;
   color: $titleFontColor;
 }
-.footer-title{
+
+.footer-title {
   font-size: $footerTitleFontSize;
   font-family: IRANSansBold;
   color: $footerTitleFontColor;
@@ -128,8 +133,8 @@ li {
 .title-describe {
   margin-top: 10px;
   max-width: 500px;
-  border-bottom: 1px solid #DFE1E4;
   padding-bottom: 20px;
+  border-bottom: 1px solid #DFE1E4;
   line-height: 35px;
 }
 
@@ -137,17 +142,18 @@ li {
   display: inline-block;
   color: #28457B !important;
   font-family: IRANSansMedium;
+}
 
-  .icon-left {
-    width: 12px;
-    height: 12px;
-    background: url("../../images/icon/arrow-left.svg");
-    display: inline-block;
-    cursor: pointer;
-    margin-right: 10px;
-    position: relative;
-    top: 2px;
-  }
+.read-more .icon-left {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin-right: 10px;
+  background: url("../../images/icon/arrow-left.svg") no-repeat center;
+  background-size: contain;
+  position: relative;
+  top: 2px;
+  cursor: pointer;
 }
 
 .left-border {
@@ -174,7 +180,7 @@ li {
   color: #2ECC71;
 }
 
-svg *{
+svg * {
   text-anchor: end;
   letter-spacing: 0 !important;
 }
@@ -184,7 +190,8 @@ svg *{
   .header-title,
   .title-describe,
   .read-more,
-  .new-zarinpal-description{
+  .new-zarinpal-description {
     padding: 0 10px !important;
   }
-}
\ No newline at end of file
+}
+ 
diff --git a/src/scss/pages/_contact.scss b/src/scss/pages/_contact.scss
index 822f8ae6..42dc2eda 100755
--- a/src/scss/pages/_contact.scss
+++ b/src/scss/pages/_contact.scss
@@ -11,14 +11,14 @@
     padding-left: 25px;
 
     span.icon {
-      color: #ffffff;
-      background-image: linear-gradient(135deg, #2c3379 0%, #2b4a83 100%);
+      color: #fff;
+      background: linear-gradient(135deg, #2c3379 0%, #2b4a83 100%);
       border-radius: 50%;
       width: 39px;
       height: 39px;
-      display: inline-block;
-      text-align: center;
-      line-height: 1.5;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
       margin-left: 15px;
     }
   }
@@ -28,7 +28,7 @@
     height: 360px;
     margin-bottom: 70px;
     border-radius: 10px;
-    box-shadow: 0 3px 5px #ccc;
+    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1);
   }
 
   .contact-container {
@@ -55,6 +55,6 @@
         float: left;
       }
     }
-
   }
-}
\ No newline at end of file
+}
+ 
diff --git a/src/scss/pages/_faq.scss b/src/scss/pages/_faq.scss
index 665c9f1d..7fb35cda 100755
--- a/src/scss/pages/_faq.scss
+++ b/src/scss/pages/_faq.scss
@@ -1,34 +1,48 @@
 .faq-page {
   margin-top: 180px;
+  padding: 0 15px;
+}
 
-  .faq {
-    padding-right: 0;
-    .faq-item {
-      background: #fff;
-      padding: 15px;
-      border-radius: 10px;
-      box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.03);
-      color: #424242;
-      margin-bottom: 20px;
-      .icon {
-        font-size: 29px;
-        vertical-align: middle;
-        margin-left: 5px;
-        float: right;
-        cursor: pointer;
-      }
+.faq-page .faq {
+  padding-right: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
 
-      .line {
-        height: 1px;
-        width: 100%;
-        background-color: #DFE1E4;
-        margin: 10px 0;
-      }
+.faq-page .faq .faq-item {
+  background-color: #ffffff;
+  padding: 20px;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+  color: #333333;
+  transition: box-shadow 0.3s ease;
+}
 
-      .answer {
-        display: none;
-        padding: 10px;
-      }
-    }
-  }
-}
\ No newline at end of file
+.faq-page .faq .faq-item:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+}
+
+.faq-page .faq .faq-item .icon {
+  font-size: 28px;
+  vertical-align: middle;
+  margin-left: 10px;
+  float: right;
+  cursor: pointer;
+  color: #2c3379;
+}
+
+.faq-page .faq .faq-item .line {
+  height: 1px;
+  width: 100%;
+  background-color: #e0e0e0;
+  margin: 15px 0;
+}
+
+.faq-page .faq .faq-item .answer {
+  display: none;
+  padding: 10px 0;
+  color: #555555;
+  line-height: 1.6;
+}
+ 
diff --git a/src/scss/pages/_fonts.scss b/src/scss/pages/_fonts.scss
index eef7445b..33383dae 100755
--- a/src/scss/pages/_fonts.scss
+++ b/src/scss/pages/_fonts.scss
@@ -1,132 +1,113 @@
 @font-face {
-  font-family: IRANSansMedium;
+  font-family: 'IRANSansMedium';
   font-style: normal;
   font-weight: 500;
   src: url('../fonts/eot/IRANSansWeb_Medium.eot');
-  src: url('../fonts/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
-  url('../fonts/woff2/IRANSansWeb_Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
-  url('../fonts/woff/IRANSansWeb_Medium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-  url('../fonts/ttf/IRANSansWeb_Medium.ttf') format('truetype');
+  src: url('../fonts/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'),
+       url('../fonts/woff2/IRANSansWeb_Medium.woff2') format('woff2'),
+       url('../fonts/woff/IRANSansWeb_Medium.woff') format('woff'),
+       url('../fonts/ttf/IRANSansWeb_Medium.ttf') format('truetype');
 }
 
 @font-face {
-  font-family: IRANSansLight;
+  font-family: 'IRANSansLight';
   font-style: normal;
   font-weight: 300;
   src: url('../fonts/eot/IRANSansWeb_Light.eot');
-  src: url('../fonts/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
-  url('../fonts/woff2/IRANSansWeb_Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
-  url('../fonts/woff/IRANSansWeb_Light.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-  url('../fonts/ttf/IRANSansWeb_Light.ttf') format('truetype');
+  src: url('../fonts/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'),
+       url('../fonts/woff2/IRANSansWeb_Light.woff2') format('woff2'),
+       url('../fonts/woff/IRANSansWeb_Light.woff') format('woff'),
+       url('../fonts/ttf/IRANSansWeb_Light.ttf') format('truetype');
 }
 
 @font-face {
-  font-family: IRANSans;
+  font-family: 'IRANSans';
   font-style: normal;
-  font-weight: normal;
+  font-weight: 400;
   src: url('../fonts/eot/IRANSansWeb.eot');
-  src: url('../fonts/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
-  url('../fonts/woff2/IRANSansWeb.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
-  url('../fonts/woff/IRANSansWeb.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
-  url('../fonts/ttf/IRANSansWeb.ttf') format('truetype');
+  src: url('../fonts/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'),
+       url('../fonts/woff2/IRANSansWeb.woff2') format('woff2'),
+       url('../fonts/woff/IRANSansWeb.woff') format('woff'),
+       url('../fonts/ttf/IRANSansWeb.ttf') format('truetype');
 }
 
 @font-face {
-  font-family: IRANSansLightPersian;
+  font-family: 'IRANSansLightPersian';
   font-style: normal;
   font-weight: 300;
   src: url('../fonts/ttf/sansLight.ttf') format('truetype');
 }
 
 @font-face {
-  font-family: IRANSansBold;
+  font-family: 'IRANSansBold';
   font-style: normal;
-  font-weight: 300;
-  src: url('../fonts/woff/IRANSansWeb_Bold.woff') format('truetype');
+  font-weight: 700;
+  src: url('../fonts/woff/IRANSansWeb_Bold.woff') format('woff');
 }
 
 @font-face {
   font-family: 'ZarinPal';
   src: url('../fonts/ZarinPal.eot');
-  src: url('../fonts/ZarinPal.eot') format('embedded-opentype'),
-  url('../fonts/ZarinPal.ttf') format('truetype'),
-  url('../fonts/ZarinPal.woff') format('woff'),
-  url('../fonts/ZarinPal.svg') format('svg');
+  src: url('../fonts/ZarinPal.eot?#iefix') format('embedded-opentype'),
+       url('../fonts/ZarinPal.woff') format('woff'),
+       url('../fonts/ZarinPal.ttf') format('truetype'),
+       url('../fonts/ZarinPal.svg') format('svg');
   font-weight: normal;
   font-style: normal;
 }
 
-i[class^="icon-"], i[class*=" icon-"],
-span[class^="icon-"], span[class*=" icon-"] {
-  /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'zarinpal' !important;
+i[class^="icon-"],
+i[class*=" icon-"],
+span[class^="icon-"],
+span[class*=" icon-"] {
+  font-family: 'ZarinPal' !important;
   speak: none;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
   line-height: 1;
-  /* Better Font Rendering =========== */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-arrow-down {
+.icon-arrow-down::before {
+  content: $icon-zp-arrow-up;
   transform: rotate(180deg);
-
-  &:before {
-    content: $icon-zp-arrow-up;
-  }
 }
 
-.icon-arrow-left {
-  &:before {
-    content: $icon-zp-arrow-left;
-    display: inline-block;
-    position: relative;
-    top: 5px;
-    font-size: 20px;
-  }
+.icon-arrow-left::before {
+  content: $icon-zp-arrow-left;
+  display: inline-block;
+  position: relative;
+  top: 5px;
+  font-size: 20px;
 }
 
-.icon-menu {
-  &:before {
-    content: $icon-zp-menu;
-  }
+.icon-menu::before {
+  content: $icon-zp-menu;
 }
 
-.icon-close {
-  &:before {
-    content: $icon-zp-close;
-  }
+.icon-close::before {
+  content: $icon-zp-close;
 }
 
-.icon-person {
-  &:before {
-    content: $icon-zp-add-person;
-  }
+.icon-person::before {
+  content: $icon-zp-add-person;
 }
 
-.icon-comment {
-  &:before {
-    content: $icon-zp-cloud;
-  }
+.icon-comment::before {
+  content: $icon-zp-cloud;
 }
 
-.icon-plus {
-  &:before {
-    content: $icon-zp-add;
-  }
+.icon-plus::before {
+  content: $icon-zp-add;
 }
 
-.icon-dash {
-  &:before {
-    content: $icon-zp-remove;
-  }
+.icon-dash::before {
+  content: $icon-zp-remove;
 }
 
-.icon-check {
-  &:before {
-    content: $icon-zp-check-circle;
-  }
-}
\ No newline at end of file
+.icon-check::before {
+  content: $icon-zp-check-circle;
+}
diff --git a/src/scss/pages/_iban.scss b/src/scss/pages/_iban.scss
index ad49a32c..fb194293 100755
--- a/src/scss/pages/_iban.scss
+++ b/src/scss/pages/_iban.scss
@@ -1,61 +1,67 @@
 .iban-page {
-  margin-bottom: -90px;
-  margin-top: 100px;
-  .iban-icon {
-    padding: 8%;
-  }
-  .iban-logo {
-    width: 80px;
-    display: block;
-    margin: 0 auto;
-  }
-  .iban-text {
-    font-size: 14px;
-  }
-  .iban-paragraph {
-    line-height: 35px;
-    font-size: 16px;
-    margin: 0 140px;
-  }
-  .iban-title {
-    font-family: IRANSansBold;
-    font-size: 20px;
-    margin: 25px 140px 15px 140px ;
-  }
+  margin: 100px 0 -90px;
+  padding: 0 20px;
 }
-@media  (min-width: 992px) and (max-width: 1200px) {
-  .iban-paragraph {
-    margin: 0 105px!important;
-  }
-  .iban-title {
-    margin: 25px 105px 15px 140px !important;
+
+.iban-page .iban-icon {
+  padding: 8%;
+  text-align: center;
+}
+
+.iban-page .iban-logo {
+  width: 80px;
+  display: block;
+  margin: 0 auto;
+}
+
+.iban-page .iban-text {
+  font-size: 14px;
+  text-align: center;
+}
+
+.iban-page .iban-paragraph {
+  line-height: 1.9;
+  font-size: 16px;
+  margin: 0 auto;
+  max-width: 800px;
+}
+
+.iban-page .iban-title {
+  font-family: IRANSansBold;
+  font-size: 20px;
+  margin: 25px auto 15px;
+  max-width: 800px;
+  text-align: center;
+}
+
+@media (min-width: 992px) and (max-width: 1200px) {
+  .iban-page .iban-paragraph,
+  .iban-page .iban-title {
+    max-width: 700px;
   }
 }
+
 @media (min-width: 768px) and (max-width: 991px) {
-  .iban-paragraph {
-    margin: 0 100px 15px 100px!important;
-  }
-  .iban-title {
-    margin: 25px 100px 15px 140px !important;
+  .iban-page .iban-paragraph,
+  .iban-page .iban-title {
+    max-width: 650px;
   }
 }
+
 @media (min-width: 700px) and (max-width: 767px) {
-  .iban-paragraph {
-    margin: 0 117px 15px 117px!important;
-  }
-  .iban-title {
-    margin: 25px 115px 15px 140px !important;
-    font-size: 18px!important;
+  .iban-page .iban-paragraph,
+  .iban-page .iban-title {
+    max-width: 580px;
+    font-size: 18px !important;
   }
 }
+
 @media (min-width: 320px) and (max-width: 699px) {
-  .iban-paragraph {
-    margin: 0 45px 40px 45px!important;
-    text-align: justify!important;
-  }
-  .iban-title {
-    margin: 25px 45px 40px 45px !important;
-    font-size: 18px!important;
-    text-align: justify!important;
+  .iban-page .iban-paragraph,
+  .iban-page .iban-title {
+    margin: 0 20px;
+    font-size: 18px !important;
+    text-align: justify !important;
   }
 }
+ 
diff --git a/src/scss/pages/_index.scss b/src/scss/pages/_index.scss
index eb12c575..23a48c0e 100755
--- a/src/scss/pages/_index.scss
+++ b/src/scss/pages/_index.scss
@@ -1,213 +1,186 @@
-//New version
-.blue-header {
-  .section-new-version {
-    .right-box {
-      margin-top: 60px;
-      z-index: 1;
-
-      .gradient-background {
-        margin-right: 30px;
-        .tag {
-          display: inline-block;
-          font-size: 13px;
-          padding: 4px 10px;
-          margin-bottom: 20px;
-          background: rgba(0, 0, 0, 0.12);
-          height: 20px;
-          border-radius: 100px;
-
-          .tag-label-background {
-            background-color: #ffffff;
-            color: #424242;
-            padding: 0 7px;
-            height: 18px;
-            display: inline-block;
-            border-radius: 14px;
-            margin-left: 5px;
-            margin-right: -5px;
-            margin-top: 1px;
-          }
-
-          .label {
-            position: relative;
-            top: -3px;
-          }
-
-          .label-text {
-            top: -2px;
-            position: relative;
-            margin-right: 5px;
-          }
-        }
-
-        .new-zarinpal-description {
-          max-width: 494px;
-          padding: 0 0 20px 0;
-        }
-
-        .links {
-          margin: 40px 0;
-
-          a {
-            margin:10px;
-          }
-        }
-      }
-    }
-
-    .request-money {
-      width: 499px;
-      height: 524px;
-      background-size: 100% !important;
-      background: url("../../images/index/request-money.png") no-repeat center;
-      margin: 0 auto 0 auto;
-      position: relative;
-      display: inherit;
-      top: 10px;
-      left: -120px;
-    }
-  }
+/* Refined Homepage Section Styles */
+
+.blue-header .section-new-version .right-box {
+  margin-top: 60px;
+  z-index: 1;
+}
+
+.blue-header .section-new-version .right-box .gradient-background {
+  margin-right: 30px;
+}
+
+.tag {
+  display: inline-block;
+  font-size: 13px;
+  padding: 4px 10px;
+  margin-bottom: 20px;
+  background: rgba(0, 0, 0, 0.12);
+  height: 20px;
+  border-radius: 100px;
+}
+
+.tag .tag-label-background {
+  background-color: #fff;
+  color: #424242;
+  padding: 0 7px;
+  height: 18px;
+  display: inline-block;
+  border-radius: 14px;
+  margin: 1px -5px 0 5px;
+}
+
+.tag .label,
+.tag .label-text {
+  position: relative;
+}
+
+.tag .label {
+  top: -3px;
+}
+
+.tag .label-text {
+  top: -2px;
+  margin-right: 5px;
+}
+
+.new-zarinpal-description {
+  max-width: 494px;
+  padding-bottom: 20px;
+}
+
+.links {
+  margin: 40px 0;
+}
+
+.links a {
+  margin: 10px;
+}
+
+.request-money {
+  width: 499px;
+  height: 524px;
+  background: url("../../images/index/request-money.png") no-repeat center / 100% !important;
+  margin: 0 auto;
+  position: relative;
+  display: block;
+  top: 10px;
+  left: -120px;
 }
 
-//Pg
 .section-pg {
   margin: 90px 0;
+}
 
-  .pg-background {
-    font-family: IRANSans !important;
-  }
+.pg-background {
+  font-family: IRANSans !important;
 }
 
-//Social payment
 .section-social-payment {
-  margin: 60px 0 70px 0;
-
-  .gray-bg {
-    &:before {
-      content: '';
-      z-index: -2;
-      height: 703px;
-      background: url("../../images/index/gray-bg.svg") top left no-repeat;
-      position: absolute;
-      left: 0;
-      top: 960px;
-    }
-  }
+  margin: 60px 0 70px;
+}
+
+.gray-bg:before {
+  content: '';
+  z-index: -2;
+  height: 703px;
+  background: url("../../images/index/gray-bg.svg") top left no-repeat;
+  position: absolute;
+  left: 0;
+  top: 960px;
 }
 
-//Read more
 .section-read-more {
-    margin: 60px 0;
-
-    .gold-bg {
-      &:before {
-        content: '';
-        z-index: -2;
-        height: 601px;
-        width: 144px;
-        background: url("../../images/index/gold-bg.svg") top left no-repeat;
-        position: absolute;
-        right: 0;
-      }
-    }
-
-    .options {
-      padding: 30px;
-
-      .icon {
-        &:before {
-          color: #29447A;
-        }
-      ;
-      }
-
-      .title {
-        position: relative;
-        top: 20px;
-      }
-
-      .image-icon {
-        width: 60px;
-        height: 60px;
-        display: inline-block;
-        margin: 0 20px -10px 10px;
-        position: relative;
-        top: 27px;
-        background-color: #EDF0F4 !important;
-        border-radius: 17px;
-      }
-
-      .image-verified-account {
-        background: url("../../images/icon/verified.svg") no-repeat;
-        background-position: 13px !important;
-      }
-
-      .image-split {
-        background: url("../../images/icon/split.svg") no-repeat;
-        background-position: 11px !important;
-      }
-
-      .image-support {
-        background: url("../../images/icon/support.svg") no-repeat;
-        background-position: 13px !important;
-      }
-
-      .image-security {
-        background: url("../../images/icon/security.svg") no-repeat;
-        background-position: 16px !important;
-      }
-
-      .description {
-        padding: 20px;
-      }
-    }
-
-    .read-more-standards {
-      padding: 30px;
-      .title-describe{
-        border-bottom: none !important;
-      }
-    }
-  }
+  margin: 60px 0;
+}
+
+.gold-bg:before {
+  content: '';
+  z-index: -2;
+  height: 601px;
+  width: 144px;
+  background: url("../../images/index/gold-bg.svg") top left no-repeat;
+  position: absolute;
+  right: 0;
+}
 
-/* Media
-   ----------------------------- */
+.options {
+  padding: 30px;
+}
+
+.options .icon:before {
+  color: #29447A;
+}
+
+.options .title {
+  position: relative;
+  top: 20px;
+}
+
+.image-icon {
+  width: 60px;
+  height: 60px;
+  display: inline-block;
+  margin: 0 20px -10px 10px;
+  position: relative;
+  top: 27px;
+  background-color: #EDF0F4 !important;
+  border-radius: 17px;
+}
+
+.image-verified-account {
+  background: url("../../images/icon/verified.svg") no-repeat 13px center !important;
+}
+
+.image-split {
+  background: url("../../images/icon/split.svg") no-repeat 11px center !important;
+}
+
+.image-support {
+  background: url("../../images/icon/support.svg") no-repeat 13px center !important;
+}
+
+.image-security {
+  background: url("../../images/icon/security.svg") no-repeat 16px center !important;
+}
+
+.options .description,
+.read-more-standards {
+  padding: 20px 30px;
+}
+
+.title-describe {
+  border-bottom: none !important;
+}
+
+/* Responsive Media Queries */
 
-/* extra small */
 @media (max-width: 575px) {
-  .center-content-xs{
+  .center-content-xs {
     text-align: center;
     margin: auto;
   }
-  .blue-header {
-    .right-box {
-      margin-top: 20px !important;
-
-      .gradient-background {
-        margin-right: 0!important;
-      }
-    }
-
-    .tag {
-      display: block !important;
-      margin: 0 auto !important;
-      width: 155px;
-    }
+
+  .blue-header .right-box {
+    margin-top: 20px !important;
+  }
+
+  .gradient-background {
+    margin-right: 0 !important;
   }
 
-  .btn-go-bottom-section {
-    .icon-arrow-down {
-      bottom: -52px !important;
-    }
+  .tag {
+    display: block !important;
+    margin: 0 auto !important;
+    width: 155px;
   }
 
-  .gray-bg {
-    &:before {
-      width: 100%;
-    }
+  .btn-go-bottom-section .icon-arrow-down {
+    bottom: -52px !important;
   }
 
+  .gray-bg:before,
   .left-border {
+    width: 100%;
     border-left: none !important;
   }
 
@@ -216,60 +189,37 @@
   }
 }
 
-@media (min-width: 576px)  and (max-width: 767px){
-  .pg-background {
-    margin-top: 100px !important;
-  }
-  .center-content-xs{
+@media (min-width: 576px) and (max-width: 767px),
+       (min-width: 768px) and (max-width: 991px) {
+  .center-content-xs {
     text-align: center;
     margin: auto;
-
   }
-}
-
-/* Medium devices (tablets, 768px and up) */
-@media (min-width: 768px) and (max-width: 991px) {
-  .center-content-xs{
-    text-align: center;
-    margin: auto;
 
-  }
   .pg-background {
     margin-top: 100px !important;
   }
 
-  .gray-bg {
-    &:before {
-      width: 100%;
-    }
+  .gray-bg:before {
+    width: 100%;
   }
 }
 
-/* Large devices (desktops, 992px and up) */
-@media (min-width: 992px) and (max-width: 1199px){
-  .blue-header {
-    .section-new-version {
-      .request-money {
-        left: -180px !important;
-        top: -5px;
-        width: 390px !important;
-      }
-    }
+@media (min-width: 992px) and (max-width: 1199px) {
+  .request-money {
+    left: -180px !important;
+    top: -5px;
+    width: 390px !important;
   }
 
-  .gray-bg {
-    &:before {
-      width: 100%;
-    }
+  .gray-bg:before {
+    width: 100%;
   }
 }
 
-/* Extra large devices (large desktops, 1200px and up) */
 @media (min-width: 1200px) {
-  .gray-bg {
-    &:before {
-      width: 985px;
-    }
+  .gray-bg:before {
+    width: 985px;
   }
 
   .pg-background {
@@ -279,4 +229,5 @@
   .social-payment-background {
     width: 557px;
   }
-}
\ No newline at end of file
+}
+ 
diff --git a/src/scss/pages/_merchants.scss b/src/scss/pages/_merchants.scss
index 9f26dc36..39d09a8f 100755
--- a/src/scss/pages/_merchants.scss
+++ b/src/scss/pages/_merchants.scss
@@ -1,226 +1,227 @@
 .merchant-page-image {
   width: 352px;
   height: 349px;
-  background: url("../../images/merchants.png") no-repeat;
+  background: url("../../images/merchants.png") no-repeat center;
   background-size: contain;
   margin: 0 auto;
 }
 
 .merchants {
-  margin: 0!important;
-
-  .loading{
-    position: fixed;
-    overflow: hidden;
-    //bottom: exponent(3, 1.618) * 1px;
-    left: 50%;
-    transform: translateX(-50%);
-    cursor: wait;
-    width: 6rem;
-    height: 6rem;
-    text-align: center;
-    background-color: rgba(white, .95);
-    // background-color: white;
-    box-shadow: 0 1px 12px rgba(black, 0.1),
-    0 2px 15px rgba(black, 0.1);
-    border-radius: 100%;
-    //@extend .center-of-center;
-    user-select: none;
-    z-index: 9;
-    .loadbar{
-      display: block;
-      margin: 1.25rem auto;
-      width: 3.5rem;
-      height: 3.5rem;
-      border: 1px solid;
-      // border-top-color: #29d;
-      // border-right-color: #29d;
-      // border-left-color: #FDC644;
-      border-radius: 100%;
-      animation: loader 0.64s linear infinite;
-      border-color: palette(blue, light);
-      border-left-color: palette(dark, base);
-    }
-  }
+  margin: 0 !important;
+}
 
-  .cat-figure {
-    margin: 10px;
-    border: 1px solid #eee;
-    padding: 10px;
-
-    &:hover{
-      border-color: darken(#FF85C2, 20);
-      background: #FFFFFF;
-      box-shadow: 0 20px 32px rgba(black, 0.1);
-      transform: translateY(-3px);
-    }
-
-    .head {
-      text-align: center;
-      border-bottom: 1px solid #E5E5E5;
-      margin-bottom: 20px;
-
-      .cat-name {
-        color: #737373;
-        margin: 10px 0;
-      }
-    }
-
-    ul {
-      font-size: .85em;
-      li {
-        list-style-type: disc;
-
-        a {
-          color: #757575 !important;
-          &:hover, &:active {
-            color: #333;
-          }
-        }
-      }
-    }
+.merchants .loading {
+  position: fixed;
+  overflow: hidden;
+  left: 50%;
+  transform: translateX(-50%);
+  cursor: wait;
+  width: 6rem;
+  height: 6rem;
+  text-align: center;
+  background-color: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.1), 0 2px 15px rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  user-select: none;
+  z-index: 9;
+}
 
-  }
+.merchants .loading .loadbar {
+  display: block;
+  margin: 1.25rem auto;
+  width: 3.5rem;
+  height: 3.5rem;
+  border: 1px solid #add8e6;
+  border-left-color: #333;
+  border-radius: 50%;
+  animation: loader 0.64s linear infinite;
+}
 
+.merchants .cat-figure {
+  margin: 10px;
+  border: 1px solid #eee;
+  padding: 10px;
+  transition: all 0.3s ease;
+}
 
-  //merchants
-  .merchants {
-    padding: 5.35rem / 2 0;
-    .merchant-cell {
-      .merch-figure {
-        padding: 1rem;
-        margin: 20px 20px;
-        height: 13em;
-        text-align: right;
-        background: hsla(0,0%,100%,.8);
-        border: 1px solid #ff85c2;
-        box-shadow: 0 4px 6px rgba(0,0,0,.1);
-        border-radius: 2px;
-        will-change: transform;
-        user-select: none;
-
-        &:hover{
-          border-color: darken(#FF85C2, 20);
-          background: #FFFFFF;
-          box-shadow: 0 20px 32px rgba(black, 0.1);
-          transform: translateY(-3px);
-        }
-      }
-    }
-    .merchant {
-      display: block;
-
-      .category {
-        text-align: right;
-        display: table;
-        width: 100%;
-        margin-bottom: 20px;
-        .svg--icon {
-          margin-right: 0;
-          margin-left: 10px;
-          width: 2rem;
-          height: 2rem;
-          float: right;
-        }
-        span {
-          overflow: hidden;
-          display: block;
-          font-size: 14px;
-          font-weight: 300;
-          color: #737373;
-          small {
-            display: block;
-            font-size: .75em;
-          }
-        }
-      }
-      p {
-        margin: 0 auto;
-        font-size: 0.85rem;
-      }
-      .decly {
-        margin-top: 1em;
-        font-size: 0.8rem;
-      }
-      .urly {
-        position: absolute;
-        left: 1rem;
-        bottom: 1rem;
-        font-size: .775em;
-        direction: ltr;
-        text-align: left;
-      }
-      .titly {
-        display: inline-block;
-        overflow: hidden;
-        font-size: 1rem;
-        font-weight: 300;
-        position: relative;
-        margin-bottom: 0;
-        top: -7px;
-      }
-      .picto {
-        float: right;
-        background: #FDCF41;
-        width: 2rem;
-        height: 2rem;
-        margin-left: 6px;
-        border-radius: 100%;
-      }
-      .dately {
-        margin-top: 6px;
-        color: #7D7D7D;
-      }
-    }
+.merchants .cat-figure:hover {
+  border-color: #cc0066;
+  background: #fff;
+  box-shadow: 0 20px 32px rgba(0, 0, 0, 0.1);
+  transform: translateY(-3px);
+}
 
-  }
+.merchants .cat-figure .head {
+  text-align: center;
+  border-bottom: 1px solid #e5e5e5;
+  margin-bottom: 20px;
+}
 
-  //pagination
-  .pagination {
-    margin: 70px auto 0 auto;
-
-    .page-link {
-      display: inline-block;
-      padding: 5px 5px 3px;
-      margin-left: 0.5em;
-      min-width: 2rem;
-      color: #888 !important;
-      text-align: center;
-      font-weight: 500;
-      background-color: #fff;
-      border: 1px solid #e5e5e5;
-      border-radius: 3px;
-      font-size: .9rem;
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.085);
-      transition: .255s all ease-in-out;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none;
-      white-space: nowrap;
-
-      &.current {
-        color: white !important;
-        background-color: #348CD8;
-        border-color: #3f92da;
-      }
-
-      &:hover {
-        color: white !important;
-        background-color: #348CD8;
-        border-color: #3f92da;
-      }
-
-      &:active {
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.085), 0px 2px 6px rgba(0, 0, 0, 0.125) inset;
-      }
-
-      &:last-child {
-        border-left: 1px solid #e5e5e5;
-        border-radius: 4px;
-      }
-    }
+.merchants .cat-figure .head .cat-name {
+  color: #737373;
+  margin: 10px 0;
+}
 
-  }
+.merchants .cat-figure ul {
+  font-size: 0.85em;
+  padding-left: 20px;
+}
+
+.merchants .cat-figure ul li {
+  list-style: disc;
+}
+
+.merchants .cat-figure ul li a {
+  color: #757575 !important;
+  transition: color 0.3s ease;
+}
+
+.merchants .cat-figure ul li a:hover,
+.merchants .cat-figure ul li a:active {
+  color: #333;
+}
+
+.merchants .merchants {
+  padding: 2.675rem 0;
+}
+
+.merchants .merchants .merchant-cell .merch-figure {
+  padding: 1rem;
+  margin: 20px;
+  height: 13em;
+  text-align: right;
+  background: hsla(0, 0%, 100%, 0.8);
+  border: 1px solid #ff85c2;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  will-change: transform;
+  user-select: none;
+  transition: all 0.3s ease;
+}
+
+.merchants .merchants .merchant-cell .merch-figure:hover {
+  border-color: #cc0066;
+  background: #fff;
+  box-shadow: 0 20px 32px rgba(0, 0, 0, 0.1);
+  transform: translateY(-3px);
+}
+
+.merchants .merchants .merchant {
+  display: block;
+}
+
+.merchants .merchants .merchant .category {
+  text-align: right;
+  display: table;
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.merchants .merchants .merchant .category .svg--icon {
+  margin-left: 10px;
+  width: 2rem;
+  height: 2rem;
+  float: right;
+}
 
-}
\ No newline at end of file
+.merchants .merchants .merchant .category span {
+  overflow: hidden;
+  display: block;
+  font-size: 14px;
+  font-weight: 300;
+  color: #737373;
+}
+
+.merchants .merchants .merchant .category span small {
+  display: block;
+  font-size: 0.75em;
+}
+
+.merchants .merchants .merchant p {
+  margin: 0 auto;
+  font-size: 0.85rem;
+}
+
+.merchants .merchants .merchant .decly {
+  margin-top: 1em;
+  font-size: 0.8rem;
+}
+
+.merchants .merchants .merchant .urly {
+  position: absolute;
+  left: 1rem;
+  bottom: 1rem;
+  font-size: 0.775em;
+  direction: ltr;
+  text-align: left;
+}
+
+.merchants .merchants .merchant .titly {
+  display: inline-block;
+  overflow: hidden;
+  font-size: 1rem;
+  font-weight: 300;
+  position: relative;
+  margin-bottom: 0;
+  top: -7px;
+}
+
+.merchants .merchants .merchant .picto {
+  float: right;
+  background: #fdcf41;
+  width: 2rem;
+  height: 2rem;
+  margin-left: 6px;
+  border-radius: 50%;
+}
+
+.merchants .merchants .merchant .dately {
+  margin-top: 6px;
+  color: #7d7d7d;
+}
+
+.merchants .pagination {
+  margin: 70px auto 0;
+  text-align: center;
+}
+
+.merchants .pagination .page-link {
+  display: inline-block;
+  padding: 5px 10px;
+  margin-left: 0.5em;
+  min-width: 2rem;
+  color: #888 !important;
+  text-align: center;
+  font-weight: 500;
+  background-color: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.085);
+  transition: all 0.25s ease-in-out;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.merchants .pagination .page-link.current,
+.merchants .pagination .page-link:hover {
+  color: #fff !important;
+  background-color: #348cd8;
+  border-color: #3f92da;
+}
+
+.merchants .pagination .page-link:active {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.085), 0 2px 6px rgba(0, 0, 0, 0.125) inset;
+}
+
+.merchants .pagination .page-link:last-child {
+  border-left: 1px solid #e5e5e5;
+  border-radius: 4px;
+}
+
+@keyframes loader {
+  to {
+    transform: rotate(360deg);
+  }
+}
+ 
diff --git a/src/scss/pages/_policy.scss b/src/scss/pages/_policy.scss
index 2fab77c0..bdd4926e 100755
--- a/src/scss/pages/_policy.scss
+++ b/src/scss/pages/_policy.scss
@@ -1,9 +1,12 @@
+/* Policy Page Styles */
 .policy-page {
+  /* Spacing for dividing line */
   .horizontal-line {
-    margin: 40px 0;
+    margin: 2.5rem 0; /* 40px */
   }
 
+  /* Content block spacing */
   .section-content {
-    margin-bottom: 30px;
+    margin-bottom: 1.875rem; /* 30px */
   }
-}
\ No newline at end of file
+}
diff --git a/src/scss/pages/_prices.scss b/src/scss/pages/_prices.scss
index 13b39302..ad2e725f 100755
--- a/src/scss/pages/_prices.scss
+++ b/src/scss/pages/_prices.scss
@@ -1,15 +1,29 @@
 .prices-page {
   margin: 90px 0;
-  #register{
-    a{
+
+  #register {
+    a {
       margin-right: 20px;
     }
+
+    span {
+      font-size: 28px;
+      display: inline-block;
+      margin-bottom: 15px;
+    }
+
+    @media (min-width: 998px) {
+      span {
+        margin-left: 15px;
+        margin-bottom: 0;
+      }
+    }
   }
 
   .top-page-image {
     width: 352px;
     height: 349px;
-    background: url("../../images/prices.png") no-repeat;
+    background: url("../../images/prices.png") no-repeat center;
     background-size: contain;
     margin: 0 auto;
   }
@@ -19,19 +33,19 @@
     text-align: right;
     width: 100%;
 
-    .table-body {
+    .table-head {
       .table-row {
-        margin: 10px 0;
-        background: #FFFFFF;
-        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.07);
-        border-radius: 5px;
-        padding: 15px 25px;
+        background: transparent;
       }
     }
 
-    .table-head {
+    .table-body {
       .table-row {
-        background: transparent;
+        margin: 10px 0;
+        background: #fff;
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07);
+        border-radius: 5px;
+        padding: 15px 25px;
       }
     }
   }
@@ -44,13 +58,15 @@
       margin: 10px 0;
       box-sizing: border-box;
     }
-    @media only screen and (min-width: 660px) {
+
+    @media (min-width: 660px) {
       a.btn {
         width: 35%;
         margin: 10px;
       }
     }
-    @media only screen and (min-width: 1190px) {
+
+    @media (min-width: 1190px) {
       a.btn {
         width: 20%;
         display: inline;
@@ -58,34 +74,12 @@
       }
     }
   }
-
-  #register {
-    span {
-      font-size: 28px;
-      display: inline-block;
-      margin-bottom: 15px;
-    }
-    @media only screen and (min-width: 998px) {
-      span {
-        margin-left: 15px;
-        margin-bottom: inherit;
-      }
-    }
-  }
 }
 
-
-// Small devices (landscape phones, 576px and up)
-@media (min-width: 576px)  and (max-width: 767px){
-
-}
-
-// Medium devices (tablets, 768px and up)
-@media (min-width: 768px)  and (max-width: 991px){
+@media (min-width: 768px) and (max-width: 991px) {
   .prices-page {
     .table {
       width: 80%;
     }
   }
 }
-
diff --git a/src/scss/pages/_products.scss b/src/scss/pages/_products.scss
index 98fda696..50618702 100755
--- a/src/scss/pages/_products.scss
+++ b/src/scss/pages/_products.scss
@@ -1,19 +1,26 @@
+/* Zarincard Section Styles */
 .section-zarincard {
-  margin: 100px 0 0 0;
+  margin: 100px 0 0;
 }
 
-/* extra small */
+/* Responsive Adjustments */
 @media (max-width: 575px) {
-
+  .section-zarincard {
+    margin-top: 60px;
+  }
 }
 
-// Small devices (landscape phones, 576px and up)
-@media (min-width: 576px)  and (max-width: 767px){
-
+@media (min-width: 576px) and (max-width: 767px) {
+  .section-zarincard {
+    margin-top: 70px;
+  }
 }
 
 @media (min-width: 1200px) {
   .zarincard-background {
     width: 480px;
+    max-width: 100%;
+    display: block;
+    margin: 0 auto;
   }
-}
\ No newline at end of file
+}
diff --git a/src/scss/pages/_responsible.scss b/src/scss/pages/_responsible.scss
index f920ae6c..13509d1d 100644
--- a/src/scss/pages/_responsible.scss
+++ b/src/scss/pages/_responsible.scss
@@ -1,444 +1,371 @@
-
-.responsible-page{
-  .file-box{
+/* Enhanced and Optimized Responsible Page Styles */
+.responsible-page {
+  .file-box {
     max-width: 158px;
     height: 138px;
-    background: #F4F4F4;
+    background-color: #f4f4f4;
     border-radius: 23px;
   }
-  .file-box-title{
+
+  .file-box-title {
     font-size: 14px;
     text-align: center;
-    color: #2B4A83;
+    color: #2b4a83;
     font-family: IRANSansMedium !important;
   }
-  .box-content{
-    border: 1px solid #E5E6E7;
+
+  .box-content {
+    border: 1px solid #e5e6e7;
     border-radius: 19px;
-    margin-left: 18px;
+    margin: 0 35px !important;
     padding: 2px 19px;
     min-height: 131px;
-    .header-title{
+
+    .header-title {
       font-size: 20px !important;
-      color: #14286D !important;
+      color: #14286d !important;
       text-align: right;
       font-family: iransansMedium !important;
     }
   }
-  .section-tree{
-    .email{
+
+  .section-tree {
+    .email,
+    .telegram-icon,
+    .arrow-left {
       font-size: 16px;
-      color: #14286D;
+      color: #14286d;
       font-family: iransansMedium !important;
       margin-right: 33px;
-      &:before{
-        content: '';
-        background: url("../../images/arrow-bottom.svg") no-repeat;
-        width: 19px;
-        height: 22px;
-        position: absolute;
-        margin-right: -29px;
-        margin-top: 0;
-      }
+      position: relative;
     }
-    .telegram-icon{
-      font-size: 16px;
-      color: #14286D;
-      font-family: iransansMedium !important;
-      margin-right: 33px;
-      &:before{
-        content: '';
-        background: url("../../images/telegram-icon.svg") no-repeat;
-        width: 19px;
-        height: 22px;
-        position: absolute;
-        margin-right: -32px;
-        margin-top: 5px;
-      }
+
+    .email:before,
+    .telegram-icon:before,
+    .arrow-left:before {
+      content: '';
+      background-repeat: no-repeat;
+      width: 19px;
+      height: 22px;
+      position: absolute;
     }
-    .arrow-left{
-      font-size: 16px;
-      color: #14286D;
+
+    .email:before {
+      background-image: url('../../images/arrow-bottom.svg');
+      right: 29px;
+    }
+
+    .telegram-icon:before {
+      background-image: url('../../images/telegram-icon.svg');
+      right: 32px;
+      top: 5px;
+    }
+
+    .arrow-left {
       font-family: iransansLight !important;
-      margin-right: 33px;
-      &:before{
-        content: '';
-        background: url("../../images/arrow-left.svg") no-repeat;
-        width: 19px;
-        height: 22px;
-        position: absolute;
-        margin-right: -28px;
-        margin-top: 8px;
-      }
+    }
+
+    .arrow-left:before {
+      background-image: url('../../images/arrow-left.svg');
+      right: 28px;
+      top: 8px;
     }
   }
-  .section-five{
+
+  .section-five {
     margin-bottom: 50px;
+
     .social-networks {
       text-align: left;
+
       .icon-link {
         border-radius: 50%;
         margin: 10px;
       }
 
-      .twitter-bg{
-        padding: 16px 8px 0px 11px;
+      .twitter-bg,
+      .instagram-bg,
+      .telegram-bg {
+        padding: 16px 8px 0 11px;
       }
-      .instagram-bg{
-        padding: 16px 8px 0px 13px;
+
+      .instagram-bg {
+        padding-left: 13px;
       }
-      .telegram-bg{
-        padding: 16px 8px 0px 11px;
+
+      .telegram-bg {
+        padding-left: 11px;
       }
 
       .icon {
         display: inline-block;
-      }
-      .icon:hover{
-        opacity: 0.7;
+        transition: opacity 0.3s ease;
+
+        &:hover {
+          opacity: 0.7;
+        }
       }
 
-      .telegram {
-        background: url("../../images/telegram.svg") no-repeat;
-        width: 24px;
-        height: 21px;
-        background-size: 100% 100%;
+      .telegram,
+      .instagram,
+      .twitter {
+        background-size: cover;
         position: relative;
         top: -1px;
-        bottom: 0px;
+        height: 20px;
+        width: 25px;
+      }
+
+      .telegram {
+        background-image: url('../../images/telegram.svg');
         right: 3px;
-        left: 0px;
       }
 
       .instagram {
-        background: url("../../images/instagram.svg") no-repeat;
-        width: 25px;
-        height: 20px;
-        background-size: 100% 100%;
-        position: relative;
-        top: -1px;
-        bottom: 0px;
+        background-image: url('../../images/instagram.svg');
         right: 2px;
         left: 7px;
-
       }
 
       .twitter {
-        background: url("../../images/twitter.svg") no-repeat;
-        width: 25px;
-        height: 20px;
-        background-size: 100% 100%;
-        position: relative;
-        top: -1px;
-        bottom: 0px;
+        background-image: url('../../images/twitter.svg');
         right: 1px;
         left: 7px;
       }
     }
 
-    .logo-footer{
-      background: url("../../images/logo-footer.svg") no-repeat;
+    .logo-footer {
+      background-image: url('../../images/logo-footer.svg');
+      background-repeat: no-repeat;
       height: 38px;
       width: 221px;
     }
-    .footer-content{
+
+    .footer-content,
+    .footer-phoneNumber {
       font-size: 16px;
-      color: #14286D;
+      color: #14286d;
       font-family: IRANSansMedium !important;
     }
-    .footer-phoneNumber{
+
+    .footer-phoneNumber {
       font-size: 18px;
-      color: #14286D;
-      font-family: IRANSansMedium !important;
     }
   }
-  .section-four{
+
+  .section-four {
     padding-bottom: 32px;
     margin-top: 50px;
-    .digiyato-img{
-      background: url("../../images/Digiato.svg") no-repeat;
+
+    .digiyato-img,
+    .rahpardakht-img,
+    .peyvast-img {
+      background-repeat: no-repeat;
+    }
+
+    .digiyato-img {
+      background-image: url('../../images/Digiato.svg');
       height: 97px;
       width: 126px;
     }
+
     .rahpardakht-img {
-      background: url("../../images/rahpardakht.svg") no-repeat;
+      background-image: url('../../images/rahpardakht.svg');
       height: 50px;
       width: 142px;
     }
+
     .peyvast-img {
-      background: url("../../images/peyvast.svg") no-repeat;
+      background-image: url('../../images/peyvast.svg');
       height: 38px;
       width: 221px;
     }
+
     .header-title {
       font-size: 32px;
-      color: #14286D;
+      color: #14286d;
       font-family: IRANSansBold !important;
-
     }
   }
-  .section-two{
+
+  .section-two {
     margin-top: 100px !important;
+
     .header-title {
       font-size: 32px;
-      color: #14286D;
+      color: #14286d;
     }
-    .title-describe {
-      margin:auto;
-      max-width: 751px;
-      padding-bottom: 20px;
+
+    .title-describe,
+    .wage-describe,
+    .describe {
+      margin: auto;
       line-height: 35px;
       font-size: 16px;
-      color: #050B22;
+      color: #050b22;
       font-family: IRANSansLight !important;
       border-bottom: none !important;
     }
-    .wage-describe{
-      margin:auto;
+
+    .title-describe {
+      max-width: 751px;
+      padding-bottom: 20px;
+    }
+
+    .wage-describe {
       max-width: 415px;
       padding-bottom: 20px;
-      line-height: 35px;
-      font-size: 16px;
-      color: #050B22;
-      font-family: IRANSansLight !important;
-      border-bottom: none !important;
     }
-    .describe{
+
+    .describe {
       text-align: right;
       padding-bottom: 20px;
-      line-height: 35px;
-      font-size: 16px;
-      color: #050B22;
-      font-family: IRANSansLight !important;
-      border-bottom: none !important;
     }
   }
-  .title-describe {
-    border-bottom: none !important;
-  }
+
   .divider {
-    border-top: 1px solid #E5E6E7;
-    border-radius: 0;
+    border-top: 1px solid #e5e6e7;
     width: 100%;
-    margin: auto;
-    list-style: none;
+    margin-bottom: 24px;
     position: relative;
     top: 22px;
-    margin-bottom: 24px;
   }
-  .icon-arrow-down{
-    background: unset !important;
-    box-shadow: unset !important;
+
+  .icon-arrow-down {
+    background: none !important;
+    box-shadow: none !important;
     display: inline-block;
     font-size: 24px;
     border-radius: 100px;
-    color: #14286D;
+    color: #14286d;
     position: relative;
     bottom: -6px;
     left: 25px;
     cursor: pointer;
     z-index: 1000;
   }
+
   .new-logo-white {
-    background: url("../../images/logo-white.svg") no-repeat;
+    background-image: url('../../images/logo-white.svg');
+    background-repeat: no-repeat;
     height: 97px;
     width: 126px;
-    margin: 44px auto 18px auto;
+    margin: 44px auto 18px;
   }
+
   .responsible-img {
-    background: url("../../images/responsible.svg") no-repeat;
+    background-image: url('../../images/responsible.svg');
+    background-repeat: no-repeat;
     height: 103px;
     width: 121px;
     margin: 20px auto;
   }
-  .header-title{
+
+  .header-title {
     margin-top: 10px;
   }
+
   .new-logo {
     height: 35px;
     width: 156px;
-    margin: 44px auto 120px auto;
+    margin: 44px auto 120px;
   }
+
   .title-describe {
     margin-top: 16px !important;
     max-width: 500px;
     padding-bottom: 87px;
     line-height: 37px;
   }
-  .top-title{
+
+  .top-title {
     margin-bottom: 5px;
     font-size: 32px;
-    color: #14286D !important;
-    background: #fff;
+    color: #14286d !important;
+    background-color: #fff;
     padding: 0 11px;
     border-radius: 10px;
   }
-  .btn{
+
+  .btn {
     font-size: 14px !important;
-    color: #14286D !important;
-    margin: unset !important;
+    color: #14286d !important;
+    margin: 0 !important;
   }
-  .links{
+
+  .links {
     border-radius: 21px;
     position: relative;
-    top: 41px;;
-    background: #FFE422 !important;
-    box-shadow: unset !important;
-    color: #584B00 !important;
+    top: 41px;
+    background-color: #ffe422 !important;
+    box-shadow: none !important;
+    color: #584b00 !important;
     width: max-content;
     margin: auto;
   }
 
-
-
-$from: 1;
-$to: 100;
-
-/**------------------
-margin
--------------------- */
-
-@for $i from $from through $to {
-  .m-#{$i} {
-    margin: 0px + $i !important;
-  }
-}
-
-/**------------------
-margin-left
--------------------- */
-
-@for $i from $from through $to {
-  .m-l-#{$i} {
-    margin-left: 0px + $i !important;
-  }
-}
-
-/**------------------
-margin-right
--------------------- */
-@for $i from $from through $to {
-  .m-r-#{$i} {
-    margin-right: 0px + $i !important;
-  }
-}
-
-/**------------------
-margin-top
--------------------- */
-@for $i from $from through $to {
-  .m-t-#{$i} {
-    margin-top: 0px + $i !important;
-  }
-}
-
-/**------------------
-margin-bottom
--------------------- */
-@for $i from $from through $to {
-  .m-b-#{$i} {
-    margin-bottom: 0px + $i !important;
-  }
-}
-
-}
-
-
-
-
-
-
-@media(max-width: 575px) {
-  .responsible-page{
-    .logo-footer{
-      background-position: right !important;
-      margin-bottom: 23px;
+  // Margin utilities
+  @for $i from 1 through 100 {
+    .m-#{$i} {
+      margin: #{$i}px !important;
     }
-    .social-networks,.footer-phoneNumber{
-      text-align: right !important;
+    .m-l-#{$i} {
+      margin-left: #{$i}px !important;
     }
-    .section-tree,.section-four,.section-five{
-      padding: 0 30px;
+    .m-r-#{$i} {
+      margin-right: #{$i}px !important;
     }
-    .box-content {
-      margin-left: 35px !important;
-      margin-right: 35px;
+    .m-t-#{$i} {
+      margin-top: #{$i}px !important;
+    }
+    .m-b-#{$i} {
+      margin-bottom: #{$i}px !important;
     }
   }
 }
-@media(min-width: 575px) and (max-width: 767px) {
-  .responsible-page{
-    .logo-footer{
+
+@media (max-width: 575px), (min-width: 575px) and (max-width: 767px) {
+  .responsible-page {
+    .logo-footer {
       background-position: right !important;
       margin-bottom: 23px;
     }
-    .social-networks,.footer-phoneNumber{
+
+    .social-networks,
+    .footer-phoneNumber {
       text-align: right !important;
     }
-    .section-tree,.section-four,.section-five{
+
+    .section-tree,
+    .section-four,
+    .section-five {
       padding: 0 30px;
     }
-    .box-content {
-      margin-left: 35px !important;
-      margin-right: 35px;
-    }
   }
 }
 
-
-@media(min-width: 767px) and (max-width: 992px) {
-  .responsible-page{
-    .section-tree,.section-four,.section-five{
+@media (min-width: 767px) and (max-width: 1200px) {
+  .responsible-page {
+    .section-tree,
+    .section-four,
+    .section-five {
       padding: 0 30px;
-      .email{
+
+      .email {
         margin-top: -9px;
       }
     }
-    .box-content {
-      margin-left: 35px !important;
-      margin-right: 35px;
-    }
-    .digiyato-img{
-      background: url("../../images/Digiato.svg") no-repeat;
+
+    .digiyato-img {
+      background-image: url('../../images/Digiato.svg');
       height: 97px;
       width: 126px;
       margin: -27px auto;
     }
-  }
-}
-@media(min-width: 992px) and (max-width: 1200px) {
-  .responsible-page{
-    .links{
-      top: 20px!important;
-    }
-    .section-tree{
-      .email{
-        margin-top: -9px;
-      }
-    }
-    .digiyato-img{
-      background: url("../../images/Digiato.svg") no-repeat;
-      height: 97px;
-      width: 126px;
-      margin: -27px auto;
+
+    .links {
+      top: 20px !important;
     }
   }
 }
-@media(min-width: 1200px){
-  .responsible-page{
-    .links{
-      top: 20px!important;
-    }
-    .section-tree{
-      .email{
-        margin-top: -9px;
-      }
-    }
-    .digiyato-img{
-      background: url("../../images/Digiato.svg") no-repeat;
-      height: 97px;
-      width: 126px;
-      margin: -27px auto;
-    }
-  }
-}
\ No newline at end of file
+ 
diff --git a/src/scss/pages/_terms.scss b/src/scss/pages/_terms.scss
index d4ac742f..de5b991f 100755
--- a/src/scss/pages/_terms.scss
+++ b/src/scss/pages/_terms.scss
@@ -1,15 +1,41 @@
 .terms-page {
   font-family: IRANSansLightPersian;
+  line-height: 1.6;
+  color: #2B2B2B;
+  padding: 20px;
 
   .horizontal-line {
     margin: 40px 0;
+    border-top: 1px solid #E0E0E0;
   }
 
   .section-content {
-    margin: 20px 0;
+    margin: 24px 0;
+    font-size: 16px;
   }
 
   .sub-condition {
-    margin: 10px 20px 20px 0;
+    margin: 12px 24px 24px 0;
+    padding-left: 16px;
+    position: relative;
+
+    &::before {
+      content: '\2022';
+      position: absolute;
+      left: 0;
+      color: #14286D;
+    }
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    color: #14286D;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    font-family: IRANSansMedium;
+  }
+
+  p {
+    margin: 10px 0;
   }
-}
\ No newline at end of file
+}
+ 
diff --git a/src/scss/pages/_variables.scss b/src/scss/pages/_variables.scss
index e30e9dd6..2e5369b5 100755
--- a/src/scss/pages/_variables.scss
+++ b/src/scss/pages/_variables.scss
@@ -1,11 +1,11 @@
-$fontFamily: IRANSans;
+$fontFamily: 'IRANSans';
 $titleFontSize: 20px;
 $footerTitleFontSize: 14px;
-$titleFontColor: #000000;
+$titleFontColor: #000;
 $footerTitleFontColor: #6a6a6a;
 $textFontSize: 14px;
 
-$headerTitleColor: #000000;
+$headerTitleColor: #000;
 $headerTitleFontSize: 28px;
 
 $lineColor: #DFE1E4;
@@ -14,8 +14,7 @@ $lineHeight: 1px;
 $firstPageIconColor: #284379;
 $firstPageIconSize: 20px;
 
-
-//Font icon 1.5
+// Font icon 1.5
 $icon-zp-sync: "\e93a";
 $icon-zp-mailbox: "\e944";
 $icon-zp-shetab: "\e94d";
@@ -27,7 +26,6 @@ $icon-zp-date: "\e91f";
 $icon-zp-telephone: "\e932";
 $icon-zp-location: "\e933";
 $icon-zp-calendar: "\e908";
-$icon-zp-location: "\e933";
 $icon-zp-refresh: "\e92f";
 $icon-zp-qr-code: "\e94c";
 $icon-zp-edit: "\e945";
@@ -92,7 +90,8 @@ $icon-zp-error: "\e92b";
 $icon-zp-home: "\e92d";
 $icon-zp-new-window: "\e930";
 $icon-zp-receipt: "\e935";
-$icon-zp-setting: "e937";
+$icon-zp-setting: "\e937";
 $icon-zp-transaction-trend-down: "\e939";
 $icon-zp-transaction-reconciliation: "\e943";
-$icon-zp-visible: "\e93d";
\ No newline at end of file
+$icon-zp-visible: "\e93d";
+ 
diff --git a/src/scss/pages/pages_header.scss b/src/scss/pages/pages_header.scss
index ec189927..cd170101 100755
--- a/src/scss/pages/pages_header.scss
+++ b/src/scss/pages/pages_header.scss
@@ -1,29 +1,15 @@
 .header {
-  margin-bottom: 30px !important;
-  margin-top: 30px !important;
+  margin: 30px 0 !important;
 
-  .white {
+  .white,
+  .links li,
+  .links .btn-login-to-account .icon-person,
+  .icon-menu {
     color: #303030 !important;
   }
 
-  .links {
-    li {
-      color: #303030 !important;
-    }
-    .btn-login-to-account {
-      .icon-person {
-        color: #303030 !important;
-      }
-    }
-  }
-
-  .more-menu {
-    &:after {
-      border-top: 4px solid #303030 !important;
-    }
-  }
-
-  .icon-menu {
-    color: #303030 !important;
+  .more-menu::after {
+    border-top: 4px solid #303030 !important;
   }
-}
\ No newline at end of file
+}
+ 
diff --git a/src/scss/partials/_animation.scss b/src/scss/partials/_animation.scss
index e969601d..862aa62f 100644
--- a/src/scss/partials/_animation.scss
+++ b/src/scss/partials/_animation.scss
@@ -1,19 +1,20 @@
+/* Base Animation Settings */
 .animated {
-  -webkit-animation-duration: 200ms;
   animation-duration: 200ms;
-  -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
+  -webkit-animation-duration: 200ms;
+  -webkit-animation-fill-mode: both;
 }
 
+/* Fade In Down Animation */
 @keyframes fadeInDown {
   from {
     opacity: 0;
-    transform: translate3d(0, -100%, 0);
+    transform: translateY(-100%);
   }
-
   to {
     opacity: 1;
-    transform: translate3d(0, 0, 0);
+    transform: translateY(0);
   }
 }
 
@@ -21,14 +22,14 @@
   animation-name: fadeInDown;
 }
 
+/* Fade Out Up Animation */
 @keyframes fadeOutUp {
   from {
     opacity: 1;
   }
-
   to {
     opacity: 0;
-    transform: translate3d(0, -100%, 0);
+    transform: translateY(-100%);
   }
 }
 
@@ -36,12 +37,11 @@
   animation-name: fadeOutUp;
 }
 
-
+/* Fade In Animation */
 @keyframes fadeIn {
   from {
     opacity: 0;
   }
-
   to {
     opacity: 1;
   }
@@ -51,11 +51,11 @@
   animation-name: fadeIn;
 }
 
+/* Fade Out Animation */
 @keyframes fadeOut {
   from {
     opacity: 1;
   }
-
   to {
     opacity: 0;
   }
@@ -63,4 +63,4 @@
 
 .fadeOut {
   animation-name: fadeOut;
-}
\ No newline at end of file
+}
diff --git a/src/scss/partials/_blue_header.scss b/src/scss/partials/_blue_header.scss
index b067c579..d59adc54 100644
--- a/src/scss/partials/_blue_header.scss
+++ b/src/scss/partials/_blue_header.scss
@@ -1,18 +1,17 @@
 .blue-header {
   background-image: linear-gradient(135deg, #21254E 0%, #2B4A83 100%);
-  -webkit-box-shadow: 0 20px 40px 0 rgba(36, 46, 91, 0.26);
-  box-shadow: 0 20px 40px 0 rgba(36, 46, 91, 0.26);
+  box-shadow: 0 20px 40px rgba(36, 46, 91, 0.26);
   border-radius: 20px;
   margin-top: -30px;
 
   .custom-blue-header {
     ul {
-      .more-menu{
+      .more-menu {
         border-bottom: none !important;
       }
       li:hover {
         border-bottom: 2px solid #fff;
-        transition: 400ms;
+        transition: border-bottom 0.4s ease;
       }
     }
   }
@@ -23,7 +22,6 @@
     }
   }
 
-
   .wave {
     width: 846px;
     height: 509px;
@@ -39,8 +37,8 @@
   .icon-arrow-down {
     display: inline-block;
     font-size: 33px;
-    background-color: #FFFFFF;
-    box-shadow: 0 -2px 9px 0 rgba(0, 0, 0, 0.10);
+    background-color: #fff;
+    box-shadow: 0 -2px 9px rgba(0, 0, 0, 0.1);
     border-radius: 100px;
     color: #21254E;
     position: relative;
@@ -50,10 +48,7 @@
   }
 }
 
-/* Media
-   ----------------------------- */
-
-/* extra small */
+/* Extra Small Devices */
 @media (max-width: 575px) {
   .blue-header {
     padding: 30px 10px;
@@ -61,16 +56,15 @@
 
   .btn-go-bottom-section {
     text-align: center !important;
-  }
 
-  .btn-go-bottom-section {
     .icon-arrow-down {
       bottom: -52px !important;
     }
   }
 }
 
-@media (min-width: 576px)  and (max-width: 767px){
+/* Small Devices */
+@media (min-width: 576px) and (max-width: 767px) {
   .blue-header {
     padding: 30px 10px;
 
@@ -82,7 +76,7 @@
   }
 }
 
-/* Medium devices (tablets, 768px and up) */
+/* Medium Devices */
 @media (min-width: 768px) and (max-width: 991px) {
   .blue-header {
     padding: 30px 10px;
@@ -97,12 +91,12 @@
   }
 }
 
-/* Large devices (desktops, 992px and up) */
-@media (min-width: 992px) and (max-width: 1199px){
+/* Large Devices */
+@media (min-width: 992px) and (max-width: 1199px) {
   .blue-header {
     margin-left: -5%;
     margin-right: -5%;
-    padding: 40px 100px 0 100px;
+    padding: 40px 100px 0;
 
     .wave {
       margin-top: 30px;
@@ -112,12 +106,12 @@
   }
 }
 
-/* Extra large devices (large desktops, 1200px and up) */
+/* Extra Large Devices */
 @media (min-width: 1200px) {
   .blue-header {
     margin-left: -5%;
     margin-right: -5%;
-    padding: 40px 100px 0 100px;
+    padding: 40px 100px 0;
 
     .wave {
       margin-top: 30px;
@@ -125,4 +119,5 @@
       right: -211px;
     }
   }
-}
\ No newline at end of file
+}
+ 
diff --git a/src/scss/partials/_customer.scss b/src/scss/partials/_customer.scss
index c5f87cd9..434bafb3 100755
--- a/src/scss/partials/_customer.scss
+++ b/src/scss/partials/_customer.scss
@@ -5,8 +5,10 @@
 .customers {
   .title {
     font-size: 20px;
-    margin-bottom: -5px;
+    font-weight: 600;
+    text-align: center;
     margin-top: 30px;
+    margin-bottom: -5px;
   }
 
   .images {
@@ -14,46 +16,47 @@
     margin-bottom: 30px;
 
     .logo {
-      padding: 0;
+      display: inline-block;
       margin: 20px 35px;
+      padding: 0;
       background-repeat: no-repeat;
       background-size: 100% 100%;
-      display: inline-block;
-    }
-
-    @mixin customer-logo($logoPath) {
-      background-image: url($logoPath);
     }
 
     .logo-cinema-ticket {
       width: 100px;
       height: 22px;
-      @include customer-logo("../../images/customer/cinematicket_dark.svg")
+      background-image: url("../../images/customer/cinematicket_dark.svg");
     }
+
     .logo-shahrzad {
       width: 69px;
       height: 40px;
-      @include customer-logo("../../images/customer/shahrzad.svg")
+      background-image: url("../../images/customer/shahrzad.svg");
     }
+
     .logo-tagmond {
       width: 138px;
       height: 20px;
-      @include customer-logo("../../images/customer/tagmond.svg")
+      background-image: url("../../images/customer/tagmond.svg");
     }
+
     .logo-2nate {
       width: 86px;
       height: 30px;
-      @include customer-logo("../../images/customer/2nate.svg")
+      background-image: url("../../images/customer/2nate.svg");
     }
+
     .logo-hiholiday {
       width: 120px;
       height: 25px;
-      @include customer-logo("../../images/customer/hiholiday.svg")
+      background-image: url("../../images/customer/hiholiday.svg");
     }
+
     .logo-p24 {
       width: 130px;
       height: 18px;
-      @include customer-logo("../../images/customer/p24.svg")
+      background-image: url("../../images/customer/p24.svg");
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/scss/partials/_footer.scss b/src/scss/partials/_footer.scss
index 3d6af665..ad995ff4 100755
--- a/src/scss/partials/_footer.scss
+++ b/src/scss/partials/_footer.scss
@@ -1,23 +1,24 @@
 .footer {
+  position: absolute;
   left: 0;
   right: 0;
-  position: absolute;
   padding-top: 80px;
 
-  &:before {
+  &::before {
     content: '';
-    z-index: -2;
-    width: 610px;
-    height: 491px;
-    background: url("../../images/footer-gradiant.svg") top left no-repeat;
-    background-size: 100%;
     position: absolute;
     left: 0;
     bottom: 0;
+    z-index: -2;
+    width: 610px;
+    height: 491px;
+    background: url("../../images/footer-gradiant.svg") no-repeat top left;
+    background-size: cover;
   }
 
   ul {
-    padding-right: 0;
+    padding: 0;
+
     li {
       font-size: $footerTitleFontSize;
       color: $titleFontColor;
@@ -26,107 +27,91 @@
   }
 
   .footer-logo {
-    margin: 0 auto 40px auto;
+    margin: 0 auto 40px;
     width: 135px;
     height: 30px;
-    background: url("../../images/footer-logo.svg") no-repeat;
-    background-size: 135px 30px;
+    background: url("../../images/footer-logo.svg") no-repeat center;
+    background-size: contain;
   }
 
   .social-networks {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 10px;
+
     .icon-link {
       background-color: #f2f3f5;
       border-radius: 50%;
-      margin: 10px;
-    }
-
-    .twitter-bg{
-      padding: 16px 8px 0px 11px;
-    }
-    .instagram-bg{
-      padding: 16px 8px 0px 13px;
-    }
-    .telegram-bg{
-      padding: 16px 8px 0px 11px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 10px;
     }
 
     .icon {
       display: inline-block;
-    }
-    .icon:hover{
-      opacity: 0.7;
+      transition: opacity 0.3s;
+
+      &:hover {
+        opacity: 0.7;
+      }
     }
 
     .telegram {
-      background: url("../../images/social/telegram.svg") no-repeat;
+      background-image: url("../../images/social/telegram.svg");
       width: 24px;
       height: 21px;
-      background-size: 100% 100%;
-      position: relative;
-      top: -1px;
-      bottom: 0px;
-      right: 3px;
-      left: 0px;
     }
 
     .instagram {
-      background: url("../../images/social/instagram.svg") no-repeat;
+      background-image: url("../../images/social/instagram.svg");
       width: 22px;
       height: 22px;
-      background-size: 100% 100%;
-      position: relative;
-      top: -1px;
-      bottom: 0px;
-      right: 2px;
-      left: 7px;
-
     }
- .aparat {
-      background: url("../../images/social/aparat.svg") no-repeat;
+
+    .aparat {
+      background-image: url("../../images/social/aparat.svg");
       width: 27px;
       height: 27px;
-      background-size: 100% 100%;
-      position: relative;
-      top: 2px;
-      bottom: 0px;
-      right: 2px;
-      left: 7px;
-
     }
 
     .twitter {
-      background: url("../../images/social/twitter.svg") no-repeat;
+      background-image: url("../../images/social/twitter.svg");
       width: 25px;
       height: 20px;
+    }
+
+    .telegram,
+    .instagram,
+    .aparat,
+    .twitter {
       background-size: 100% 100%;
-      position: relative; 
-      top: -1px;
-      bottom: 0px;
-      right: 1px;
-      left: 7px;
+      background-repeat: no-repeat;
+      position: relative;
     }
   }
 
   .bottom {
-    margin: 40px 0 20px 0;
+    margin: 40px 0 20px;
+    text-align: center;
 
-    a{
+    a {
       margin: 0 20px;
     }
 
     .copyright {
       span {
-        margin: 0 20px;
         font-size: $footerTitleFontSize;
+        margin: 0 20px;
       }
     }
   }
-
 }
-// extra small
+
 @media (max-width: 575px) {
   .footer {
-    &:before {
+    &::before {
       width: 358px !important;
       height: 285px !important;
     }
@@ -137,10 +122,9 @@
   }
 }
 
-// Small devices (landscape phones, 576px and up)
 @media (min-width: 576px) and (max-width: 767px) {
   .footer {
-    &:before {
+    &::before {
       width: 358px !important;
       height: 285px !important;
     }
@@ -151,10 +135,10 @@
   }
 }
 
-// Medium devices (tablets, 768px and up)
-@media (min-width: 768px)  and (max-width: 991px) {
+@media (min-width: 768px) and (max-width: 991px) {
   .social-networks {
     margin-top: 30px !important;
     text-align: right !important;
   }
-}
\ No newline at end of file
+}
+ 
diff --git a/src/scss/partials/_forms.scss b/src/scss/partials/_forms.scss
index d2a9c330..270a44b0 100755
--- a/src/scss/partials/_forms.scss
+++ b/src/scss/partials/_forms.scss
@@ -1,63 +1,69 @@
-input, textarea, select {
+input,
+textarea,
+select {
   box-sizing: border-box;
   border: 1px solid #c3c6cd;
-  background: rgba(242, 243, 245, 0.5);
+  background-color: rgba(242, 243, 245, 0.5);
   padding: 10px;
   width: 100%;
   font-family: $fontFamily;
-  margin-bottom: 10px;
-  border-radius: 3px;
+  margin-bottom: 12px;
+  border-radius: 4px;
+  transition: all 0.3s ease;
 }
 
-input:focus, textarea:focus, select:focus {
-  background: #ffffff;
-  border: 1px solid #f9d042;
-  box-shadow: 0 0 8px #f9d042;
+input:focus,
+textarea:focus,
+select:focus {
+  background-color: #ffffff;
+  border-color: #f9d042;
+  box-shadow: 0 0 8px rgba(249, 208, 66, 0.8);
+  outline: none;
 }
 
 input {
-  height: 37px;
+  height: 40px;
 }
 
 label span {
-  color: #838383;
+  color: #6e6e6e;
   font-size: 14px;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
   display: inline-block;
 }
 
 .btn {
   display: inline-block;
-  border-radius: 5px;
-  padding: 6px 28px;
+  border-radius: 6px;
+  padding: 8px 30px;
   border: none;
   font-size: 16px !important;
   font-family: IRANSansMedium !important;
-  transition: 0.4s;
   cursor: pointer !important;
+  transition: opacity 0.4s ease, box-shadow 0.4s ease;
+}
 
-  &:hover {
-    opacity: 0.6;
-    transition: 0.4s;
-  }
+.btn:hover {
+  opacity: 0.7;
 }
 
 .btn-gold {
-  background-image: linear-gradient(45deg, #FFE75A 0%, #F7CB3D 100%) !important;
-  box-shadow: 0 5px 10px 0 rgba(255, 214, 71, 0.25);
+  background-image: linear-gradient(45deg, #FFE75A, #F7CB3D) !important;
+  box-shadow: 0 5px 10px rgba(255, 214, 71, 0.25);
   color: #584B00 !important;
+}
 
-  &:hover {
-    box-shadow: 0 10px 20px 0 rgba(255, 214, 71, 0.25) !important;
-  }
+.btn-gold:hover {
+  box-shadow: 0 10px 20px rgba(255, 214, 71, 0.35) !important;
 }
 
 .btn-normal {
-  background: #FFFFFF;
-  box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.03);
+  background-color: #ffffff;
+  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.03);
   color: #303030 !important;
+}
 
-  &:hover {
-    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.03) !important;
-  }
-}
\ No newline at end of file
+.btn-normal:hover {
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
+}
+ 
diff --git a/src/scss/partials/_header.scss b/src/scss/partials/_header.scss
index 72c8712b..72a9faba 100755
--- a/src/scss/partials/_header.scss
+++ b/src/scss/partials/_header.scss
@@ -1,191 +1,183 @@
-
 @font-face {
   font-family: Lalezar;
   font-style: normal;
   font-weight: 500;
-  src: url('../../fonts/woff2/Lalezar.woff2') format('woff2'); /* FF39+,Chrome36+, Opera24+*/
+  src: url('../../fonts/woff2/Lalezar.woff2') format('woff2');
 }
-.landing-title{
+
+.landing-title {
   background-color: #ffef5c;
-  font-family: Lalezar !important;
+  font-family: Lalezar, sans-serif;
   text-align: center;
   color: #375d94;
   font-size: 30px;
   cursor: pointer;
-
 }
-@media (min-width: 1200px){
-  .landing-title{
-    margin-left: -5%;
-    margin-right: -5%;
-    padding: 3px 100px 0 100px;
+
+@media (min-width: 1200px) {
+  .landing-title {
+    margin: 0 -5%;
+    padding: 3px 100px 0;
   }
 }
 
-.blue-header{
-  border-top-left-radius: 0 !important;
-  border-top-right-radius: 0 !important;
+.blue-header {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
-.landing-box{
-  height: max-content;
+
+.landing-box {
+  height: auto;
   margin-top: -30px;
 }
+
 .header {
   margin-bottom: 29px;
-  .new-logo {
-    height: 35px;
-    width: 156px;
-    margin-top: 10px;
-    margin-right: 20px
-  }
+}
 
-  .new-logo-white {
-    background: url("../../images/logo-white.svg") no-repeat;
-  }
-  .new-logo-black{
-    background: url("../../images/new-logo.svg") no-repeat;
-  }
+.header .new-logo {
+  height: 35px;
+  width: 156px;
+  margin: 10px 20px 0 0;
+  background-repeat: no-repeat;
+}
 
-  .links {
-    li {
-      margin: 0 20px;
-      display: inline-block;
-      font-size: $textFontSize;
-      color: #ffffff;
-      padding-bottom: 10px;
-      transition: 400ms;
-      border-bottom: 2px solid transparent;
-    }
-
-    .vertical-line {
-      background-color: #FFFFFF;
-      width: 1px;
-      min-height: 100%;
-      height: 16px;
-      position: relative;
-      display: inline-block;
-      top: 4px;
-    }
-  }
+.header .new-logo-white {
+  background-image: url("../../images/logo-white.svg");
+}
 
-  .more-menu {
-    &:after {
-      content: '';
-      width: 0;
-      position: relative;
-      top: 15px;
-      margin-right: 7px;
-      height: 0;
-      border-left: 4px solid transparent;
-      border-right: 4px solid transparent;
-      border-top: 4px solid #fff;
-    }
-
-    .show {
-      display: block;
-    }
-
-    ul {
-      display: none;
-      z-index: 999;
-      position: absolute;
-      min-width: 8rem;
-      max-width: 16rem;
-      padding: 0;
-      margin-top: 10px;
-      margin-right: -70px;
-      border-radius: 2px;
-      text-align: right;
-      background-color: #fff;
-      box-shadow: 1px 2px 12px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.15), 0 0 1px rgba(0,0,0,.1) inset;
-
-      &:before {
-        content: "";
-        position: absolute;
-        top: -8px;
-        left: 34px;
-        margin: 0 2px;
-        border-left: 9px solid transparent;
-        border-right: 9px solid transparent;
-        border-bottom: 9px solid #fff;
-      }
-
-      li {
-        display: block;
-        color: #303030;
-        margin: 0;
-        padding: 10px 20px;
-        border-bottom: 1px solid #EDEDED;
-        transition: 400ms;
-
-        &:hover {
-          background-color: #EDEDED;
-          transition: 400ms;
-        }
-      }
-    }
-  }
+.header .new-logo-black {
+  background-image: url("../../images/new-logo.svg");
+}
 
-  .icon-menu {
-    float: left;
-    margin: 10px;
-    font-size: 30px;
-    color: #ffffff;
-  }
+.header .links li {
+  margin: 0 20px;
+  display: inline-block;
+  font-size: $textFontSize;
+  color: #ffffff;
+  padding-bottom: 10px;
+  border-bottom: 2px solid transparent;
+  transition: border-bottom 0.4s;
+}
 
-  .bg-mobile-menu {
-    position: fixed;
-    left: 0;
-    right: 0;
-    top: 0;
-    background-color: rgba(0, 0, 0, 0.7);
-    bottom: 0;
-    z-index: 1000;
-  }
+.header .links .vertical-line {
+  background-color: #fff;
+  width: 1px;
+  height: 16px;
+  display: inline-block;
+  position: relative;
+  top: 4px;
+}
 
-  .mobile-menu {
-    z-index: 1001;
-    background-color: #fff;
-    top: 0;
-    position: fixed;
-    left: 0;
-    right: 0;
-
-    .top {
-      background-color: #fff;
-      text-align: left;
-      padding: 10px;
-
-      .icon-close {
-        cursor: pointer;
-        font-size: 30px;
-        margin: 10px;
-        display: inline-block;
-      }
-    }
-
-    .middle {
-      background-color: #fff;
-      padding: 0 30px;
-
-      ul {
-        padding-right: 0;
-
-        li {
-          padding: 5px 0;
-        }
-
-        .horizontal-line {
-          margin: 10px 0;
-        }
-      }
-    }
-
-    .bottom {
-      background-color: #eee;
-      padding: 20px 30px;
-    }
+.header .more-menu::after {
+  content: '';
+  position: relative;
+  top: 15px;
+  margin-right: 7px;
+  border: 4px solid transparent;
+  border-top-color: #fff;
+}
 
-  }
+.header .more-menu .show {
+  display: block;
+}
+
+.header .more-menu ul {
+  display: none;
+  position: absolute;
+  z-index: 999;
+  min-width: 8rem;
+  max-width: 16rem;
+  margin: 10px 0 0 -70px;
+  padding: 0;
+  background-color: #fff;
+  border-radius: 2px;
+  text-align: right;
+  box-shadow: 1px 2px 12px rgba(0, 0, 0, 0.2),
+              0 1px 2px rgba(0, 0, 0, 0.15),
+              0 0 1px rgba(0, 0, 0, 0.1) inset;
 }
 
+.header .more-menu ul::before {
+  content: "";
+  position: absolute;
+  top: -8px;
+  left: 34px;
+  border: 9px solid transparent;
+  border-bottom-color: #fff;
+}
+
+.header .more-menu ul li {
+  display: block;
+  color: #303030;
+  margin: 0;
+  padding: 10px 20px;
+  border-bottom: 1px solid #ededed;
+  transition: background-color 0.4s;
+}
+
+.header .more-menu ul li:hover {
+  background-color: #ededed;
+}
+
+.header .icon-menu {
+  float: left;
+  margin: 10px;
+  font-size: 30px;
+  color: #ffffff;
+}
+
+.header .bg-mobile-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  z-index: 1000;
+}
+
+.header .mobile-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  background-color: #fff;
+  z-index: 1001;
+}
+
+.header .mobile-menu .top {
+  background-color: #fff;
+  text-align: left;
+  padding: 10px;
+}
+
+.header .mobile-menu .top .icon-close {
+  cursor: pointer;
+  font-size: 30px;
+  margin: 10px;
+  display: inline-block;
+}
+
+.header .mobile-menu .middle {
+  background-color: #fff;
+  padding: 0 30px;
+}
+
+.header .mobile-menu .middle ul {
+  padding-right: 0;
+}
+
+.header .mobile-menu .middle ul li {
+  padding: 5px 0;
+}
+
+.header .mobile-menu .middle ul .horizontal-line {
+  margin: 10px 0;
+}
+
+.header .mobile-menu .bottom {
+  background-color: #eee;
+  padding: 20px 30px;
+}
+ 
diff --git a/src/scss/partials/_page.scss b/src/scss/partials/_page.scss
index 874474b9..328a0716 100755
--- a/src/scss/partials/_page.scss
+++ b/src/scss/partials/_page.scss
@@ -1,22 +1,31 @@
 .page-head {
   .image-section {
+    position: relative;
     &:before {
       content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
       background: url("../../images/crooked-blue-bg.png") top left no-repeat;
+      background-size: cover;
       z-index: -1;
-      position: absolute;
-      background-size: 100% 100%;
     }
   }
 
   .description-section {
+    position: relative;
     &:before {
       content: '';
-      background: url("../../images/page-header-light-bg.svg") top left no-repeat;
-      z-index: -1;
       position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
       height: 410px;
-      background-size: 100% 100%;
+      background: url("../../images/page-header-light-bg.svg") top left no-repeat;
+      background-size: cover;
+      z-index: -1;
     }
 
     .header-title {
@@ -30,9 +39,6 @@
   }
 }
 
-
-/* Mixin
-   ----------------------------- */
 @mixin image-section-position($width, $height, $left, $top) {
   &:before {
     width: $width;
@@ -50,10 +56,6 @@
   }
 }
 
-/* Media
-   ----------------------------- */
-
-/* extra small */
 @media (max-width: 575px) {
   .image-section {
     @include image-section-position(284px, 90px, 0, 0);
@@ -66,17 +68,13 @@
   .description-section {
     @include description-section-image-position(100%, 0, -60px);
 
-
     .header-title {
       margin-top: 50px !important;
     }
-
   }
-
 }
 
-// Small devices (landscape phones, 576px and up)
-@media (min-width: 576px)  and (max-width: 767px){
+@media (min-width: 576px) and (max-width: 767px) {
   .image-section {
     @include image-section-position(284px, 90px, 0, 0);
   }
@@ -87,11 +85,9 @@
     .header-title {
       margin-top: 50px !important;
     }
-
   }
 }
 
-/* Medium devices (tablets, 768px and up) */
 @media (min-width: 768px) and (max-width: 991px) {
   .image-section {
     @include image-section-position(697px, 225px, 0, 0);
@@ -103,13 +99,10 @@
     .header-title {
       margin-top: 50px !important;
     }
-
   }
 }
 
-/* Large devices (desktops, 992px and up) */
-@media (min-width: 992px) and (max-width: 1199px){
-
+@media (min-width: 992px) and (max-width: 1199px) {
   .image-section {
     @include image-section-position(800px, 220px, 0, 0);
   }
@@ -117,10 +110,8 @@
   .description-section {
     @include description-section-image-position(1003px, 0, 0);
   }
-
 }
 
-/* Extra large devices (large desktops, 1200px and up) */
 @media (min-width: 1200px) {
   .image-section {
     @include image-section-position(1077px, 280px, 0, 0);
@@ -129,4 +120,5 @@
   .description-section {
     @include description-section-image-position(1003px, 0, 0);
   }
-}
\ No newline at end of file
+}
+ 
diff --git a/src/scss/partials/_page_section.scss b/src/scss/partials/_page_section.scss
index 3b445ba6..f4e2b17b 100755
--- a/src/scss/partials/_page_section.scss
+++ b/src/scss/partials/_page_section.scss
@@ -1,40 +1,55 @@
 .page-section {
   margin: 70px 0;
   padding: 40px 25px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 
   img.img {
     width: 100%;
+    height: auto;
+    display: block;
+    border-radius: 6px;
   }
 
   span.note {
-    color: #828282;
-    font-size: 18px;
+    display: block;
+    color: #6c757d;
+    font-size: 16px;
+    margin-bottom: 8px;
   }
 
   h3 {
-    font-size: 28px;
-    margin-top: 5px;
+    font-size: 26px;
+    font-weight: 600;
+    color: #2c3e50;
+    margin: 10px 0;
   }
 
   .section-content {
-    color: #303030;
-    font-size: 16px;
+    color: #4a4a4a;
+    font-size: 15px;
+    line-height: 1.6;
   }
 }
 
 .gray-section {
-  background-color: #f2f3f5;
+  background-color: #f5f6f8;
   border-radius: 10px;
+  padding: 20px;
 }
 
 .bordered-section {
-  border: 1px solid #c3c6cd;
+  border: 1px solid #d1d5db;
   border-radius: 10px;
+  padding: 20px;
 }
 
-// Medium devices (tablets, 768px and up)
+/* Medium devices (tablets, 768px and up) */
 @media (min-width: 768px) {
   .page-section {
-    margin: 70px 0;
+    margin: 90px 0;
+    padding: 60px 40px;
   }
-}
\ No newline at end of file
+}
+ 
diff --git a/src/scss/partials/_page_title.scss b/src/scss/partials/_page_title.scss
index bb3b13bd..34fe0542 100755
--- a/src/scss/partials/_page_title.scss
+++ b/src/scss/partials/_page_title.scss
@@ -1,10 +1,18 @@
 .page-title {
-  color: #ffffff;
-  left: 0;
+  color: #fff;
   position: absolute;
-  background-image: linear-gradient(-135deg, #21254E 0%, #2B4A83 100%);  height: 80px;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 80px;
   font-size: 28px;
   text-align: center;
-  right: 0;
-  line-height: 2.9;
-}
\ No newline at end of file
+  line-height: 80px;
+  background: linear-gradient(-135deg, #21254E 0%, #2B4A83 100%);
+  padding: 0 20px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+ 
diff --git a/src/scss/responsive/_media.scss b/src/scss/responsive/_media.scss
index 8d2a8b18..3e847ae4 100755
--- a/src/scss/responsive/_media.scss
+++ b/src/scss/responsive/_media.scss
@@ -1,131 +1,49 @@
-// extra small
+/* Extra Small Devices (max-width: 575px) */
 @media (max-width: 575px) {
-  .hidden-xs {
-    display: none;
-  }
-
-  .xs-ta-center {
-    text-align: center !important;
-  }
-
-  .left-border {
-    border-left: none !important;
-  }
-
-  .right-border {
-    border-right: none !important;
-  }
-
-  .xs-visible {
-    display: block;
-  }
-
-  .xs-hidden {
-    display: none;
-  }
-
-  .p-r-50 {
-    padding-right: 20px !important;
-  }
-
-  .bg {
-    width: 100%;
-  }
+  .hidden-xs { display: none; }
+  .xs-ta-center { text-align: center !important; }
+  .left-border, .right-border { border-left: none !important; border-right: none !important; }
+  .xs-visible { display: block; }
+  .xs-hidden { display: none; }
+  .p-r-50 { padding-right: 20px !important; }
+  .bg { width: 100%; }
 }
 
-@media only screen and (min-width: 575px) {
-  .xs-visible {
-    display: none;
-  }
-  .xs-hidden {
-    display: block;
-  }
-
-  .p-r-50 {
-    padding-right: 20px !important;
-  }
-
-  .bg {
-    width: 100%;
-  }
+/* Smallest visible breakpoint (min-width: 575px) */
+@media (min-width: 575px) {
+  .xs-visible { display: none; }
+  .xs-hidden { display: block; }
+  .p-r-50 { padding-right: 20px !important; }
+  .bg { width: 100%; }
 }
 
-// Small devices (landscape phones, 576px and up)
-@media (min-width: 576px)  and (max-width: 767px){
-  .content {
-    width: auto;
-  }
-
-  .hidden-sm {
-    display: none;
-  }
-
-  .sm-ta-center {
-    text-align: center !important;
-  }
-
-  .left-border {
-    border-left: none !important;
-  }
-
-  .right-border {
-    border-right: none !important;
-  }
-
-  .p-r-50 {
-    padding-right: 20px !important;
-  }
-
-  .bg {
-    width: 100%;
-  }
+/* Small Devices (576px to 767px) */
+@media (min-width: 576px) and (max-width: 767px) {
+  .content { width: auto; }
+  .hidden-sm { display: none; }
+  .sm-ta-center { text-align: center !important; }
+  .left-border, .right-border { border-left: none !important; border-right: none !important; }
+  .p-r-50 { padding-right: 20px !important; }
+  .bg { width: 100%; }
 }
 
-// Medium devices (tablets, 768px and up)
-@media (min-width: 768px)  and (max-width: 991px){
-  //.content {
-  //  width: 724px;
-  //}
-
-  .hidden-md {
-    display: none;
-  }
-
-  .md-ta-center {
-    text-align: center !important;
-  }
-
-  .left-border {
-    border-left: none !important;
-  }
-
-  .right-border {
-    border-right: none !important;
-  }
-
-  .bg {
-    width: 100%;
-  }
+/* Medium Devices (768px to 991px) */
+@media (min-width: 768px) and (max-width: 991px) {
+  /* .content { width: 724px; } */
+  .hidden-md { display: none; }
+  .md-ta-center { text-align: center !important; }
+  .left-border, .right-border { border-left: none !important; border-right: none !important; }
+  .bg { width: 100%; }
 }
 
-// Large devices (desktops, 992px and up)
-@media (min-width: 992px) and (max-width: 1199px){
-  .content {
-    width: 940px;
-  }
-
-  .hidden-lg {
-    display: none;
-  }
+/* Large Devices (992px to 1199px) */
+@media (min-width: 992px) and (max-width: 1199px) {
+  .content { width: 940px; }
+  .hidden-lg { display: none; }
 }
 
-// Extra large devices (large desktops, 1200px and up)
+/* Extra Large Devices (1200px and up) */
 @media (min-width: 1200px) {
-  .content {
-    width: 1170px;
-  }
-
-  .hidden-xl {
-    display: none;
-  }
-}
\ No newline at end of file
+  .content { width: 1170px; }
+  .hidden-xl { display: none; }
+}
diff --git a/webpack.mix.js b/webpack.mix.js
index f3c180ad..8a88bf64 100755
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -1,105 +1,71 @@
-let mix = require('laravel-mix');
-mix.pug = require('laravel-mix-pug');
+const mix = require('laravel-mix');
+const path = require('path');
 const glob = require('glob');
+mix.pug = require('laravel-mix-pug');
 
-let baseUrl = '/';
-let assetsHash = '';
-if ('production' === process.env.NODE_ENV) {
-  baseUrl = '//cdn.zarinpal.com/home/v2/';
-  assetsHash = '?' + process.env.GIT_SHA;
-}
-
-function withMatrial(config) {
+const isProduction = process.env.NODE_ENV === 'production';
+const baseUrl = isProduction ? '//cdn.zarinpal.com/home/v2/' : '/';
+const assetsHash = isProduction ? `?${process.env.GIT_SHA}` : '';
 
-  config.includePaths = ['node_modules/', 'node_modules/@material/*'].map(
-    (d) => path.join(__dirname, d)).
-    map((g) => glob.sync(g)).
-    reduce((a, c) => a.concat(c), []);
+const withMaterial = (config) => {
+  config.includePaths = [
+    'node_modules/',
+    'node_modules/@material/*'
+  ].map((dir) => path.join(__dirname, dir))
+   .map((pattern) => glob.sync(pattern))
+   .flat();
   return config;
+};
+
+mix.setPublicPath('public/assets')
+   .setResourceRoot('../')
+
+   // JavaScript
+   .js('src/js/app.js', 'public/assets/js')
+   .js('src/js/merchants/app.js', 'public/assets/js/merchants')
+   .js('src/js/contact/app.js', 'public/assets/js/contact')
+   .js('src/js/pages/faq.js', 'public/assets/js/pages')
+
+   // Sass
+   .sass('src/scss/app.scss', 'public/assets/css')
+   .sass('src/scss/pages/pages_header.scss', 'public/assets/css')
 
-}
+   // Pug Templates
+   .pug('src/pug/**/*.pug', 'public', {
+     exludePath: 'src/pug/partials/',
+     seeds: 'src',
+     locals: {
+       lang: 'fa',
+       config: {
+         baseUrl,
+         assetsHash,
+       },
+     },
+   })
 
-mix.setPublicPath('public/assets').
-  setResourceRoot('../').
-  js('src/js/app.js', 'public/assets/js').
-  js('src/js/merchants/app.js', 'public/assets/js/merchants').
-  js('src/js/contact/app.js', 'public/assets/js/contact').
-  js('src/js/pages/faq.js', 'public/assets/js/pages').
-  sass('src/scss/app.scss', 'public/assets/css').
-  sass('src/scss/pages/pages_header.scss', 'public/assets/css').
-  pug('src/pug/**/*.pug', 'public', {
-    exludePath: 'src/pug/partials/',
-    seeds: 'src',
-    locals: {
-      lang: 'fa',
-      config: {
-        baseUrl: baseUrl,
-        assetsHash: assetsHash,
-      },
-    },
-  })
-  // .pug('src/pug/*.pug', 'public', {
-  //     seeds: 'public',
-  //     locals: {
-  //         lang: 'en'
-  //     }
-  // })
-  .copy('src/images/app', 'public/assets/images').
-  copy('src/images/about_us', 'public/assets/images/about_us').
-  copy('src/images/pages', 'public/assets/images').
-  copy('src/images/banks', 'public/assets/images/banks').
-  copy('src/images/favicon', 'public/icons').
-  sourceMaps();
+   // Static Assets
+   .copy('src/images/app', 'public/assets/images')
+   .copy('src/images/about_us', 'public/assets/images/about_us')
+   .copy('src/images/pages', 'public/assets/images')
+   .copy('src/images/banks', 'public/assets/images/banks')
+   .copy('src/images/favicon', 'public/icons')
 
-/*
- |--------------------------------------------------------------------------
- | Mix Asset Management
- |--------------------------------------------------------------------------
- |
- | Mix provides a clean, fluent API for defining some Webpack build steps
- | for your Laravel application. By default, we are compiling the Sass
- | file for your application, as well as bundling up your JS files.
- |
- */
+   // Source Maps
+   .sourceMaps();
 
-mix.browserSync(({
+mix.browserSync({
   proxy: false,
-  port: '8000',
-  server: {baseDir: './public'}, // this is the only difference
-}));
-// mix.browserSync('http://new.zarinpal.test');
+  port: 8000,
+  server: {
+    baseDir: './public',
+  },
+});
 
-// Full API
-// mix.js(src, output);
-// mix.react(src, output); <-- Identical to mix.js(), but registers React Babel compilation.
-// mix.ts(src, output); <-- Requires tsconfig.json to exist in the same folder as webpack.mix.js
-// mix.extract(vendorLibs);
-// mix.sass(src, output);
-// mix.standaloneSass('src', output); <-- Faster, but isolated from Webpack.
-// mix.fastSass('src', output); <-- Alias for mix.standaloneSass().
-// mix.less(src, output);
-// mix.stylus(src, output);
-// mix.postCss(src, output, [require('postcss-some-plugin')()]);
-// mix.browserSync('my-site.dev');
-// mix.combine(files, destination);
-// mix.babel(files, destination); <-- Identical to mix.combine(), but also includes Babel compilation.
-// mix.copy(from, to);
-// mix.copyDirectory(fromDir, toDir);
-// mix.minify(file);
-// mix.sourceMaps(); // Enable sourcemaps
-// mix.version(); // Enable versioning.
-// mix.disableNotifications();
-// mix.setPublicPath('path/to/public');
-// mix.setResourceRoot('prefix/for/resource/locators');
-// mix.autoload({}); <-- Will be passed to Webpack's ProvidePlugin.
-// mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly.
-// mix.babelConfig({}); <-- Merge extra Babel configuration (plugins, etc.) with Mix's default.
-// mix.then(function () {}) <-- Will be triggered each time Webpack finishes building.
-// mix.options({
-//   extractVueStyles: false, // Extract .vue component styling to file, rather than inline.
-//   globalVueStyles: file, // Variables file to be imported in every component.
-//   processCssUrls: true, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
-//   purifyCss: false, // Remove unused CSS selectors.
-//   uglify: {}, // Uglify-specific options. https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
-//   postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md
+// Example alternative setup for English language (commented out)
+// mix.pug('src/pug/*.pug', 'public', {
+//   seeds: 'public',
+//   locals: {
+//     lang: 'en'
+//   }
 // });
+