.form-map-group {
  .module-title {
    .container {
      .module-supertitle-text {
        text-align: left;
        color: rgb(91, 131, 173);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        margin: 0px 0px 8px;
      }

      .module-title-text {
        text-align: left;
        font-family: "Baloo 2", sans-serif;
        font-weight: 700;
        margin: 0px 0px 24px;
      }
    }

    padding-top: 0;
    padding-bottom: 0;
  }
}

/* =========================================================
   KONTAKT — FORMULARZ + MAPA
   ========================================================= */

.form-map-wrapper {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.form-map {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.form-map .wrapper {
  box-sizing: content-box;

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

  width: auto;
  max-width: 1160px;

  margin: 0 auto;
  padding: 0 24px;

  gap: 24px;

  align-items: stretch;
}

/* =========================================================
   KOLEJNOŚĆ — FORMULARZ LEWO / MAPA PRAWO
   ========================================================= */

.form-map .wrapper > .form {
  order: 1;
}

.form-map .wrapper > .text {
  order: 2;
}

/* =========================================================
   MAPA — KOLUMNA
   ========================================================= */

.form-map .wrapper > .text {
  box-sizing: border-box;

  display: flex;

  width: 100%;
  min-width: 0;
  max-width: none;

  margin: 0;
  padding: 0;

  float: none;
  flex: none;
}

/* =========================================================
   MAPA
   ========================================================= */

.form-map .map {
  box-sizing: border-box;

  display: flex;

  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 100%;

  margin: 0;
  padding: 0;

  border: 0;
  border-radius: 20px;

  overflow: hidden;

  background: rgb(245, 245, 245);
}

.form-map .map iframe {
  box-sizing: border-box;

  display: block;

  width: 100%;
  height: 100%;

  min-width: 100%;
  min-height: 100%;

  margin: 0;
  padding: 0;

  border: 0;
  outline: 0;

  border-radius: 20px;
}

/* =========================================================
   KOLUMNA FORMULARZA
   ========================================================= */

.form-map .wrapper > .form {
  box-sizing: border-box;

  display: flex;
  align-items: stretch;

  width: 100%;
  min-width: 0;
  max-width: none;

  margin: 0;
  padding: 0;

  float: none;
  flex: none;
}

/* =========================================================
   WŁAŚCIWY PANEL FORMULARZA
   ========================================================= */

.form-map .form > .container-block {
  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 0;
  max-width: none;

  height: 100%;

  margin: 0;
  padding: 24px;

  border: 0;
  border-radius: 20px;

  background: rgb(253, 244, 247);

  box-shadow: none;

  float: none;
}

/* =========================================================
   TYTUŁ
   ========================================================= */

.form-map .form .title {
  display: block;

  width: 100%;

  margin: 0 0 12px;
  padding: 0;
}

.form-map .form .title h3 {
  display: block;

  width: 100%;

  margin: 0;
  padding: 0;

  font-family: "Baloo 2", sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;

  color: var(--element1-title);

  text-align: left;
}

/* =========================================================
   PODTYTUŁ
   ========================================================= */

.form-map .form .container-block > p {
  display: block;

  width: 100%;

  margin: 0 0 18px;
  padding: 0;

  font-family: "Nunito", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;

  color: var(--element1-text);

  text-align: left;
}

/* =========================================================
   FORMULARZ
   ========================================================= */

.form-map .form form {
  display: flex;
  flex-direction: column;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 0;

  gap: 0;
}

/* =========================================================
   WIERSZE PÓL FORMULARZA
   ========================================================= */

.form-map .form form > .row {
  box-sizing: border-box;

  display: grid;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  column-gap: 12px;
  row-gap: 12px;

  float: none;
  flex: none;
}

/* =========================================================
   UKŁAD PÓL:

   Imię i nazwisko
   Telefon        Email
   Wiadomość
   ========================================================= */

.form-map .form form > .row:first-of-type .form-group:nth-child(1) {
  grid-column: 1 / -1;
}

.form-map .form form > .row:first-of-type .form-group:nth-child(2) {
  grid-column: 1;
}

.form-map .form form > .row:first-of-type .form-group:nth-child(3) {
  grid-column: 2;
}

.form-map .form form > .row:first-of-type .form-group:nth-child(4) {
  grid-column: 1 / -1;
}

/* =========================================================
   GRUPY FORMULARZA
   ========================================================= */

.form-map .form form .form-group {
  box-sizing: border-box;

  display: block;

  width: 100%;
  min-width: 0;
  max-width: none;

  margin: 0;
  padding: 0;

  float: none;
  flex: none;
}

/* =========================================================
   UKRYTE POLE ANTY-BOT
   ========================================================= */

.form-map .form .r-name {
  position: absolute;

  left: -99999px;
  top: auto;

  width: 1px;
  height: 1px;

  margin: 0;
  padding: 0;

  opacity: 0;
  pointer-events: none;
}

/* =========================================================
   INPUTY
   ========================================================= */

.form-map .form input[type="text"],
.form-map .form input[type="tel"],
.form-map .form input[type="email"],
.form-map .form input[type="number"],
.form-map .form input[type="password"],
.form-map .form input[type="datetime-local"],
.form-map .form input[type="date"],
.form-map .form select,
.form-map .form select.form-control,
.form-map .form textarea,
.form-map .form textarea.form-control {
  box-sizing: border-box;

  display: block;

  width: 100%;
  max-width: 100%;

  height: 46px;
  min-height: 46px;

  margin: 0;
  padding: 12px 16px;

  border: 1px solid rgb(237, 220, 228);
  border-radius: 12px;

  background: rgb(255, 255, 255);

  color: var(--form-text);

  font-family: "Nunito", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;

  outline: none;

  box-shadow: none;

  appearance: none;
  -webkit-appearance: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

/* =========================================================
   WIADOMOŚĆ
   ========================================================= */



.form-map .form form > .row:first-of-type .form-group:nth-child(4) textarea,
.form-map .form form > .row:first-of-type .form-group:nth-child(4) textarea.form-control {
  height: 106px;
  min-height: 106px;
  resize: vertical;
  line-height: 1.4;
}

/* =========================================================
   TEXTAREA
   ========================================================= */

.form-map .form textarea,
.form-map .form textarea.form-control {
  height: 116px;
  min-height: 116px;
  max-height: none;

  padding-top: 12px;
  vertical-align: top;

  resize: vertical;

  line-height: 1.4;
}

/* =========================================================
   PLACEHOLDER
   ========================================================= */

.form-map .form input::placeholder,
.form-map .form textarea::placeholder,
.form-map .form textarea.form-control::placeholder {
  color: rgb(150, 145, 150);
  opacity: 1;

  font-family: "Nunito", sans-serif;
  font-size: 15px;
  font-weight: 400;
}
.form-map .row .form-group:last-child input{
  height: 5lh;
  
}

/* =========================================================
   HOVER
   ========================================================= */

.form-map .form input[type="text"]:hover,
.form-map .form input[type="tel"]:hover,
.form-map .form input[type="email"]:hover,
.form-map .form input[type="number"]:hover,
.form-map .form input[type="password"]:hover,
.form-map .form input[type="datetime-local"]:hover,
.form-map .form input[type="date"]:hover,
.form-map .form select:hover,
.form-map .form textarea:hover {
  border-color: rgb(220, 190, 202);
  background: rgb(255, 255, 255);
}

/* =========================================================
   FOCUS
   ========================================================= */

.form-map .form input[type="text"]:focus,
.form-map .form input[type="tel"]:focus,
.form-map .form input[type="email"]:focus,
.form-map .form input[type="number"]:focus,
.form-map .form input[type="password"]:focus,
.form-map .form input[type="datetime-local"]:focus,
.form-map .form input[type="date"]:focus,
.form-map .form select:focus,
.form-map .form textarea:focus,
.form-map .form textarea.form-control:focus {
  border-color: rgb(199, 106, 134);
  background: rgb(255, 255, 255);

  outline: none;

  box-shadow: 0 0 0 3px rgba(199, 106, 134, 0.08);
}

/* =========================================================
   CHECKBOX — ZGODA
   ========================================================= */

.form-map .form .checkbox-label {
    box-sizing: border-box;

    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: start;

    width: 100%;

    margin: 12px 0 0;
    padding: 0;

    column-gap: 10px;

    font-family: "Nunito", sans-serif;
    font-size: 13px;
    line-height: 1.5;

    color: rgb(85, 85, 95);

    text-align: left;

    cursor: pointer;
}


/* =========================================================
   WIZUALNY CHECKBOX
   ========================================================= */

.form-map .form .checkbox-label .checkbox-styled {
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    min-width: 18px;
    max-width: 18px;
    min-height: 18px;
    max-height: 18px;

    inline-size: 18px;
    block-size: 18px;
    aspect-ratio: 1 / 1;
    align-self: start;

    margin: 1px 0 0;
    padding: 0;

    border: 1px solid rgb(199, 106, 134);
    border-radius: 5px;

    background: rgb(255, 255, 255);

    overflow: hidden;

    flex: 0 0 18px;
}


/* =========================================================
   PTASZEK
   ========================================================= */

.form-map .form .checkbox-label .checkbox-styled span {
    display: block;

    width: 18px;
    height: 18px;

    margin: 0;
    padding: 0;

    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 17px;

    color: rgb(255, 255, 255);

    text-align: center;
}


/* =========================================================
   ZAZNACZONY
   ========================================================= */

.form-map .form .checkbox-label .checkbox-styled.checked {
    background: rgb(199, 106, 134);
    border-color: rgb(199, 106, 134);
}


/* =========================================================
   PRAWDZIWY INPUT — CAŁKOWICIE UKRYTY
   ========================================================= */

.form-map .form .checkbox-label .contact-checkbox {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    opacity: 0;

    border: 0;

    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);

    white-space: nowrap;
}


/* =========================================================
   GWIAZDKA
   ========================================================= */

.form-map .form .checkbox-label .required {
    display: none;
}

/* =========================================================
   TEKST ZGODY
   ========================================================= */

.form-map .form .checkbox-label .regulamin {
  display: block;

  min-width: 0;

  margin: 0;
  padding: 0;
}

.form-map .form .checkbox-label .regulamin p {
  display: block;

  margin: 0;
  padding: 0;

  font-family: "Nunito", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;

  color: rgb(85, 85, 95);
}
.form-map .form .checkbox-label .regulamin p > a{
  font-size: 13px;
}

.form-map .form .checkbox-label a,
.form-map .form .checkbox-label .regulamin a {
  color: rgb(199, 106, 134);

  font-weight: 700;

  text-decoration: none;
}

.form-map .form .checkbox-label a:hover,
.form-map .form .checkbox-label .regulamin a:hover {
  color: rgb(180, 89, 117);
  text-decoration: underline;
}

/* =========================================================
   WIERSZ PRZYCISKU
   ========================================================= */

.form-map .form form > .row:last-of-type {
  display: block;

  width: 100%;

  margin: 0;
  padding: 0;
}

.form-map .form form > .row:last-of-type .form-group {
  display: block;

  width: 100%;

  margin: 0;
  padding: 0;
}

/* =========================================================
   PRZYCISK
   ========================================================= */

.form-map .form input.btn,
.form-map .form input.btn.btn-secondary,
.form-map .form .btn.btn-secondary {
  box-sizing: border-box;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-transform: none;
  width: auto;
  min-width: 0;
  max-width: 100%;

  height: auto;
  min-height: 46px;

  margin: 12px 0 0;
  padding: 13px 24px;

  border: 0;
  border-width: 0;
  border-style: none;

  border-radius: 999px;

  background: rgb(199, 106, 134);

  color: rgb(255, 255, 255);

  font-family: "Nunito", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;

  text-align: center;
  text-decoration: none;

  cursor: pointer;

  box-shadow: none;

  appearance: none;
  -webkit-appearance: none;

  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.form-map .form input.btn:hover,
.form-map .form input.btn.btn-secondary:hover,
.form-map .form .btn.btn-secondary:hover {
  background: rgb(180, 89, 117);
  color: rgb(255, 255, 255);

}

/* =========================================================
   FORM ICONS
   ========================================================= */

.form-icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
  max-width: 1160px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 24px;
}

.form-icons .form-icon {
  min-width: 0;
  box-sizing: border-box;

  padding: 18px;

  display: flex;
  align-items: center;
  gap: 12px;

  border-radius: 16px;

  font-size: 14px;
  line-height: 1.4;
}

.form-icons .form-icon-image {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  overflow: hidden;
}

.form-icons .form-icon-image img {
  display: block;

  width: 22px;
  height: 22px;

  max-width: 22px;
  max-height: 22px;

  object-fit: contain;
}

.form-icons .form-icon-content {
  min-width: 0;
}

.form-icons {
  .form-icon-content {
    a,
    p {
      font-size: 14px;
      line-height: 1.4;
      font-family: "Nunito";
      font-weight: 700;
    }

    span {
      font-size: 14px;
      line-height: 1.4;
      font-family: "Nunito";
    }
  }
}

.form-icons .form-icon-label {
  display: block;
  margin-top: 0;
}

/* =========================================================
   KOLORY KAFELKÓW
   ========================================================= */

.form-icons .company-name {
  background: rgb(253, 244, 247);
}

.form-icons .company-name .form-icon-image {
  background: rgb(249, 219, 228);
}

.form-icons .address {
  background: rgb(253, 244, 247);
}

.form-icons .address .form-icon-image {
  background: rgb(249, 219, 228);
}

.form-icons .phone {
  background: rgb(242, 249, 245);
}

.form-icons .phone .form-icon-image {
  background: rgb(220, 239, 230);
}

.form-icons .email {
  background: rgb(246, 243, 251);
}

.form-icons .email .form-icon-image {
  background: rgb(230, 222, 244);
}

.form-icons .hours {
  background: rgb(242, 247, 251);
}

.form-icons .hours .form-icon-image {
  background: rgb(219, 231, 244);
}

/* =========================================================
   TEKST
   ========================================================= */

.form-icons .form-icon p {
  margin: 0;
}

.form-icons .form-icon a {
  color: var(--element1-title);
  text-decoration: none;
}

.form-icons .form-icon a:hover {
  color: var(--element1-link-hover);
}

.form-icons .form-icon strong {
  font-weight: 700;
}

.form-icons .email {
  overflow-wrap: anywhere;
}

@media (min-width: 1580px) {

  .form-map {
    .wrapper {
      min-height: 423px;
    }

    .map,
    .form {
      min-height: 423px;
    }
  }

  .form-icons {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* =========================================================
   XL
   1200px — 1579.5px
   ========================================================= */

@media (min-width: 1200px) and (max-width: 1579.5px) {

  .form-map {
    .wrapper {
      min-height: 423px;
    }

    .map,
    .form {
      min-height: 423px;
    }
  }

  .form-icons {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* =========================================================
   LG
   992px — 1199.5px
   ========================================================= */

@media (min-width: 992px) and (max-width: 1199.5px) {

  .form-map {
    .wrapper {
      max-width: 100%;

      min-height: 423px;

      padding-right: 15px;
    }

    .map,
    .form {
      min-height: 423px;
    }
  }

  .form-icons {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 24px;

  }
}


/* =========================================================
   MD
   768px — 991.5px

   Formularz i mapa:
   jedna kolumna
   ========================================================= */

@media (min-width: 768px) and (max-width: 991.5px) {

  .form-map {
    .wrapper {
      box-sizing: border-box;

      display: grid;

      grid-template-columns: minmax(0, 1fr);

      width: 100%;
      max-width: 100%;

      min-height: 0;

      margin: 0;
      padding: 0 24px;

      gap: 24px;


      > .form {
        order: 1;

        min-height: 0;
      }


      > .text {
        order: 2;
      }
    }


    .form {
      > .container-block {
        height: auto;
      }
    }


    .map {
      width: 100%;
      height: 423px;

      min-height: 423px;

      border-radius: 20px;

      iframe {
        height: 423px;

        min-height: 423px;

        border-radius: 20px;
      }
    }
  }


  .form-icons {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    padding-right: 20px;
    padding-left: 20px;
  }
}


/* =========================================================
   SM
   576px — 767.5px

   Formularz i mapa:
   jedna kolumna
   ========================================================= */

@media (min-width: 576px) and (max-width: 767.5px) {
.form-map-group{
    .container{
      padding-left: 20px;
      padding-right: 20px;
    }
}
  .form-map {
    .wrapper {
      box-sizing: border-box;

      display: grid;

      grid-template-columns: minmax(0, 1fr);

      width: 100%;
      max-width: 100%;

      min-height: 0;

      margin: 0;
      padding: 0 24px;

      gap: 20px;


      > .form {
        order: 1;

        min-height: 0;
      }


      > .text {
        order: 2;
      }
    }


    .form {
      > .container-block {
        height: auto;

        padding: 24px;
      }
    }


    .map {
      width: 100%;
      height: 380px;

      min-height: 380px;

      border-radius: 20px;

      iframe {
        height: 380px;

        min-height: 380px;

        border-radius: 20px;
      }
    }
  }


  .form-icons {
  grid-template-columns: repeat(1, 1fr);

    padding-right: 20px;
    padding-left: 20px;
    .email{
      .form-icon-content{
        a,p{
          font-size: 12px;
        }
      }
    }
  }
}


/* =========================================================
   XS
   do 575.5px
   ========================================================= */

@media (max-width: 575.5px) {

  .form-map {
    .wrapper {
      box-sizing: border-box;

      display: grid;

      grid-template-columns: minmax(0, 1fr);

      width: 100%;
      max-width: 100%;

      min-height: 0;

      margin: 0;
      padding: 0 20px;

      gap: 20px;


      > .form {
        order: 1;

        min-height: 0;
      }


      > .text {
        order: 2;
      }
    }


    .form {
      > .container-block {
        height: auto;

        padding: 20px;

        border-radius: 18px;
      }


      .title {
        margin-bottom: 10px;

        h3 {
          font-size: 19px;
        }
      }


      .container-block > p {
        margin-bottom: 16px;

        font-size: 14px;
      }


      form {
        > .row {
          &:first-of-type {
            grid-template-columns: minmax(0, 1fr);

            gap: 12px;

            .form-group {
              &:nth-child(1),
              &:nth-child(2),
              &:nth-child(3),
              &:nth-child(4) {
                grid-column: 1 / -1;
              }
            }
          }
        }
      }


      .checkbox-label {
        grid-template-columns: 18px minmax(0, 1fr);

        column-gap: 10px;

        font-size: 13px;

        .regulamin {
          p {
            font-size: 13px;
          }
        }
      }


      input.btn,
      input.btn.btn-secondary,
      .btn.btn-secondary {
        width: 100%;
      }
    }


    .map {
      height: 360px;

      min-height: 360px;

      border-radius: 18px;

      iframe {
        height: 360px;

        min-height: 360px;

        border-radius: 18px;
      }
    }
  }


  .form-icons {
    grid-template-columns: 1fr;

    padding-right: 20px;
    padding-left: 20px;

    gap: 12px;

    .form-icon {
      padding: 18px;
    }
  }
}