#home {
    .app {
  display: flex;
  flex-direction: column;
  width: 1512px;
  align-items: flex-start;
  position: relative;
  background-color: var(--white);
}

.app .section {
  height: 640px;
  align-items: flex-start;
  gap: 10px;
  background-color: var(--midnight);
  display: flex;
  flex-direction: column;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.app .image-geodeta-ze {
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  flex-grow: 1;
  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 {
  position: absolute;
  top: 0;
  left: 0;
  width: 1512px;
  height: 640px;
  background: linear-gradient(
    90deg,
    rgba(26, 39, 52, 1) 0%,
    rgba(26, 39, 52, 0.85) 50%,
    rgba(26, 39, 52, 0.4) 100%
  );
}

.app .div {
  position: absolute;
  top: 0;
  left: 0;
  width: 1512px;
  height: 640px;
  background-color: var(--midnight-25);
}

.app .container-2 {
  display: flex;
  flex-direction: column;
  width: 737px;
  align-items: flex-start;
  gap: 32px;
  position: absolute;
  top: calc(50.00% - 148px);
  left: 116px;
}

.app .frame {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app .geodezja-i-skaning {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--h1-font-family);
  font-weight: var(--h1-font-weight);
  color: transparent;
  font-size: var(--h1-font-size);
  letter-spacing: var(--h1-letter-spacing);
  line-height: var(--h1-line-height);
  font-style: var(--h1-font-style);
}

.app .text-wrapper {
  color: #ffffff;
  font-family: var(--h1-font-family);
  font-style: var(--h1-font-style);
  font-weight: var(--h1-font-weight);
  letter-spacing: var(--h1-letter-spacing);
  line-height: var(--h1-line-height);
  font-size: var(--h1-font-size);
}

.app .span {
  color: #2abb9b;
  font-family: var(--h1-font-family);
  font-style: var(--h1-font-style);
  font-weight: var(--h1-font-weight);
  letter-spacing: var(--h1-letter-spacing);
  line-height: var(--h1-line-height);
  font-size: var(--h1-font-size);
}

.app .p {
  position: relative;
  align-self: stretch;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--white-75);
  font-size: var(--body-font-size);
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  font-style: var(--body-font-style);
}

.app .container-3 {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.app .button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--mint);
  border-radius: 6px;
}

.app .button {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--button-font-family);
  font-weight: var(--button-font-weight);
  color: var(--white);
  font-size: var(--button-font-size);
  letter-spacing: var(--button-letter-spacing);
  line-height: var(--button-line-height);
  font-style: var(--button-font-style);
}

.app .button-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--white-5);
  border-radius: 6px;
  border: 1px solid;
  border-color: var(--white-25);
}

.app .button-2 {
  position: relative;
  width: fit-content;
  font-family: var(--button-font-family);
  font-weight: var(--button-font-weight);
  color: var(--white);
  font-size: var(--button-font-size);
  letter-spacing: var(--button-letter-spacing);
  line-height: var(--button-line-height);
  font-style: var(--button-font-style);
}

.app .link {
  display: inline-flex;
  height: 44px;
  gap: 8px;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.app .text {
  display: grid;
  grid-template-columns: 42px;
  grid-template-rows: 42px;
  width: 44px;
  height: 44px;
}

.app .text-2 {
  display: flex;
  flex-direction: column;
  width: 88.53px;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  margin-top: -0.5px;
  margin-bottom: -0.5px;
}

.app .zadzwo {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--caption-font-family);
  font-weight: var(--caption-font-weight);
  color: var(--white-50);
  font-size: var(--caption-font-size);
  letter-spacing: var(--caption-letter-spacing);
  line-height: var(--caption-line-height);
  white-space: nowrap;
  font-style: var(--caption-font-style);
}

.app .text-wrapper-2 {
  margin-right: -0.47px;
  font-family: var(--h5-font-family);
  font-weight: var(--h5-font-weight);
  color: var(--white);
  font-size: var(--h5-font-size);
  line-height: var(--h5-line-height);
  position: relative;
  width: fit-content;
  letter-spacing: var(--h5-letter-spacing);
  font-style: var(--h5-font-style);
}

.app .container-wrapper {
  align-items: flex-start;
  padding: 80px 0px;
  flex: 0 0 auto;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.app .container-4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app .container-5 {
  display: flex;
  flex-direction: column;
  width: 628px;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.app .zakres-us-ug {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--caption-font-family);
  font-weight: var(--caption-font-weight);
  color: var(--mint);
  font-size: var(--caption-font-size);
  text-align: center;
  letter-spacing: var(--caption-letter-spacing);
  line-height: var(--caption-line-height);
  white-space: nowrap;
  font-style: var(--caption-font-style);
}

.app .div-2 {
  align-items: center;
  gap: 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app .text-wrapper-3 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--h2-font-family);
  font-weight: var(--h2-font-weight);
  color: var(--midnight);
  font-size: var(--h2-font-size);
  text-align: center;
  letter-spacing: var(--h2-letter-spacing);
  line-height: var(--h2-line-height);
  white-space: nowrap;
  font-style: var(--h2-font-style);
}

.app .kompleksowa-obs-uga {
  position: relative;
  align-self: stretch;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--slate);
  font-size: var(--body-font-size);
  text-align: center;
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  font-style: var(--body-font-style);
}

.app .container-6 {
  display: flex;
  width: 1280px;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.app .container-7 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 32px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  background-color: var(--white);
  border-radius: 16px;
  border: 1px solid;
  border-color: var(--mist);
}

.app .img {
  display: grid;
  grid-template-columns: 56px;
  grid-template-rows: 56px;
  width: 56px;
  height: 56px;
}

.app .text-wrapper-4 {
  font-family: var(--h3-font-family);
  font-weight: var(--h3-font-weight);
  color: var(--midnight);
  font-size: var(--h3-font-size);
  letter-spacing: var(--h3-letter-spacing);
  line-height: var(--h3-line-height);
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-style: var(--h3-font-style);
}

.app .text-wrapper-5 {
  position: relative;
  align-self: stretch;
  font-family: var(--body-2-font-family);
  font-weight: var(--body-2-font-weight);
  color: var(--slate);
  font-size: var(--body-2-font-size);
  letter-spacing: var(--body-2-letter-spacing);
  line-height: var(--body-2-line-height);
  font-style: var(--body-2-font-style);
}

.app .link-2 {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.app .text-wrapper-6 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--caption-font-family);
  font-weight: var(--caption-font-weight);
  color: var(--mint);
  font-size: var(--caption-font-size);
  letter-spacing: var(--caption-letter-spacing);
  line-height: var(--caption-line-height);
  white-space: nowrap;
  font-style: var(--caption-font-style);
}

.app .icon {
  position: relative;
  width: 14px;
  height: 14px;
}

.app .div-wrapper {
  align-items: center;
  padding: 80px 0px;
  flex: 0 0 auto;
  background-color: var(--frost);
  display: flex;
  flex-direction: column;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.app .container-8 {
  display: flex;
  max-width: 1280px;
  width: 1280px;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.app .image-instrument {
  position: relative;
  flex: 1;
  flex-grow: 1;
  height: 440px;
  border-radius: 16px;
  background-image: url(https://c.animaapp.com/w100T5Hd/img/image--instrument-geodezyjny-w-terenie-.png);
  background-size: cover;
  background-position: 50% 50%;
}

.app .container-9 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.app .do-wiadczenie-na-kt {
  position: relative;
  align-self: stretch;
  font-family: var(--h2-font-family);
  font-weight: var(--h2-font-weight);
  color: var(--midnight);
  font-size: var(--h2-font-size);
  letter-spacing: var(--h2-letter-spacing);
  line-height: var(--h2-line-height);
  font-style: var(--h2-font-style);
}

.app .frame-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app .GEO-GRAF-andrzej {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--midnight-light);
  font-size: var(--body-font-size);
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  font-style: var(--body-font-style);
}

.app .list {
  display: inline-flex;
  align-items: flex-start;
  gap: 32px;
  position: relative;
  flex: 0 0 auto;
}

.app .list-item {
  display: inline-flex;
  height: 24px;
  align-items: center;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.app .text-3 {
  display: grid;
  grid-template-columns: 24px;
  grid-template-rows: 24px;
  width: 24px;
  height: 24px;
}

.app .text-wrapper-7 {
  position: relative;
  width: fit-content;
  font-family: var(--body-3-font-family);
  font-weight: var(--body-3-font-weight);
  color: var(--midnight);
  font-size: var(--body-3-font-size);
  letter-spacing: var(--body-3-letter-spacing);
  line-height: var(--body-3-line-height);
  white-space: nowrap;
  font-style: var(--body-3-font-style);
}

.app .button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--midnight);
  border-radius: 6px;
}

.app .section-2 {
  align-items: center;
  padding: 80px 0px;
  flex: 0 0 auto;
  background-color: var(--white);
  display: flex;
  flex-direction: column;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.app .container-10 {
  display: flex;
  flex-direction: column;
  max-width: 1280px;
  align-items: center;
  gap: 40px;
  position: relative;
  width: 100%;
  flex: 0 0 auto;
}

.app .container-11 {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app .frame-wrapper {
  display: flex;
  flex-direction: column;
  width: 302px;
  height: 256px;
  align-items: flex-start;
  padding: 32px;
  position: relative;
  border-radius: 12px;
  border: 1px solid;
  border-color: var(--mist);
}

.app .div-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app .text-wrapper-8 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Chakra Petch", Helvetica;
  font-weight: 700;
  color: var(--mint-50);
  font-size: 30px;
  letter-spacing: 0;
  line-height: 36px;
  white-space: nowrap;
}

.app .text-wrapper-9 {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--h3-font-family);
  font-weight: var(--h3-font-weight);
  color: var(--midnight);
  font-size: var(--h3-font-size);
  letter-spacing: var(--h3-letter-spacing);
  line-height: var(--h3-line-height);
  font-style: var(--h3-font-style);
}

.app .container-12 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
  position: relative;
  flex: 1;
  flex-grow: 1;
  border-radius: 12px;
  border: 1px solid;
  border-color: var(--mist);
}

.app .container-13 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 32px;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
  border-radius: 12px;
  border: 1px solid;
  border-color: var(--mist);
}

.app .container-14 {
  display: flex;
  flex-direction: column;
  max-width: 1280px;
  width: 1280px;
  align-items: flex-start;
  gap: 40px;
  position: relative;
  flex: 0 0 auto;
}

.app .container-15 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app .frame-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.app .do-wiadczenie-na-kt-2 {
  width: fit-content;
  color: var(--midnight);
  white-space: nowrap;
  position: relative;
  font-family: var(--h2-font-family);
  font-weight: var(--h2-font-weight);
  font-size: var(--h2-font-size);
  letter-spacing: var(--h2-letter-spacing);
  line-height: var(--h2-line-height);
  font-style: var(--h2-font-style);
}

.app .div-4 {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.app .pill {
  display: inline-flex;
  flex-direction: column;
  height: 34px;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--mint);
  border-radius: 16px;
}

.app .pill-2 {
  position: relative;
  width: fit-content;
  font-family: var(--caption-font-family);
  font-weight: var(--caption-font-weight);
  color: var(--white);
  font-size: var(--caption-font-size);
  text-align: center;
  letter-spacing: var(--caption-letter-spacing);
  line-height: var(--caption-line-height);
  white-space: nowrap;
  font-style: var(--caption-font-style);
}

.app .pill-wrapper {
  display: inline-flex;
  flex-direction: column;
  height: 34px;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--white);
  border-radius: 16px;
  border: 1px solid;
  border-color: var(--mist);
}

.app .pill-3 {
  position: relative;
  width: fit-content;
  font-family: var(--caption-font-family);
  font-weight: var(--caption-font-weight);
  color: var(--slate);
  font-size: var(--caption-font-size);
  text-align: center;
  letter-spacing: var(--caption-letter-spacing);
  line-height: var(--caption-line-height);
  white-space: nowrap;
  font-style: var(--caption-font-style);
}

.app .frame-4 {
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app .article {
  flex: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: var(--white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--mist);
}

.app .container-16 {
  display: flex;
  flex-direction: column;
  height: 208px;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: var(--midnight);
}

.app .image-mapa-do-celw {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 208px;
  background-image: url(https://c.animaapp.com/w100T5Hd/img/image--mapa-do-cel-w-projektowych-@2x.png);
  background-size: cover;
  background-position: 50% 50%;
}

.app .text-4 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 4px 10px;
  position: absolute;
  top: 16px;
  left: 16px;
  background-color: var(--midnight-75);
  border-radius: 4px;
}

.app .container-17 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app .article-2 {
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: var(--white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--mist);
}

.app .image-inwentaryzacja {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 208px;
  background-image: url(https://c.animaapp.com/w100T5Hd/img/image--inwentaryzacja-powykonawcza-@2x.png);
  background-size: cover;
  background-position: 50% 50%;
}

.app .image-tyczenie {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 208px;
  background-image: url(https://c.animaapp.com/w100T5Hd/img/image--tyczenie-dzia-ki-@2x.png);
  background-size: cover;
  background-position: 50% 50%;
}

.app .frame-5 {
  display: flex;
  height: 339.5px;
  align-items: center;
  gap: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.app .article-3 {
  height: 339.5px;
  flex: 1;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: var(--white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--mist);
}

.app .image-podzia-dziaki {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 208px;
  background-image: url(https://c.animaapp.com/w100T5Hd/img/image--podzia--dzia-ki-@2x.png);
  background-size: cover;
  background-position: 50% 50%;
}

.app .container-18 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app .heading {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app .text-wrapper-10 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Chakra Petch", Helvetica;
  font-weight: 700;
  color: var(--midnight);
  font-size: 18px;
  letter-spacing: 0;
  line-height: 28px;
  white-space: nowrap;
}

.app .paragraph {
  height: 31px;
  display: flex;
  flex-direction: column;
  width: 344.66px;
  align-items: flex-start;
  padding: 8px 0px 0px;
  position: relative;
}

.app .text-wrapper-11 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Barlow", Helvetica;
  font-weight: 400;
  color: var(--slate);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 22.8px;
  white-space: nowrap;
}

.app .image-skaning-lidar {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 208px;
  background-image: url(https://c.animaapp.com/w100T5Hd/img/image--skaning-lidar-obiektu-@2x.png);
  background-size: cover;
  background-position: 50% 50%;
}

.app .image-pomiar-RTK-w {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 208px;
  background-image: url(https://c.animaapp.com/w100T5Hd/img/image--pomiar-rtk-w-terenie-@2x.png);
  background-size: cover;
  background-position: 50% 50%;
}

.app .paragraph-2 {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  width: 344.66px;
  align-items: flex-start;
  padding: 8px 0px 0px;
  position: relative;
}

.app .text-wrapper-12 {
  position: relative;
  width: 345px;
  margin-top: -1px;
  margin-right: -0.34px;
  font-family: "Barlow", Helvetica;
  font-weight: 400;
  color: var(--slate);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 22.8px;
}

.app .article-4 {
  width: 411px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: var(--white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--mist);
}

.app .image-lokalizacja {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 208px;
  background-image: url(https://c.animaapp.com/w100T5Hd/img/image--lokalizacja-instalacji-@2x.png);
  background-size: cover;
  background-position: 50% 50%;
}

.app .article-5 {
  width: 410px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  background-color: var(--white);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--mist);
}

.app .image-obsuga-wykopu {
  position: relative;
  align-self: stretch;
  width: 100%;
  height: 208px;
  background-image: url(https://c.animaapp.com/w100T5Hd/img/image--obs-uga-wykopu-@2x.png);
  background-size: cover;
  background-position: 50% 50%;
}

.app .container-margin-wrapper {
  align-items: flex-start;
  padding: 80px 0px;
  flex: 0 0 auto;
  background-color: var(--midnight);
  display: flex;
  flex-direction: column;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.app .container-margin {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app .do-wiadczenie-na-kt-3 {
  align-self: stretch;
  color: var(--white);
  position: relative;
  font-family: var(--h2-font-family);
  font-weight: var(--h2-font-weight);
  font-size: var(--h2-font-size);
  letter-spacing: var(--h2-letter-spacing);
  line-height: var(--h2-line-height);
  font-style: var(--h2-font-style);
}

.app .div-5 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.app .pill-4 {
  display: inline-flex;
  flex-direction: column;
  height: 34px;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 16px;
  border: 1px solid;
  border-color: var(--white-15);
}

.app .pill-5 {
  position: relative;
  width: fit-content;
  font-family: var(--caption-font-family);
  font-weight: var(--caption-font-weight);
  color: var(--white-75);
  font-size: var(--caption-font-size);
  text-align: center;
  letter-spacing: var(--caption-letter-spacing);
  line-height: var(--caption-line-height);
  white-space: nowrap;
  font-style: var(--caption-font-style);
}

.app .container-19 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--midnight);
  border-radius: 16px;
  overflow: hidden;
}

.app .image-mapa-obszaru {
  position: relative;
  width: 626px;
  height: 286px;
  border-radius: 16px;
  background-image: url(https://c.animaapp.com/w100T5Hd/img/image--mapa-obszaru-dzia-ania----l-sk-cieszy-ski--okolice-skoczo.png);
  background-size: cover;
  background-position: 50% 50%;
}

.app .l-sk-cieszy-ski-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 4px 10px;
  position: absolute;
  top: 252px;
  left: 13px;
  background-color: var(--midnight-75);
  border-radius: 4px;
}

.app .l-sk-cieszy-ski {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Chakra Petch", Helvetica;
  font-weight: 600;
  color: var(--mint);
  font-size: 10px;
  letter-spacing: 1.8px;
  line-height: 15px;
  white-space: nowrap;
}

.app .container-20 {
  display: flex;
  flex-direction: column;
  width: 1280px;
  align-items: flex-start;
  gap: 10px;
  padding: 48px 56px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--mint);
  border-radius: 16px;
  overflow: hidden;
}

.app .container-21 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app .container-22 {
  display: flex;
  flex-direction: column;
  width: 561.18px;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}

.app .text-wrapper-13 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--h2-font-family);
  font-weight: var(--h2-font-weight);
  color: var(--white);
  font-size: var(--h2-font-size);
  letter-spacing: var(--h2-letter-spacing);
  line-height: var(--h2-line-height);
  white-space: nowrap;
  font-style: var(--h2-font-style);
}

.app .napisz-lub-zadzwo {
  position: relative;
  width: fit-content;
  margin-right: -75.82px;
  font-family: var(--body-font-family);
  font-weight: var(--body-font-weight);
  color: var(--white-75);
  font-size: var(--body-font-size);
  letter-spacing: var(--body-letter-spacing);
  line-height: var(--body-line-height);
  white-space: nowrap;
  font-style: var(--body-font-style);
}

.app .frame-6 {
  display: inline-flex;
  height: 46px;
  align-items: center;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.app .button-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  position: relative;
  flex: 0 0 auto;
  background-color: var(--white);
  border-radius: 6px;
}

.app .button-3 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--button-font-family);
  font-weight: var(--button-font-weight);
  color: var(--mint);
  font-size: var(--button-font-size);
  letter-spacing: var(--button-letter-spacing);
  line-height: var(--button-line-height);
  font-style: var(--button-font-style);
}

.app .button-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  position: relative;
  flex: 0 0 auto;
  margin-top: -1px;
  margin-bottom: -1px;
  background-color: var(--white-5);
  border-radius: 6px;
  border: 1px solid;
  border-color: var(--white-25);
}

.app .container-23 {
  display: inline-flex;
  max-width: 1280px;
  align-items: flex-start;
  gap: 24px;
  position: relative;
  flex: 0 0 auto;
}

.app .container-24 {
  display: flex;
  flex-direction: column;
  width: 588px;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.app .link-3 {
  display: flex;
  gap: 16px;
  padding: 24px;
  align-self: stretch;
  width: 100%;
  background-color: var(--white);
  border-radius: 16px;
  border: 1px solid;
  border-color: var(--mist);
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}

.app .text-5 {
  display: grid;
  grid-template-columns: 48px;
  grid-template-rows: 48px;
  width: 48px;
  height: 48px;
}

.app .text-6 {
  display: flex;
  flex-direction: column;
  width: 88.53px;
  align-items: flex-start;
  gap: 8px;
  position: relative;
}

.app .text-wrapper-14 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--caption-font-family);
  font-weight: var(--caption-font-weight);
  color: var(--slate-75);
  font-size: var(--caption-font-size);
  letter-spacing: var(--caption-letter-spacing);
  line-height: var(--caption-line-height);
  white-space: nowrap;
  font-style: var(--caption-font-style);
}

.app .text-wrapper-15 {
  margin-right: -0.47px;
  font-family: var(--h5-font-family);
  font-weight: var(--h5-font-weight);
  color: var(--midnight);
  font-size: var(--h5-font-size);
  line-height: var(--h5-line-height);
  position: relative;
  width: fit-content;
  letter-spacing: var(--h5-letter-spacing);
  font-style: var(--h5-font-style);
}

.app .text-wrapper-16 {
  font-family: var(--h5-font-family);
  font-weight: var(--h5-font-weight);
  color: var(--midnight);
  font-size: var(--h5-font-size);
  line-height: var(--h5-line-height);
  position: relative;
  width: fit-content;
  letter-spacing: var(--h5-letter-spacing);
  font-style: var(--h5-font-style);
}

.app .text-7 {
  display: flex;
  flex-direction: column;
  width: 359.28px;
  align-items: flex-start;
  gap: 8px;
  position: relative;
}

.app .text-wrapper-17 {
  position: relative;
  width: fit-content;
  margin-right: -0.72px;
  font-family: var(--h5-font-family);
  font-weight: var(--h5-font-weight);
  color: var(--midnight);
  font-size: var(--h5-font-size);
  letter-spacing: var(--h5-letter-spacing);
  line-height: var(--h5-line-height);
  font-style: var(--h5-font-style);
}

.app .container-25 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 40px;
  position: relative;
  flex: 1;
  align-self: stretch;
  flex-grow: 1;
  background-color: var(--white);
  border-radius: 16px;
  border: 1px solid;
  border-color: var(--mist);
}

.app .text-wrapper-18 {
  position: relative;
  width: fit-content;
  font-family: var(--h3-font-family);
  font-weight: var(--h3-font-weight);
  color: var(--midnight);
  font-size: var(--h3-font-size);
  letter-spacing: var(--h3-letter-spacing);
  line-height: var(--h3-line-height);
  font-style: var(--h3-font-style);
}

.app .div-6 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.app .text-wrapper-19 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--caption-font-family);
  font-weight: var(--caption-font-weight);
  color: var(--slate);
  font-size: var(--caption-font-size);
  letter-spacing: var(--caption-letter-spacing);
  line-height: var(--caption-line-height);
  white-space: nowrap;
  font-style: var(--caption-font-style);
}

.app .text-input {
  display: flex;
  flex-direction: column;
  width: 506px;
  height: 46px;
  align-items: flex-start;
  justify-content: center;
  padding: 12px 16px;
  position: relative;
  background-color: var(--mist-50);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--mist);
}

.app .text-wrapper-20 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--body-2-font-family);
  font-weight: var(--body-2-font-weight);
  color: var(--midnight-50);
  font-size: var(--body-2-font-size);
  letter-spacing: var(--body-2-letter-spacing);
  line-height: var(--body-2-line-height);
  white-space: nowrap;
  font-style: var(--body-2-font-style);
}

.app .div-7 {
  display: flex;
  flex-direction: column;
  width: 506px;
  align-items: flex-start;
  gap: 8px;
  position: relative;
  flex: 0 0 auto;
}

.app .text-area {
  display: flex;
  flex-direction: column;
  width: 506px;
  height: 96px;
  align-items: flex-start;
  padding: 12px 16px;
  position: relative;
  background-color: var(--mist-50);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--mist);
}

.app .text-wrapper-21 {
  position: relative;
  width: fit-content;
  font-family: var(--body-2-font-family);
  font-weight: var(--body-2-font-weight);
  color: var(--midnight-50);
  font-size: var(--body-2-font-size);
  letter-spacing: var(--body-2-letter-spacing);
  line-height: var(--body-2-line-height);
  white-space: nowrap;
  font-style: var(--body-2-font-style);
}

.app .button-primary-2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--mint);
  border-radius: 6px;
}

.app .text-wrapper-22 {
  position: relative;
  width: fit-content;
  font-family: var(--label-font-family);
  font-weight: var(--label-font-weight);
  color: var(--slate-75);
  font-size: var(--label-font-size);
  text-align: center;
  letter-spacing: var(--label-letter-spacing);
  line-height: var(--label-line-height);
  white-space: nowrap;
  font-style: var(--label-font-style);
}

.app .footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--midnight);
}

.app .container-26 {
  display: flex;
  max-width: 1280px;
  width: 1280px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 56px 0px;
  position: relative;
  flex: 0 0 auto;
}

.app .container-27 {
  display: flex;
  flex-direction: column;
  width: 411px;
  align-items: flex-start;
  gap: 24px;
  position: relative;
}

.app .group {
  position: relative;
  width: 96px;
  height: 53.98px;
  aspect-ratio: 1.78;
}

.app .geodezja-skaning {
  position: relative;
  align-self: stretch;
  margin-top: -1px;
  font-family: var(--body-2-font-family);
  font-weight: var(--body-2-font-weight);
  color: var(--white-50);
  font-size: var(--body-2-font-size);
  letter-spacing: var(--body-2-letter-spacing);
  line-height: var(--body-2-line-height);
  font-style: var(--body-2-font-style);
}

.app .in-andrzej-kleszcz {
  position: relative;
  width: fit-content;
  font-family: var(--body-2-font-family);
  font-weight: var(--body-2-font-weight);
  color: var(--white-50);
  font-size: var(--body-2-font-size);
  letter-spacing: var(--body-2-letter-spacing);
  line-height: var(--body-2-line-height);
  white-space: nowrap;
  font-style: var(--body-2-font-style);
}

.app .frame-7 {
  display: flex;
  width: 628px;
  align-items: flex-start;
  gap: 24px;
  position: relative;
}

.app .container-28 {
  display: flex;
  flex-direction: column;
  width: 302px;
  align-items: flex-start;
  gap: 24px;
  position: relative;
}

.app .text-wrapper-23 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: "Chakra Petch", Helvetica;
  font-weight: 600;
  color: var(--mint);
  font-size: 11px;
  letter-spacing: 2.64px;
  line-height: 16.5px;
  white-space: nowrap;
}

.app .list-2 {
  display: flex;
  flex-direction: column;
  width: 338.82px;
  align-items: flex-start;
  gap: 12px;
  margin-right: -36.82px;
  position: relative;
  flex: 0 0 auto;
}

.app .text-wrapper-24 {
  font-family: "Barlow", Helvetica;
  font-weight: 400;
  color: var(--white-75);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
  position: relative;
  width: fit-content;
  margin-top: -1px;
}

.app .text-wrapper-25 {
  position: relative;
  width: fit-content;
  font-family: "Barlow", Helvetica;
  font-weight: 400;
  color: var(--white-75);
  font-size: 14px;
  letter-spacing: 0;
  line-height: 20px;
  white-space: nowrap;
}

.app .list-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
  width: 100%;
  position: relative;
  flex: 0 0 auto;
}

.app .container-29 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-top-width: 1px;
  border-top-style: solid;
  border-color: var(--white-15);
}

.app .container-30 {
  display: flex;
  max-width: 1280px;
  width: 1280px;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0px;
  position: relative;
  flex: 0 0 auto;
}

.app .text-wrapper-26 {
  position: relative;
  width: fit-content;
  margin-top: -1px;
  font-family: var(--label-font-family);
  font-weight: var(--label-font-weight);
  color: var(--white-50);
  font-size: var(--label-font-size);
  letter-spacing: var(--label-letter-spacing);
  line-height: var(--label-line-height);
  white-space: nowrap;
  font-style: var(--label-font-style);
}
/* Inject after the original stylesheet rules. */

.app {
  width: 100%;
  overflow: hidden;
}

.app a,
.app button {
  cursor: pointer;
}

.app a:focus-visible,
.app button:focus-visible,
.app input:focus-visible,
.app textarea:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}

.app button {
  border: 0;
  font: inherit;
}

.app .container,
.app .div {
  width: 100%;
}

.app .container-2 {
  max-width: calc(100% - 48px);
}

.app .container-6,
.app .container-8,
.app .container-14,
.app .container-20,
.app .container-26,
.app .container-30 {
  width: min(1280px, calc(100% - 48px));
}

.app .container-23 {
  width: min(1280px, calc(100% - 48px));
}

.app .container-5 {
  max-width: calc(100% - 48px);
}

.app .list,
.app .list-2,
.app .list-3 {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app address {
  font-style: normal;
}

.app .pill,
.app .pill-wrapper {
  appearance: none;
}

.app .text-input,
.app .text-area {
  font-family: var(--body-2-font-family);
  font-weight: var(--body-2-font-weight);
  color: var(--midnight);
  font-size: var(--body-2-font-size);
  letter-spacing: var(--body-2-letter-spacing);
  line-height: var(--body-2-line-height);
  outline: none;
}

.app .text-input::placeholder,
.app .text-area::placeholder {
  color: var(--midnight-50);
  opacity: 1;
}

.app .text-area {
  resize: vertical;
}

.app .button-primary:hover,
.app .button-primary-2:hover,
.app .pill:hover {
  background-color: var(--mint);
}

.app .button-outline:hover,
.app .button-wrapper:hover,
.app .pill-wrapper:hover {
  background-color: var(--mint);
}

.app .button-secondary:hover {
  background-color: var(--midnight-light);
}

.app .button-light:hover {
  background-color: var(--white-95);
}

.app .link-2:hover .text-wrapper-6,
.app .link-3:hover .text-wrapper-15,
.app .link-3:hover .text-wrapper-16,
.app .link-3:hover .text-wrapper-17 {
  color: var(--mint);
}

@media (max-width: 900px) {
  .app .section {
    min-height: 640px;
  }

  .app .container-2 {
    left: 24px;
    width: min(737px, calc(100% - 48px));
  }

  .app .container-6,
  .app .container-8,
  .app .container-11,
  .app .container-23,
  .app .container-21,
  .app .container-26 {
    flex-wrap: wrap;
  }

  .app .container-7,
  .app .frame-wrapper,
  .app .container-12,
  .app .container-13,
  .app .container-9,
  .app .container-25,
  .app .container-27 {
    min-width: min(100%, 280px);
  }

  .app .frame-4,
  .app .frame-5 {
    flex-wrap: wrap;
    height: auto;
  }

  .app .article,
  .app .article-2,
  .app .article-3,
  .app .article-4,
  .app .article-5 {
    width: calc(50% - 12px);
    min-width: 280px;
    height: auto;
  }

  .app .container-19,
  .app .image-mapa-obszaru {
    max-width: 100%;
  }

  .app .container-20 {
    padding: 40px;
  }

  .app .container-21 {
    gap: 32px;
  }

  .app .container-22,
  .app .napisz-lub-zadzwo {
    width: auto;
    margin-right: 0;
    white-space: normal;
  }

  .app .container-24,
  .app .text-input,
  .app .div-7,
  .app .text-area {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .app .section {
    height: auto;
    min-height: 640px;
  }

  .app .container-2 {
    top: 50%;
    transform: translateY(-50%);
  }

  .app .geodezja-i-skaning {
    font-size: 42px;
    line-height: 48px;
  }

  .app .container-3,
  .app .list,
  .app .div-4,
  .app .frame-6,
  .app .container-30 {
    flex-wrap: wrap;
  }

  .app .container-wrapper,
  .app .div-wrapper,
  .app .section-2,
  .app .container-margin-wrapper {
    padding: 56px 0;
  }

  .app .container-6,
  .app .container-8,
  .app .container-11,
  .app .container-23,
  .app .container-26,
  .app .frame-7 {
    flex-direction: column;
  }

  .app .container-6,
  .app .container-8,
  .app .container-11,
  .app .container-23,
  .app .container-26,
  .app .frame-7 {
    width: min(100% - 32px, 1280px);
  }

  .app .container-7,
  .app .frame-wrapper,
  .app .container-12,
  .app .container-13,
  .app .article,
  .app .article-2,
  .app .article-3,
  .app .article-4,
  .app .article-5,
  .app .container-27,
  .app .container-28 {
    width: 100%;
    min-width: 0;
  }

  .app .container-15 {
    align-items: flex-start;
    gap: 24px;
    flex-direction: column;
  }

  .app .container-20 {
    width: calc(100% - 32px);
    padding: 32px 24px;
  }

  .app .container-21,
  .app .container-30 {
    align-items: flex-start;
    flex-direction: column;
  }

  .app .frame-6 {
    height: auto;
  }

  .app .image-mapa-obszaru {
    width: 100%;
    height: 240px;
  }

  .app .l-sk-cieszy-ski-wrapper {
    top: auto;
    bottom: 16px;
  }

  .app .container-25 {
    padding: 24px;
  }

  .app .paragraph,
  .app .paragraph-2,
  .app .text-wrapper-11,
  .app .text-wrapper-12 {
    width: 100%;
    height: auto;
    white-space: normal;
  }

  .app .in-andrzej-kleszcz,
  .app .text-wrapper-26 {
    white-space: normal;
  }
}

  & .app .container-2 {
    position: relative;
    top: 0;
    left: 0;
    margin: auto;
    width: 1280px;
    max-width: 1280px;
  
  }
  & .app .div {
    display: flex;
  }

  & .app .text-input,
  & .app .div-7,
  & .app .text-area {
    width: 100%;
  }

  & .app .text-area {
    resize: none;
  }

   & .app .link:hover {
    .text-wrapper-2 {
      color: var(--mint);
    }
  }




 & .app .button-wrapper:hover {
  background-color: var(--white);
  .button-2 {
color: var(--mint);
  }
  
 }

 & .app .pill-wrapper:hover {
  .pill-3 {
    color: var(--white);
  }
 }

 & .app .button-light:hover {
  background-color: var(--white);
 }

 & .app .button-secondary:hover {
  background-color: var(--mint);
 }

  & .app .button-primary:hover,
   & .app .button-primary-2:hover {
    background-color: var(--mint-50);
  }

    & .app .button-light:hover {
      background-color: var(--white-75);
    }


.form-checkbox {
  width: 100%;
  display: flex;
  justify-content: center;
  gap:10px;
  align-items: center;
  span {
    font-family: var(--label-font-family);
    font-size: var(--label-font-size);
    font-weight: var(--label-font-weight);
    font-style: var(--label-font-style);
    color: var(--slate-75);
    padding-bottom: 3px;
  }
  .custom-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.custom-checkbox input {
    display: none;
}

.custom-checkbox span {
    width: 16px;
    height: 16px;
    border: 1px solid var(--mint);
    border-radius: 4px;
    position: relative;
    box-sizing: border-box;
}

.custom-checkbox input:checked + span::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--mint);
    border-radius: 2px;
    top: 3px;
    left: 3px;
}
}


}

#home .app .link img.text {
  display: block !important;
  width: 44px;
  height: 44px;
  transform-origin: center center;
  animation: phoneRing 1s ease-in-out infinite;
}

@keyframes phoneRing {
  0%,
  100% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(-15deg);
  }

  20% {
    transform: rotate(15deg);
  }

  30% {
    transform: rotate(-12deg);
  }

  40% {
    transform: rotate(12deg);
  }

  50% {
    transform: rotate(0deg);
  }
}

#home {
  & .app .container {
    background: linear-gradient(
    90deg,
    rgba(26, 39, 52, 1) 0%,
    rgba(26, 39, 52, 0.85) 35%,
    rgba(26, 39, 52, 0.35) 65%,
    rgba(26, 39, 52, 0.05) 100%
);
  }
}