@import url("fonts/stylesheet.css");

html, body {height: 100%;
             scroll-behavior: smooth;}

body {margin: 0 auto;
      padding: 0;
      font-family: Barlow, sans-serif;
      color: #000000;
      font-weight: 400;
      font-size: 18px;
}

input[type='text'],
input[type='email'],
input[type='submit'],
input[type='tel'],
textarea  {font-family:  Barlow, sans-serif;
             box-sizing: border-box;}


*:focus {outline: 0;}

a {text-decoration: none;
   cursor: pointer;}

b, strong {font-weight: 700;}

div {box-sizing: border-box;}

ul {margin: 0;
    padding: 0;
    list-style: none;}

.header-container {
    width: 100%;
    margin: 0 auto;
    height: 115px;

    position: fixed;   /* ZAWSZE przypięty */
    top: 0;
    left: 0;

    z-index: 1000;
    background: #fff;  /* MUSI być, bo fixed */
}




.header-container.is-sticky {height: 80px;}

.header { width: 100%;
           max-width: 1640px;
           margin: 0 auto;
          padding: 0 20px;
         position: relative;
         display: flex;
         justify-content: space-between;}

.header-container.is-sticky .header {height: 79px;}

.logo {width: 222px;
        padding-top: 30px;}

.header-container.is-sticky .logo {width: 163px;
                                   padding-top: 22px;}

.logo img {width: 100%;}



.menu-phone {display: flex;
             justify-content: center;}

.menu-phone ul li {display: inline-block;
                    padding: 0 29px;
                    text-transform: uppercase;
                    position: relative;}

.menu-phone ul li a {font-size: 18px;
                      color: #000;
                       transition: all .3s ease .10s;
                       padding: 46px 0 0 0;
                       display: block;
                       position: relative;}

.menu-phone ul li a:hover {color: #34547f;}

.menu-phone ul li img {width: 23px;}

.fb-container {display: flex;
               justify-content: right;}

.fb-phone-container {display: none;}

.fb-container img {padding: 45px 0 0 24px;
                    width: 24px;}

.menu-phone ul li:before {position: absolute;
                           width: 1px;
                           height: 95px;
                           background: #EFEFEF;
                           content: '';
                           display: block;
                           top: 14px;
                           right: -5px;}

.menu-phone ul li:last-child:before {display: none;}

.counter-row {width: 100%;
              max-width: 1420px;
              margin: 0 auto;
              padding: 25px 20px 0 20px;
              position: relative;
              display: flex;
              justify-content: center;
              flex-wrap: wrap;}

.counter-block {width: 20%;
                border-right: 1px solid #EFEFEF;
                text-align: center;
                color: #34547f;
                padding: 20px 0;}

.counter-block:last-child {border: none;}

.ct-row {padding-bottom: 10px;}

.ct-text1 {font-size: 50px;
           font-weight: 700;}

.ct-text2 {font-size: 20px;}

.ct-podpis {font-size: 16px;
             padding: 10px 0 0 0;
             font-weight: 500;}

.box-korzysci-over {width: 100%;
                    margin:0 auto;
                    position: relative;
                    clear: both;
                    overflow: hidden;
                   background: pink;
                   z-index: -5;}

.box-parallax-over {position: relative;
                    overflow: hidden;}

.ngl-korzysci {width: 100%;
              max-width: 1420px;
              margin: 0 auto;
              padding: 43px 20px 0 20px; }

h2 {color: #34547f;
      font-size: 47px;
      font-weight: 700;
      margin: 0;}

.ngl-korzysci h2 {color: #fff;
                  padding: 0 0 55px 0;}

.k-row-over {width: 100%;
             max-width: 1420px;
             margin: 0 auto;
             padding: 0 20px;}

.k-row {width: 100%;
        background: rgba(31, 55, 74, 0.82);
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        padding: 30px 15px;
        position: relative;}

.k-row:before {display: block;
               width: 2500px;
               height: 100%;
               content: '';
               background: rgba(31, 55, 74, 0.82);
               top: 0;
               right: -2500px;
               position: absolute;}

.k-over-box {width: 33.3333333%;
             color: #fff;}

.k-box {display: flex;
        justify-content: left;
        padding: 25px;}

.k-box img {width: 86px;
             padding: 0 25px 0 0;}

.k-title {color: #5c96c4;
          font-size: 18px;
          font-weight: 700;
          display: inline-block;
          padding: 0 0 20px 0;}

.k-opis {display: inline-block;
font-weight: 300;}

.box-mieszkania {width: 100%;
                 max-width: 1420px;
                 margin: 0 auto;
                 padding: 50px 20px 0 20px;
                 overflow: hidden;}


.box-segment-over { width: 100%;
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;}

.segment-col {width: calc(50% - 40px);}

.segment-col h2 {padding: 0 0 20px 50px;}

.box-segment {padding: 30px 0 50px 0;}

.s-title {display: inline-block;
          padding: 0 0 25px 50px;
          font-size: 25px;}

.s-br {width: 100%;
       height: 1px;
       background: #EFEFEF;}

.s-over-row {width: 100%;
             padding: 25px 50px;}

.s-row {width: 100%;
        display: flex;
        justify-content: left;
        padding-bottom: 8px;
        flex-wrap: wrap;}

.s-block {width: 50%;}

.s-block:last-child {display: flex;
                     justify-content: left;}

.s-block img {padding: 3px 0 0 8px;}

.s-block sup {font-size: 12px;}

.b-row {width: 100%;
        display: flex;
        justify-content: left;
        padding: 0 0 0 35px;
        flex-wrap: wrap;}

.button {display: inline-block;
         width: 335px;
         height: 42px;
         border: 2px solid #000;
         text-transform: uppercase;
         font-size: 17px;
         letter-spacing: 4px;
          color: #172a39;
           font-weight: 700;
           text-align: center;
           padding: 10px 0 0 0;
           box-sizing: border-box;
           font-family: Montserrat, sans-serif;
			transition: all 0.3s ease-in-out;}

.button:hover {color: #fff;
				border: 2px solid #5c96c4;
				background: #5c96c4;}

.p-plan {text-transform: uppercase;
         font-size: 17px;
         letter-spacing: 4px;
          color: #172a39;
           font-weight: 700;
           font-family: Montserrat, sans-serif;
           position: relative;
           padding: 12px 0 0 32px;
           margin: 0 0 0 50px;}

.p-plan:before {display: block;
               width: 20px;
               height: 19px;
               content: '';
               background: url(img/download_ico.webp);
               top: 12px;
               left: 0;
               position: absolute;}

.box-segment:hover {background: #F3F7FA;}

.download-box {width: 100%;
               display: flex;
               justify-content: right;
               padding-top: 60px;}

.a-dl {  text-transform: uppercase;
         font-size: 17px;
         letter-spacing: 4px;
          color: #172a39;
           font-weight: 700;
           font-family: Montserrat, sans-serif;
           padding-left: 50px;}

#lokalizacja {width: 100%;
              height: 100px;
              clear: both;}

.box-lokalizacja {width: 100%;
                  margin: 0 auto;
                  clear: both;
                  overflow: hidden;}

.kl-over {width: 100%;
          max-width: 1420px;
          margin: 0 auto;
          padding: 0 20px;}

.kl-over-row {display: flex;
              justify-content: left;
              flex-wrap: wrap;
              background: rgba(31, 55, 74, 0.82);
              position: relative;}

.kl-over-row:before {display: block;
               width: 2500px;
               height: 100%;
               content: '';
               background: rgba(31, 55, 74, 0.82);
               top: 0;
               left: -2500px;
               position: absolute;}

.kl-row {display: flex;
         justify-content: left;
         flex-wrap: wrap;
         width: 50%;
         font-family: Montserrat, sans-serif;
         padding: 50px 0;}

.mapa {width: 50%;}

.kl-over-box {width: 50%;}

.kl-box {width: 240px;
         margin: 0 auto;
         display: flex;
         justify-content: left;
         padding: 50px 0;
         align-items: flex-end;}

.kl-box span {display: inline-block;}

.k-title1 {font-size: 58px;
           font-weight: 700;
           color: #5c96c4;
           padding-right: 10px;
           line-height: 20px;}

.k-title1 .k-min {font-size: 18px;
                 font-weight: 400;}

.k-title2 {font-weight: 600;
          color: #fff;}


.galeria {width: 100%;
          max-width: 1420px;
          margin: 0 auto;
          padding: 150px 20px 50px 20px;
          position: relative;
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;}

.galeria-bg {position: absolute;
             width: calc(100% - 500px);
             height: calc(100% - 100px);
             background: #F3F7FA;
             left: 250px;
             top: 100px;
             z-index: 1;}

.galeria-col1,
.galeria-col2 {width: calc(50% - 12px);
               position: relative;
                z-index: 10;}

.g-img img {width: 100%;}

.g-subtitle {display: inline-block;
             font-size: 25px;
             padding: 20px 0;}

.g-text {padding: 0 0 50px 0;
         font-weight: 300;}

.galeria-col1 .button-box {padding: 30px 0 0 15px;}

.galeria-col2 .button-box {padding: 30px 15px 0 0;
                           text-align: right;}

.box-container {width: 100%;
                 position: relative;
                 padding: 210px 0 100px 0;
                 display: flex;
                 justify-content: left;
                 flex-wrap: wrap;
                 align-items: center;
                 overflow: hidden;}

.left-bg {position: absolute;
          width: 40%;
          height: calc(100% - 100px);
          background: #F3F7FA;
          left: 0;
          top: 100px;
          z-index: 1;}

.box-img.box-img-phone {display: none;}

.box-img {width: 45%;
          position: relative;
          z-index: 10;}

.box-img img {width: 100%;}

button {border: none;
         background: none;
         padding: 0;}

.box-text-over {width: 680px;
                padding: 0 0 0 100px;}

h2.sub-heading {font-size: 25px;
                 font-weight: 500;
                 color: #000;
                 padding: 0 0 6px 0;}


.phone-center {padding-top: 60px;}

.box-text-content {padding: 20px 0 0 0;
                   font-weight: 300;
text-align: justify;}

.ngl-box {width: 100%;
          max-width: 1420px;
          margin: 0 auto;
          padding: 60px 20px 40px 20px;}

.form-box-over {width: 100%;
                padding: 60px;
                background: #F3F7FA;}

.form-over  {padding: 0 20px;
             width: 100%;
                max-width: 1420px;
                margin: 0 auto;}

.form-box {width: 100%;}

.form-row {display: flex;
           justify-content: space-between;
           flex-wrap: wrap;}

.f-col {width: calc(50% - 15px);}


input[type='text'],
input[type='email'],
input[type='tel'],
textarea {width: 100%;
           height: 60px;
           background: #fff;
           border: none;
           padding: 0 30px;
           color: #000;
           font-size: 18px;}

textarea {height: 310px;
           padding: 20px 30px;}

input[type='submit'] {display: inline-block;
                       width: 500px;
                       height: 86px;
                       background: #5C96C4;
                        color: #fff;
                       box-sizing: border-box;
                        font-size: 17px;
                        border: 2px solid #5C96C4;
                         transition: all .3s ease .10s;
                         text-transform: uppercase;
                         font-family: Montserrat, sans-serif;
                         letter-spacing: 4px;
                        font-weight: 700;}

input[type='submit']:hover {background: rgba(255, 255, 255, 0);
                             color: #5C96C4;}

.kontakt-box-right ::-webkit-input-placeholder {font-size: 17px;
                                       color: #000;
                                       font-weight: 300;
                                       opacity: 1;}

.kontakt-box-right :-moz-placeholder {font-size: 17px;
                            color: #000;
                            font-weight: 300;
                            opacity: 1;}

.kontakt-box-right ::-moz-placeholder {font-size: 17px;
                             color: #000;
                             font-weight: 300;
                             opacity: 1;}

.kontakt-box-right :-ms-input-placeholder {font-size: 17px;
                                 color: #000;
                                 font-weight: 300;
                                 opacity: 1;}

.form-row {display: flex;
           justify-content: space-between;
           flex-wrap: wrap;
           padding: 30px 0 0 0;}

.box-submit {width: 500px;}

.f-left {width: calc(100% - 500px - 30px);}

#kontakt {width: 100%;
          height: 100px;}

.footer-container {width: 100%;
                   margin: 0 auto;
                   clear: both;
                   overflow: hidden;
                   color: #ffffff;}

.footer-ngl {width: 100%;
             max-width: 1460px;
              margin: 0 auto;
              padding: 60px 20px 60px 20px;}

.footer-ngl h2 {color: #fff;}


.footer {width: 100%;
           max-width: 1420px;
           margin: 0 auto;
          padding: 0 20px;
          position: relative;
          background: rgba(31, 55, 74, 0.82);}


.footer:before {display: block;
                width: 2500px;
                height: 100%;
                content: '';
                background: rgba(31, 55, 74, 0.82);
                top: 0;
                right: -2500px;
                position: absolute;}

.f-row {display: flex;
        justify-content: left;
        flex-wrap: wrap;
        padding: 60px;}

.f1-col {width: 25%;}

.f-ngl {font-size: 30px;
        font-weight: 700;}

.footer a {
    color: #fff;
    transition: color .2s ease;
}

.footer a:hover {
    color: #5c96c4;
}


.f-sm {display: flex;
        justify-content: left;}

.f-sm img {width: 25px;
           padding: 27px 20px 0 0;}

.footer-text {width: 100%;
              max-width: 1420px;
              margin: 0 auto;
              padding: 80px 20px 160px 20px;
              position: relative;
              background: rgba(31, 55, 74, 0.82);
              text-align: center;
              border-top: 1px solid #fff;}

.footer-text:before {display: block;
                width: 2500px;
                height: 100%;
                content: '';
                background: rgba(31, 55, 74, 0.82);
                top: 0;
                right: -2500px;
                position: absolute;}

.footer-text:after {display: block;
                width: 2500px;
                height: 1px;
                content: '';
                background: #fff;
                top: -1px;
                right: -2500px;
                position: absolute;}




/*BUTTON*/

.menu-button {
  position: absolute;
  top: 22px;
  right: 30px;
  background: transparent;
  display: none;
  cursor: pointer;}


.menu-button:focus {outline: none;}

.menu-button .menu-ico {display: block;
                       width: 36px;
                        height: 6px;
                         background: #34547f;}


.menu-button .menu-ico + .menu-ico { margin-top: 6px;}


/*Checkbox*/

.form-over input[type='checkbox'] {display: none;}

.form-over label {position: relative;}

.form-checkbox {display: inline-block;}

.wpcf7-list-item-label {padding-left: 32px;}


.form-over .wpcf7-list-item-label:before { position: absolute;
                                                      top: -4px;
                                                      left: 0;
                                                      content: "";
                                                      width: 27px;
                                                      height: 27px;
                                                      background-image: url("img/non_accept.webp");}


.wpcf7 .form-checkbox input[type='checkbox']:checked + .wpcf7-list-item-label:before {
                                                  background-image: url("img/accept.webp");
                                                  background-position: center;
                                                  background-repeat: no-repeat;}

.wpcf7 .form-checkbox {
    font-size: 13px;
}

.c-box .wpcf7-list-item { margin: 0;}

/***********/

.slider-bg {width: 100%;
            height: 715px;
            position: absolute;
            left: 0;
            top: 150px;
            z-index: 1;}


.slider-over-container {width: 100%;
                        height:937px;
                        padding-top: 118px;
                       z-index: -1;}

.slider-js {width: 100%;
            height:817px;
            z-index: 100;}

.slider-over-box {width: 100%;
                 margin: 0 auto;
                 height:100%;}

.slider-over {width: 100%;
              max-width: 1400px;
              margin: 0 auto;
              height:100%;}

.slider-container {position: relative;
                   z-index: 10;
                   width: 100%;
                   height: 100%;
                   clear: both;
                   box-shadow: 0px 5px 9px rgba(23,42,57,0.64);}


.slider-box {width: auto;
             color: #fff;
             position: absolute;
             left: 0;
             bottom: 75px;
             z-index: 10;
             height: auto !important;}

.slider {position: relative;
         width: 100%;
         height: 100%;
         background: rgba(31, 55, 74, 0.82);
         padding: 45px 45px 60px 85px;
         z-index: 10;}

.slider:before {display: block;
                width: 2500px;
                height: 100%;
                content: '';
                background: rgba(31, 55, 74, 0.82);
                top: 0px;
                left: -2500px;
                position: absolute;
                z-index: 10;}

.slider-text {font-size: 18px;
              font-weight: 300;}

.slider h1 {font-size: 60px;
             margin: 0;
             font-weight: 700;
             margin: 0;
             text-transform: uppercase;
             font-family: Montserrat, sans-serif;}

.slider h1 .light-h1 {font-size: 40px;
                       margin: 0;
                       font-weight: 300;
                       margin: 0;
                      letter-spacing: 4px;}

.more-box {padding-top: 50px;}


.slider-button {font-size: 16px;
                 letter-spacing: 4px;
                 text-transform: uppercase;
                 color: #ffffff;
                 font-weight: 500;
                 font-family: Montserrat, sans-serif;
                display: inline-block;
                background: #5C96C4;
                height: 44px;
                padding: 13px 0 0 0;
                box-sizing: border-box;
                width: 345px;
                text-align: center;}

.box-container1 {width: 100%;
                 height: 100%;
                 position: relative;}

.bg-img {width: 60%;
         height: calc(100% - 60px);
         position: absolute;
         left: 0;
         top: 60px;
         z-index: 1;}

.bc1-row {width: 100%;
          max-width: 1420px;
          margin: 0 auto;
          height: 100%;
          padding: 0 20px;
          display: flex;
          justify-content: right;
          position: relative;
          z-index: 10;
          align-items: center;}

.bc1-row .box-text-over {width: 50%;
                          padding: 0;}


.menu-phone.menu-button.menu-phone1 {display: none;}

.menu-phone.menu-button { position: relative;
                          top: auto;
                          right: auto;}

.slick-slider .slick-list,
.slick-track,
.slick-track div {height: 100%;}

.form-box p {margin: 0;
             width: 100%;}

.price-history-btn {
  cursor: pointer; line-height: 0;
}

.history-modal { position: fixed; inset: 0; display: none; z-index: 9999; }
.history-modal[aria-hidden="false"] { display: block; }
.history-modal__backdrop { position:absolute; inset:0; background: rgba(0,0,0,.45); }
.history-modal__dialog {
  position: relative; margin: 7vh auto 0; max-width: 640px;
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.history-modal__header { display:flex; justify-content:space-between; align-items:center; padding: 16px 20px; border-bottom: 1px solid #eee; }
.history-modal__body { padding: 16px 20px 20px; max-height: 60vh; overflow:auto; }
.history-modal__close { background: none; border: 0; font-size: 28px; line-height: 1; cursor: pointer; }
.history-list { list-style:none; margin:0; padding:0; }
.history-item { display:flex; gap:10px; justify-content:space-between; padding:10px 0; border-bottom:1px solid #f0f0f0; }
.history-date { opacity:.8; }
.history-price { font-weight:600; }
.history-user { opacity:.7; white-space:nowrap; }

.price-history-list {
    padding-left: 0;
    list-style: none;
   font-size: 14px;
}

.price-history-time {
    color: #999;
    font-size: 0.9em;
    margin-left: 6px;
}


.price-history-item {
    margin-bottom: 12px; /* odstęp między wierszami */
}


.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-overlay.is-open {
    display: flex;
}

.modal {
    background: #fff;
    padding: 30px;
    max-width: 500px;
    width: 100%;
    position: relative;
    border-radius: 10px;
	border: 1px solid #ccc; /* szary border */
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 24px;
    background: none;
    border: 0;
    cursor: pointer;
}

/* Wjazd od lewej */
.fade-in-left {
  opacity: 0;
  transform: translateX(-80px);
  transition: all 0.8s ease-out;
}

/* Wjazd od prawej */
.fade-in-right {
  opacity: 0;
  transform: translateX(80px);
  transition: all 0.8s ease-out;
}

/* Po pojawieniu się w widoku */
.fade-in-left.visible,
.fade-in-right.visible {
  opacity: 1;
  transform: translateX(0);
}


.price-history-btn,
.price-history-btn *,
.price-history-btn:hover,
.price-history-btn:hover * {
    cursor: pointer !important;
}

.fb-container .socialmedia {
    padding: 45px 0 0 24px;
}

.fb-container .socialmedia svg {
    width: 24px;
    height: auto;
    display: block;
}

				.socialmedia svg {
					width: 24px;
					height: 24px;
					fill: #000;
					transition: fill .2s;
				}

				.socialmedia:hover svg {
					fill: #5c96c4;
				}



.f-sm .f-social {
    display: inline-block;
}

.f-sm .f-social svg {
    width: 24px;
    height: 24px;
    display: block;
    padding: 27px 20px 0 0; /* ← TU */
    fill: #fff;
    transition: fill .2s;
}

.f-sm .f-social:hover svg {
    fill: #5c96c4;
}


.modal-overlay {
    position: fixed !important;
    inset: 0;                  /* top:0; right:0; bottom:0; left:0 */
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.35);
    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease;
}

.modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal {
    background: #fff;
    border-radius: 15px;
    padding: 35px 40px;
    width: 650px;
    max-width: 90%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,.25);
    position: relative;
}

.wpcf7 form .wpcf7-response-output {border: 0px;}

#faqs h3, 
#faqs div {font-size:14px;}

#faqs h3 {cursor: pointer;}

.slider-container-phone {display: none;}