diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 1dc47f6a..08635955 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -5,9 +5,26 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="b9871119-7d48-43df-9f66-6fd91d65a1cb" name="Changes" comment="no index">
+      <change afterPath="$PROJECT_DIR$/sass/variables/media.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/static/robots.txt" beforeDir="false" afterPath="$PROJECT_DIR$/templates/robots.txt" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/common/footer.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/common/footer.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/common/header.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/common/header.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/component/animation.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/component/animation.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/component/buttons.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/component/buttons.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/global/index.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/global/index.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/main.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/main.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/pages/home.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/pages/home.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/variables/color-theme.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/variables/color-theme.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/variables/fonts.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/variables/fonts.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/variables/images.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/variables/images.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/sass/variables/spasing.scss" beforeDir="false" afterPath="$PROJECT_DIR$/sass/variables/spasing.scss" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/templates/base.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/base.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/templates/common/header.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/common/header.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/templates/section/home-services.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/section/home-services.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/templates/shortcodes/animation-section-js.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/shortcodes/animation-section-js.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/templates/shortcodes/header-switch.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/shortcodes/header-switch.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/templates/shortcodes/paralax.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/shortcodes/paralax.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/templates/shortcodes/switch-theme.html" beforeDir="false" afterPath="$PROJECT_DIR$/templates/shortcodes/switch-theme.html" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -46,6 +63,7 @@
     "RunOnceActivity.OpenProjectViewOnStart": "true",
     "RunOnceActivity.ShowReadmeOnStart": "true",
     "WebServerToolWindowFactoryState": "false",
+    "git-widget-placeholder": "preprod",
     "last_opened_file_path": "E:/organicmaps.github.io/static/images",
     "node.js.detected.package.eslint": "true",
     "node.js.detected.package.stylelint": "true",
diff --git a/sass/common/footer.scss b/sass/common/footer.scss
index 234b98c2..ed0b1fda 100644
--- a/sass/common/footer.scss
+++ b/sass/common/footer.scss
@@ -1,11 +1,18 @@
+@import "../variables/media";
 .footer {
   background-color: var(--footer-bg);
   padding: 30rem 0;
+  @media (max-width: $media-md) {
+    padding: 48rem 0;
+  }
   &__description {
     color: var(--black-white);
   }
   &__logo {
     color: var(--common-green);
+    @media (max-width: $media-md) {
+     max-height: 40rem;
+    }
   }
   &__nav {
     border-top: 1rem solid var(--common-grey);
@@ -13,10 +20,27 @@
     justify-content: space-between;
     padding: 20rem 0;
     margin-top: 20rem;
+    @media (max-width: $media-md) {
+      margin-top: 32rem;
+      padding: 32rem 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 30rem;
+    }
+  }
+  &__nav-item {
+    @media (max-width: $media-md) {
+      display: flex;
+      flex-wrap: wrap;
+
+      justify-content: center;
+    }
   }
   &__link {
     text-decoration: none;
     color: var(--black-white);
+    padding: 8rem 16rem;
   }
   &__rw {
     display: grid;
@@ -25,5 +49,11 @@
     svg {
       width: 100%;
     }
+    @media (max-width: $media-md) {
+      grid-template-columns: 1fr;
+      align-items: center;
+      text-align: center;
+      gap: 30rem;
+    }
   }
 }
\ No newline at end of file
diff --git a/sass/common/header.scss b/sass/common/header.scss
index 9cfcc6eb..e11a8d61 100644
--- a/sass/common/header.scss
+++ b/sass/common/header.scss
@@ -1,3 +1,5 @@
+@import "../variables/media";
+
 .header {
   position: fixed;
   left: 0;
@@ -5,10 +7,14 @@
   width: 100%;
   padding: 14rem 0;
   z-index: 100;
+  @media (max-width: $media-md) {
+    background-color: var(--common-green-primery);
+  }
   &__container {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    position: relative;
   }
   &__link a{
     text-decoration: none;
@@ -16,15 +22,61 @@
     color: var(--common-white);
     cursor: pointer;
     padding: 8rem 16rem;
+    @media (max-width: $media-md) {
+      color: var(--common-black);
+    }
   }
 
   &__logo {
     color: var(--common-white);
+    @media (max-width: $media-md) {
+      color: var(--common-green);
+    }
   }
   &__row {
- display: flex;
+    display: flex;
     justify-content: space-between;
     align-items: center;
+
+    @media (max-width: $media-md) {
+      position: absolute;
+      background-color: var(--common-green-primery);
+      top: 55rem;
+      width: 100%;
+      left: -500rem;
+      padding: 16rem 0;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      gap: 16rem;
+      text-transform: uppercase;
+      z-index: 80;
+      transition:left var(--transition), opacity var(--transition);
+
+      &.is-active {
+        left: 0;
+        opacity: 80;
+      }
+    }
+  }
+  &__btn {
+    @media (max-width: $media-md) {
+      margin-left: auto;
+      .button--main {
+        padding: 8rem 12rem;
+        min-width:107rem;
+      }
+    }
+  }
+  &__menu-btn {
+    display: none;
+    @media (max-width: $media-md) {
+     display: block;
+     padding:  8rem 0 8rem 8rem ;
+      margin-left: 20rem;
+      display: flex;
+      align-items: center;
+    }
   }
   &--green {
     background-color: var(--common-green-primery);
diff --git a/sass/component/animation.scss b/sass/component/animation.scss
index 9864ec91..18dbbc12 100644
--- a/sass/component/animation.scss
+++ b/sass/component/animation.scss
@@ -1,52 +1,55 @@
-.animation {
-  &--right {
-    .animation-item {
-      left: 171rem!important;
-      opacity: 0!important;
-      transition: left var(--transition), opacity var(--transition);
+@import "../variables/media";
+@media (min-width: $media-md) {
+  .animation {
+    &--right {
+      .animation-item {
+        left: 171rem!important;
+        opacity: 0!important;
+        transition: left var(--transition), opacity var(--transition);
+      }
+
+    }
+    &--right-play {
+      .animation-item {
+        left: -20rem!important;
+        opacity: 1!important;
+        transition: left var(--transition), opacity var(--transition);
+      }
+
     }
 
-  }
-  &--right-play {
-    .animation-item {
-      left: -20rem!important;
-      opacity: 1!important;
-      transition: left var(--transition), opacity var(--transition);
+    &--left {
+      .animation-item {
+        right: 171rem!important;
+        opacity: 0!important;
+        transition: right var(--transition), opacity var(--transition);
+      }
+
+    }
+    &--left-play {
+      .animation-item {
+        right: -20rem!important;
+        opacity: 1!important;
+        transition: right var(--transition), opacity var(--transition);
+      }
+
     }
 
-  }
+    &--down {
+      .animation-item {
+        margin-bottom: -271rem!important;
+        opacity: 0!important;
+        transition: margin-bottom var(--transition), opacity var(--transition);
+      }
 
-  &--left {
-    .animation-item {
-      right: 171rem!important;
-      opacity: 0!important;
-      transition: right var(--transition), opacity var(--transition);
     }
+    &--down-play {
+      .animation-item {
+        margin-bottom: 0rem!important;
+        opacity: 1!important;
+        transition: margin-bottom var(--transition), opacity var(--transition);
+      }
 
-  }
-  &--left-play {
-    .animation-item {
-      right: -20rem!important;
-      opacity: 1!important;
-      transition: right var(--transition), opacity var(--transition);
     }
-
   }
-
-  &--down {
-    .animation-item {
-      margin-bottom: -271rem!important;
-      opacity: 0!important;
-      transition: margin-bottom var(--transition), opacity var(--transition);
-    }
-
-  }
-  &--down-play {
-    .animation-item {
-      margin-bottom: 0rem!important;
-      opacity: 1!important;
-      transition: margin-bottom var(--transition), opacity var(--transition);
-    }
-
-  }
-}
\ No newline at end of file
+}
diff --git a/sass/component/buttons.scss b/sass/component/buttons.scss
index ef52abf2..ea59c2d8 100644
--- a/sass/component/buttons.scss
+++ b/sass/component/buttons.scss
@@ -1,3 +1,4 @@
+@import "../variables/media";
 .button {
   width: fit-content;
   padding: 12rem 16rem;
diff --git a/sass/global/index.scss b/sass/global/index.scss
index a344d3e8..575c023f 100644
--- a/sass/global/index.scss
+++ b/sass/global/index.scss
@@ -1,3 +1,5 @@
+@import "../variables/media";
+
 html {
   font-size: 1px;
 }
@@ -11,5 +13,12 @@ body {
 .container {
   width: 100%;
   margin: 0 auto;
+  padding: 0 16rem;
   max-width: var(--container);
+}
+
+.logo .svg-logo {
+  @media(max-width: $media-md) {
+max-width: 130rem;
+  }
 }
\ No newline at end of file
diff --git a/sass/main.scss b/sass/main.scss
index cb6a266f..1a068bce 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -1,4 +1,5 @@
 /// Variables ///
+@import "./variables/media";
 @import "./variables/color-theme";
 @import "./variables/fonts";
 @import "./variables/spasing";
diff --git a/sass/pages/home.scss b/sass/pages/home.scss
index d88ad492..3eb62cd1 100644
--- a/sass/pages/home.scss
+++ b/sass/pages/home.scss
@@ -1,3 +1,4 @@
+@import "../variables/media";
 
 // Hero Section
 .hero {
@@ -9,15 +10,33 @@
   justify-content: center;
   position: relative;
 
+  @media (max-width: $media-md) {
+    background: url('/images/hero/hero-bg.jpg') center center / cover no-repeat cover;
+    min-height: auto;
+    padding: 120rem 0 51rem;
+  }
+
   &__container {
     display: flex;
     justify-content: flex-start;
     align-items: center;
     position: relative;
+    @media (max-width: $media-md) {
+     flex-direction: column;
+      justify-content: center;
+    }
   }
 
   &__content {
     max-width: 494rem;
+    z-index: 10;
+    @media (max-width: $media-md) {
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+margin-bottom: 35rem;
+    }
   }
 
   &__title {
@@ -33,6 +52,11 @@
     top: 50%;
     right: -20rem;
     transform: translateY(-50%);
+    @media (max-width: $media-md) {
+      position: static;
+      transform: none;
+      width: 100%;
+    }
   }
 }
 
@@ -44,18 +68,30 @@
   align-items: center;
   justify-content: center;
   min-height: 660rem;
+  @media (max-width: $media-md) {
+    min-height: auto;
+    padding: 40rem 0;
+    margin: 0;
+  }
   &__container {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     position: relative;
+    @media (max-width: $media-md) {
+      max-width: 150rem;
+    }
   }
   &__img {
     background: var(--map-section-icon) center center / cover no-repeat;
     width: 144rem;
     height: 144rem;
     margin-bottom: var(--mb-16);
+    @media (max-width: $media-md) {
+      max-width: 120rem;
+      max-height: 120rem;
+    }
   }
   &__title {
     margin-bottom: var(--mb-16);
@@ -64,56 +100,110 @@
     position: absolute;
     left: calc(50% - 25rem);
     top: calc(50% - 25rem);
+    @media (max-width: $media-md) {
+      border: var(--icon-border) solid var(--icon-border-green);
+      border-radius: 100rem;
+    }
     &:nth-child(1) {
       width: 96rem;
       left: calc(50% + 175rem);
       top: calc(50% - 85rem);
+      @media (max-width: $media-md) {
+        width: calc(30rem + var(--icon-border));
+        left: calc(50% - -95rem);
+        top: calc(50% - 59rem);
+      }
     }
     &:nth-child(2) {
       width: 72rem;
       left: calc(50% + 285rem);
       top: calc(50% - -45rem);
+      @media (max-width: $media-md) {
+        width: calc(22rem + var(--icon-border));
+        left: calc(50% - -135rem);
+        top: calc(50% - 6rem);
+      }
     }
     &:nth-child(3) {
       width: 96rem;
       left: calc(50% - 395rem);
       top: calc(50% + -86rem);
+      @media (max-width: $media-md) {
+        width: calc(30rem + var(--icon-border));
+        left: calc(50% - 125rem);
+        top: calc(50% - 59rem);
+      }
     }
     &:nth-child(4) {
       width: 72rem;
       left: calc(50% - 355rem);
       top: calc(50% - -74rem);
+      @media (max-width: $media-md) {
+        width: calc(22rem + var(--icon-border));
+        left: calc(50% - 165rem);
+        top: calc(50% + -6rem);
+      }
     }
     &:nth-child(5) {
       width: 80rem;
       left: calc(50% - -375rem);
       top: calc(50% + 153rem);
+      @media (max-width: $media-md) {
+        width: calc(25rem + var(--icon-border));
+        left: calc(50% - -89rem);
+        top: calc(50% + 43rem);
+
+      }
     }
     &:nth-child(6) {
       width: 64rem;
       left: calc(50% + 305rem);
       top: calc(50% + -217rem);
+      @media (max-width: $media-md) {
+        width: calc(20rem + var(--icon-border));
+        left: calc(50% + 136rem);
+        top: calc(50% - 105rem);
+      }
     }
     &:nth-child(7) {
       width: 80rem;
       left: calc(50% + -275rem);
       top: calc(50% + 223rem);
+      @media (max-width: $media-md) {
+        width: calc(25rem + var(--icon-border));
+        left: calc(50% - 117rem);
+        top: calc(50% - -43rem);
+      }
     }
     &:nth-child(8) {
       width: 64rem;
       left: calc(50% - 195rem);
       top: calc(50% + -227rem);
+      @media (max-width: $media-md) {
+       width: calc(20rem + var(--icon-border));
+        left: calc(50% - 165rem);
+        top: calc(50% - 104rem);
+
+      }
     }
   }
 }
 
 // Services
 .services {
-
+  &__btn {
+    @media (max-width: $media-md) {
+      margin: 0 auto;
+    }
+  }
   &__container {
     padding: 50rem 40rem;
     border-radius: var(--border-r-24);
     background-color: var(--bg-green);
+    @media (max-width: $media-md) {
+      padding: var( --container-mob-section) var( --container-mob-padding);
+      border-radius: 0;
+    }
   }
   &__item {
     display: flex;
@@ -121,6 +211,13 @@
     padding-bottom: 60rem;
     gap: 50rem;
     margin-right: -50rem;
+    @media (max-width: $media-md) {
+      flex-direction: column-reverse;
+      margin-right: 0;
+      gap: 40rem;
+      text-align: center;
+      padding-bottom: 120rem;
+    }
     &:nth-child(2n) {
       flex-direction: row-reverse;
       margin-right: auto;
@@ -132,6 +229,13 @@
         left: auto;
         right: 0;
       }
+      @media (max-width: $media-md) {
+        flex-direction: column-reverse;
+        margin-left: 0;
+        .services__card {
+          justify-content: center;
+        }
+      }
     }
     &:last-child {
       padding-bottom: 0;
@@ -147,12 +251,20 @@
   &__description {
     margin: 24rem 0;
   }
+
   &__card {
     position: relative;
     flex-grow: 1;
     display: flex;
     justify-content: flex-end;
     overflow: hidden;
+    @media (max-width: $media-md) {
+      width: 100%;
+    display: flex;
+      align-items: center;
+      flex-direction: row-reverse;
+      justify-content: center;
+    }
   }
   &__button {
     position: absolute;
@@ -164,6 +276,11 @@
   &__img {
     padding: 20rem;
     z-index: 3;
+    @media (max-width: $media-md) {
+      max-width: 140rem;
+      max-height: 240rem;
+      padding: 0;
+    }
     &--first {
       object-fit: cover;
       z-index: 1;
@@ -173,6 +290,13 @@
       top: 50%;
       left: -19rem;
       transform: translateY(-50%);
+      @media (max-width: $media-md) {
+        position: static;
+        transform: none;
+        max-width: 190rem;
+        max-height: 190rem;
+        margin-left: -60rem;
+      }
     }
   }
 }
@@ -181,19 +305,38 @@
 .single-section {
 margin: 60rem 0;
   overflow: hidden;
+  @media (max-width: $media-md) {
+    padding: var( --container-mob-section) 0;
+    margin:0;
+  }
   &__container {
     padding: 0rem 40rem 0;
     border-radius: var(--border-r-24);
     background-color: var(--bg-green);
+    @media (max-width: $media-md) {
+      padding: var(--container-mob-section) var(--container-mob-padding) 0;
+    }
   }
   &__item {
     display: flex;
     align-items: flex-end;
     gap: 50rem;
+    @media (max-width: $media-md) {
+      gap: 20rem;
+      flex-direction: column;
+    }
   }
   &__content {
     max-width: 498rem;
     padding: 90rem 0;
+    @media (max-width: $media-md) {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+    }
   }
   &__title {
     max-width: 357rem;
@@ -207,11 +350,14 @@ margin: 60rem 0;
     display: flex;
     justify-content: flex-end;
     overflow: hidden;
+    @media (max-width: $media-md) {
+      justify-content: center;
+    }
   }
 
   &__img {
     padding: 0;
     z-index: 3;
-    width: 90%;
+    width: 100%;
   }
 }
diff --git a/sass/variables/color-theme.scss b/sass/variables/color-theme.scss
index bc1963b4..cf475982 100644
--- a/sass/variables/color-theme.scss
+++ b/sass/variables/color-theme.scss
@@ -18,6 +18,7 @@
   --bg-green: #E5F0EB;
   --footer-bg: #F5F5F5;
   --green-button: var(--common-green);
+  --icon-border-green: #66A686;
 }
 
 .dark {
@@ -28,4 +29,5 @@
   --bg-green: #33453D;
   --footer-bg: var(--common-black);
   --green-button: #BBD7A7;
+  --icon-border-green: var(--common-white);
 }
\ No newline at end of file
diff --git a/sass/variables/fonts.scss b/sass/variables/fonts.scss
index eb35274d..5a0f9518 100644
--- a/sass/variables/fonts.scss
+++ b/sass/variables/fonts.scss
@@ -1,5 +1,6 @@
 //font-family: 'Inter', sans-serif;
 //font-family: 'Lato', sans-serif;
+@import "../variables/media";
 :root {
   --main-font: 'Inter', sans-serif;
   --sub-fonst: 'Lato', sans-serif;
@@ -13,6 +14,19 @@
   --nav-link: 500 16rem/28rem var(--main-font);
 }
 
+@media (max-width: $media-md) {
+  :root {
+
+    --h1: 300 36rem/normal var(--sub-fonst);
+    --h1-sub: 400 18rem/32rem var(--main-font);
+    --p: 300 18rem/28rem var(--main-font);
+    --p-md: 400 16rem/28rem var(--main-font);
+    --p-sm: 500 14rem/28rem var(--main-font);
+    --p-sub: 300 12rem/28rem var(--main-font);
+    --nav-link: 500 13rem/24rem var(--main-font);
+  }
+}
+
 // Title
 .h1{
   font: var(--h1);
diff --git a/sass/variables/images.scss b/sass/variables/images.scss
index 91efb292..09439094 100644
--- a/sass/variables/images.scss
+++ b/sass/variables/images.scss
@@ -1,5 +1,6 @@
 :root {
-  --map-section-icon: url('images/open-map/open-map-logo.png');
+  --map-section-icon: url('/images/open-map/open-map-logo.png');
+
 }
 
 .light {
diff --git a/sass/variables/media.scss b/sass/variables/media.scss
new file mode 100644
index 00000000..2cb4a4c1
--- /dev/null
+++ b/sass/variables/media.scss
@@ -0,0 +1,3 @@
+// Media sm: Mobile, md: Tablet, xl: Desktop
+$media-md: 991px;
+
diff --git a/sass/variables/spasing.scss b/sass/variables/spasing.scss
index 4ad50b10..b8bbee46 100644
--- a/sass/variables/spasing.scss
+++ b/sass/variables/spasing.scss
@@ -8,4 +8,9 @@
   --border-r-24: 24rem;
 
   --transition: 0.5s;
+
+  --icon-border: 2rem;
+
+  --container-mob-section: 60rem;
+  --container-mob-padding: 16rem;
 }
\ No newline at end of file
diff --git a/templates/base.html b/templates/base.html
index 650b67b4..31c350a8 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -10,17 +10,17 @@
 
 <head>
   <meta name="robots" content="noindex">
-  <script>
-    var password = "tutorial";
-    (function passcodeprotect() {
-      var passcode = prompt("Enter PassCode");
-      while (passcode !== admin) {
-        alert("Incorrect PassCode");
-        return passcodeprotect();
-      }
-    }());
-    alert('Welcome To The TP..!');
-  </script>
+<!--  <script>-->
+<!--    var password = "tutorial";-->
+<!--    (function passcodeprotect() {-->
+<!--      var passcode = prompt("Enter PassCode");-->
+<!--      while (passcode !== admin) {-->
+<!--        alert("Incorrect PassCode");-->
+<!--        return passcodeprotect();-->
+<!--      }-->
+<!--    }());-->
+<!--    alert('Welcome To The TP..!');-->
+<!--  </script>-->
   <meta charset="utf-8">
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
diff --git a/templates/common/header.html b/templates/common/header.html
index e59370ab..c13285e3 100644
--- a/templates/common/header.html
+++ b/templates/common/header.html
@@ -29,4 +29,9 @@
         <div class="header__btn">
             {% include 'components/download-button.html' %}
         </div>
+         <div class="header__menu-btn">
+             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                 <path fill-rule="evenodd" clip-rule="evenodd" d="M3 6C3 5.44772 3.44772 5 4 5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H4C3.44772 7 3 6.55228 3 6ZM3 12C3 11.4477 3.44772 11 4 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H4C3.44772 13 3 12.5523 3 12ZM3 18C3 17.4477 3.44772 17 4 17H20C20.5523 17 21 17.4477 21 18C21 18.5523 20.5523 19 20 19H4C3.44772 19 3 18.5523 3 18Z" fill="#26312C"/>
+             </svg>
+         </div>
 </div>
diff --git a/templates/section/home-services.html b/templates/section/home-services.html
index 02dad048..895e7e2f 100644
--- a/templates/section/home-services.html
+++ b/templates/section/home-services.html
@@ -10,7 +10,7 @@
                     See the place you want to go while in an underground parking garage, and navigate while on a distant
                     hike.
                 </p>
-                <a class="button button--transparent" href="#">
+                <a class="button button--transparent services__btn" href="#">
                     Learn more
                     {% include 'ui/btn-arrow.html' %}
                 </a>
@@ -18,7 +18,7 @@
             <div class="services__card">
                 <img class="services__img services__img--first animation-item" src="/images/sections/map-m-1.png">
                 <img class="services__img" src="/images/sections/map-s-1.png">
-                <a class="button button--card services__button" href="#">
+                <a class="button button--card services__button " href="#">
                     Learn more
                     {% include 'ui/btn-arrow.html' %}
                 </a>
@@ -35,7 +35,7 @@
                     See the place you want to go while in an underground parking garage, and navigate while on a distant
                     hike.
                 </p>
-                <a class="button button--transparent" href="#">
+                <a class="button button--transparent services__btn" href="#">
                     Learn more
                     {% include 'ui/btn-arrow.html' %}
                 </a>
@@ -60,7 +60,7 @@
                     See the place you want to go while in an underground parking garage, and navigate while on a distant
                     hike.
                 </p>
-                <a class="button button--transparent" href="#">
+                <a class="button button--transparent services__btn" href="#">
                     Learn more
                     {% include 'ui/btn-arrow.html' %}
                 </a>
diff --git a/templates/shortcodes/animation-section-js.html b/templates/shortcodes/animation-section-js.html
index 93311423..e86f853a 100644
--- a/templates/shortcodes/animation-section-js.html
+++ b/templates/shortcodes/animation-section-js.html
@@ -1,47 +1,52 @@
 <script>
+    if (window.matchMedia('(min-width: 991px)').matches) {
+        let targetElement = document.querySelectorAll('.animation');
 
+        if(targetElement){
+            targetElement.forEach(item => {
+                let observer = new IntersectionObserver(function(entries, observer) {
+                    entries.forEach(function(entry) {
+                        let animationRight = entry.target.className.includes('animation--right')
+                        let animationLeft = entry.target.className.includes('animation--left')
+                        let animationDown = entry.target.className.includes('animation--down')
+                        if (entry.isIntersecting) {
 
-    let targetElement = document.querySelectorAll('.animation');
+                            if(animationRight) {
+                                item.classList.add('animation--right-play');
+                            }
+                            if (animationLeft) {
+                                item.classList.add('animation--left-play');
+                            }
 
-    if(targetElement){
-        targetElement.forEach(item => {
-            let observer = new IntersectionObserver(function(entries, observer) {
-                entries.forEach(function(entry) {
-                    let animationRight = entry.target.className.includes('animation--right')
-                    let animationLeft = entry.target.className.includes('animation--left')
-                    let animationDown = entry.target.className.includes('animation--down')
-                    if (entry.isIntersecting) {
+                            if (animationDown) {
+                                item.classList.add('animation--down-play');
+                            }
 
-                        if(animationRight) {
-                            item.classList.add('animation--right-play');
+                        } else {
+                            if(animationRight) {
+                                item.classList.remove('animation--right-play');
+                            }
+                            if (animationLeft) {
+                                item.classList.remove('animation--left-play');
+                            }
+                            if (animationDown) {
+                                item.classList.remove('animation--down-play');
+                            }
                         }
-                        if (animationLeft) {
-                            item.classList.add('animation--left-play');
-                        }
-
-                        if (animationDown) {
-                            item.classList.add('animation--down-play');
-                        }
-
-                    } else {
-                        if(animationRight) {
-                            item.classList.remove('animation--right-play');
-                        }
-                        if (animationLeft) {
-                            item.classList.remove('animation--left-play');
-                        }
-                        if (animationDown) {
-                            item.classList.remove('animation--down-play');
-                        }
-                    }
-                });
-            }, { threshold: 0.3 });
+                    });
+                }, { threshold: 0.3 });
 
 
-            observer.observe(item);
-        })
+                observer.observe(item);
+            })
 
+        }
+    } else {
+
+        console.log('Mobile');
     }
 
 
+
+
 </script>
\ No newline at end of file
diff --git a/templates/shortcodes/header-switch.html b/templates/shortcodes/header-switch.html
index a90e248f..547593d6 100644
--- a/templates/shortcodes/header-switch.html
+++ b/templates/shortcodes/header-switch.html
@@ -1,17 +1,29 @@
 <script>
+    if (window.matchMedia('(min-width: 991px)').matches) {
+        const element = document.querySelector('.header')
 
-    const element = document.querySelector('.header')
+        const scrollThreshold = 20;
 
-    const scrollThreshold = 20;
+        window.addEventListener('scroll', function () {
 
-    window.addEventListener('scroll', function () {
+            let scrollPosition = window.scrollY || window.pageYOffset;
 
-        let scrollPosition = window.scrollY || window.pageYOffset;
+            if (scrollPosition > scrollThreshold) {
+                element.classList.add('header--green');
+            } else {
+                element.classList.remove('header--green');
+            }
+        });
+    } else {
+       const mobIcon = document.querySelector(".header__menu-btn")
+        const menu = document.querySelector('.header__row')
+        const wrapper = document.querySelector('.wrapper')
+
+        mobIcon.addEventListener('click', () => {
+            mobIcon.classList.toggle('is-active')
+            menu.classList.toggle('is-active')
+            wrapper.classList.toggle('frizz')
+        })
+    }
 
-        if (scrollPosition > scrollThreshold) {
-            element.classList.add('header--green');
-        } else {
-            element.classList.remove('header--green');
-        }
-    });
 </script>
\ No newline at end of file
diff --git a/templates/shortcodes/paralax.html b/templates/shortcodes/paralax.html
index 0b456cf7..ef5d5f09 100644
--- a/templates/shortcodes/paralax.html
+++ b/templates/shortcodes/paralax.html
@@ -1,56 +1,65 @@
 <script>
-    let options = {
-        root: null,
-        rootMargin: '0px',
-        threshold: 0.5
-    };
 
-    let lastScrollTop = 0;
-    let yPos = 0;
+    if (window.matchMedia('(min-width: 991px)').matches) {
+        try {
+            let options = {
+                root: null,
+                rootMargin: '0px',
+                threshold: 0.5
+            };
 
-    document.addEventListener("scroll", function onScroll() {
-        let scrollTop = window.scrollY;
+            let lastScrollTop = 0;
+            let yPos = 0;
 
-        if (scrollTop > lastScrollTop) {
-            console.log("Прокрутка вниз");
-            if (yPos < 100) {
-                yPos = yPos + 1;
-                console.log(yPos);
-            }
-        } else if (scrollTop < lastScrollTop) {
-            console.log("Прокрутка верх");
-            if (yPos > 0 && yPos <= 100) {
-                yPos = yPos - 1;
-                console.log(yPos);
-            }
-        } else {
-            console.log("Прокрутка не изменилась");
-        }
+            document.addEventListener("scroll", function onScroll() {
+                let scrollTop = window.scrollY;
 
-        lastScrollTop = scrollTop;
+                if (scrollTop > lastScrollTop) {
 
-        let observer = new IntersectionObserver(function(entries, observer) {
-            entries.forEach(function(entry) {
-                if (entry.isIntersecting) {
-                    let parallaxLayers = entry.target.querySelectorAll(".open-map__icon");
+                    if (yPos < 100) {
+                        yPos = yPos + 1;
+                        console.log(yPos);
+                    }
+                } else if (scrollTop < lastScrollTop) {
 
-                    parallaxLayers.forEach(function(layer, index) {
-                        let speed = 1 * (index + 1);
-                        layer.style.transform = `translateY(${yPos / speed}px)`;
-                    });
+                    if (yPos > 0 && yPos <= 100) {
+                        yPos = yPos - 1;
 
-                    observer.unobserve(entry.target);
+                    }
+                } else {
+                    console.log('er');
                 }
+
+                lastScrollTop = scrollTop;
+
+                let observer = new IntersectionObserver(function(entries, observer) {
+                    entries.forEach(function(entry) {
+                        if (entry.isIntersecting) {
+                            let parallaxLayers = entry.target.querySelectorAll(".open-map__icon");
+
+                            parallaxLayers.forEach(function(layer, index) {
+                                let speed = 1 * (index + 1);
+                                layer.style.transform = `translateY(${yPos / speed}px)`;
+                            });
+
+                            observer.unobserve(entry.target);
+                        }
+                    });
+                }, options);
+
+                let sections = document.querySelectorAll('.open-map');
+
+                sections.forEach(function(section) {
+                    observer.observe(section);
+                });
             });
-        }, options);
-
-        let sections = document.querySelectorAll('.open-map');
-
-        sections.forEach(function(section) {
-            observer.observe(section);
-        });
-    });
+        } catch (err) {
+            console.log(err)
+        }
+    } else {
 
+        console.log('mobile');
+    }
 
 
 </script>
\ No newline at end of file
diff --git a/templates/shortcodes/switch-theme.html b/templates/shortcodes/switch-theme.html
index fdcb365d..5429b717 100644
--- a/templates/shortcodes/switch-theme.html
+++ b/templates/shortcodes/switch-theme.html
@@ -1,5 +1,4 @@
 <script>
-
     document.addEventListener('DOMContentLoaded', function () {
         const switchTheme = document.querySelector('.switch-theme');
         let activeCheck = localStorage.getItem('switchTheme') === 'true';
@@ -66,4 +65,5 @@
         }
     });
 
+
 </script>
\ No newline at end of file