@media (max-width: 1200px) {
    body {
        padding-top: 148px;
    }
    #header {
        & .top .button-primary {
            display: none;
        }

        & .top .navbar-2 {
            position: fixed;
      bottom: 0;
      left: 0;
      background-color: #fff;
      width: 100%;
      height: 100%;
      z-index: 10;
      padding-top: 148px;
      gap: 0;
      display: none;
      a {
        display: flex;
        width: 100%;
        height: calc(100% / 5);
        justify-content: center;
        align-items: center;
        border-top: solid 1px #e7e7e7;
        font-size: 20px;
      }
        }

         & .top .navbar-2.open {

            display: flex;
         }

        & .top .navbar .div {
            justify-content: space-between;
            z-index: 20;
            position: relative;
        }
        & .top .container {
            z-index: 100;
            position: relative;
        }

         & .top .logo {
            z-index: 20;
         }
         & .top {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 100;
         }
    }

    #home {
        & .app .container {
            position: relative;
        }

        & .app .div {
            height: auto;
            position: relative;
            padding-top: 75px;
        }

         & .app .container-2 {
            transform: translateY(0);
            width: 100%;
            padding: 0 16px;
         }

         & .app .text-wrapper,
         & .app .span {
            font-size: 36px;
            line-height: 40px;
         }

         & .app .text-wrapper br {
            display: none;
         }

          & .app .button-primary,
          & .app .button-outline {
            width: 100%;
        }

         & .app .link {
            margin-top: 16px;
         }

          & .app .container {
            height: auto;
            padding-bottom: 80px;
          }

          & .app .image-geodeta-ze {
            display: none;
          }

           & .app .section {
            min-height: auto;
            background-image: url(https://c.animaapp.com/w100T5Hd/img/image--geodeta-ze-statywem-pomiarowym-w-terenie-na--l-sku-cieszy.png);
      background-size: cover;
      background-position: 50% 50%;
           }

        & .app .container-9 {
            width: 100%;
        }
        & .app .container-22 {
            width: 100%;
        }
        & .app .text-wrapper-13 {
            white-space: normal;
        }
        & .app .button-light,
        & .app .button-wrapper {
            width: 100%;
            height: 45.5px
        }
        & .app .container-19 {
            display: none;
        }
        & .app .do-wiadczenie-na-kt-2,
        & .app .text-wrapper-3 {
            white-space: normal;
        }
        & .app .article,
        & .app .article-2,
        & .app .article-3 {
            flex: none;
        }
        & .app .container-11 {
            margin: auto;
        }
        & .app .container-14 {
            width: min(1280px, calc(100% - 32px));
        }
    }

    #geodezja {
         & .service-page .button-primary {
            width: 100%;
        }
        & .service-page .link {
            margin-top: 16px;
        }
        & .service-page .text-wrapper-7 {
            white-space: normal;
        }
        & .service-page .container-14 {
            padding: 0 16px;
        }
        & .service-page .container-7 .container-14 {
                padding: 0 0px !important;
        }
        & .service-page .button-light,
        & .service-page .button-outline {
            width: 100%;
        }
        & .service-page .frame-4 {
            height: auto;
        }
        & .service-page .container-17 {
            padding: 0 16px 0 16px;
        }
        & .service-page .container-19,
        & .service-page .container-7,
        & .service-page .container-4,
         & .service-page .div {
            width: min(100% - 32px, 1280px) !important;
        }
            & .service-page .image-geodeta-ze {
            display: none;
         }
        & .service-page .div {
            height: auto;
            min-height: auto;
            padding: 80px 0 80px 0;
        }
        & .service-page .section {
            height: auto;
               background-image: url(https://c.animaapp.com/w100T5Hd/img/image--geodeta-ze-statywem-pomiarowym-w-terenie-na--l-sku-cieszy.png);
      background-size: cover;
      background-position: 50% 50%;
      min-height: auto;
        }
        & .service-page .container {
            position: relative;
            height: auto;
        }  
        & .service-page .container-3 {
            width: 100%;
        }
        
    }

    #skaning {
         & .service-page .button-primary {
            width: 100%;
        }
        & .service-page .link {
            margin-top: 16px;
        }
         & .service-page .text-wrapper-4 {
            white-space: normal;
        }
        & .service-page .container-14 {
            padding: 0 16px;
        }
        & .service-page .container-7 .container-14 {
                padding: 0 0px !important;
        }
        & .service-page .button-light,
        & .service-page .button-outline {
            width: 100%;
        }
        & .service-page .frame-4 {
            height: auto;
        }
        & .service-page .container-17 {
            padding: 0 16px 0 16px;
        }
        & .service-page .container-19,
        & .service-page .container-7 {
            width: min(100% - 32px, 1280px) !important;
        }
        & .service-page .trzy-specjalizacje {
            padding: 0 32px;
        }
         & .service-page .div,
         .service-page .container,
         & .service-page .section {
            min-height: auto;
         }
         & .service-page .image-geodeta-ze {
            background: none;
            min-height: auto;
         }

         & .service-page .section {
         background-image: url(https://c.animaapp.com/w100T5Hd/img/image--geodeta-ze-statywem-pomiarowym-w-terenie-na--l-sku-cieszy.png);
      background-size: cover;
      background-position: 50% 50%;
         }

         & .service-page .container {
            position: relative;
            padding: 80px 0;
            
         }

         & .service-page .container-4,
          & .service-page .div {
            width: calc(100% - 32px);
         }
         & .service-page .container-3 {
            width: 100%;
        }
    }

        #wykrywanie {
         & .service-page .button-primary {
            width: 100%;
        }
        & .service-page .link {
            margin-top: 16px;
        }
         & .service-page .text-wrapper-4 {
            white-space: normal;
        }
        & .service-page .container-14 {
            padding: 0 16px;
        }
        & .service-page .container-7 .container-14 {
                padding: 0 0px !important;
        }
        & .service-page .button-light,
        & .service-page .button-outline {
            width: 100%;
        }
        & .service-page .frame-4 {
            height: auto;
        }
        & .service-page .container-17 {
            padding: 0 16px 0 16px;
        }
        & .service-page .container-19,
        & .service-page .container-7 {
            width: min(100% - 32px, 1280px) !important;
        }
        & .service-page .trzy-specjalizacje {
            padding: 0 32px;
        }
         & .service-page .image-geodeta-ze {
            display: none;
         }
        & .service-page .div {
            height: auto;
            padding: 80px 0 80px 0;
        }
        & .service-page .section {
            height: auto;
               background-image: url(https://c.animaapp.com/w100T5Hd/img/image--geodeta-ze-statywem-pomiarowym-w-terenie-na--l-sku-cieszy.png);
      background-size: cover;
      background-position: 50% 50%;
        }
        & .service-page .container {
            position: relative;
            height: auto;
        }   
        & .service-page .container-3 {
            width: 100%;
        }
    }

    #footer {
        & .footer .container,
        & .footer .container-3 {
            width: calc(100% - 32px);
        }
    }
}