/* #region Fonts */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
/* @font-face { font-family: 'Nunito Sans';src: url('/assets/fonts/nunito-sans-200.woff2') format('woff2');font-weight: 200;font-style: normal;font-display: swap; }
@font-face { font-family: 'Nunito Sans';src: url('/assets/fonts/nunito-sans-400.woff2') format('woff2');font-weight: 400;font-style: normal;font-display: swap; }
@font-face { font-family: 'Nunito Sans';src: url('/assets/fonts/nunito-sans-500.woff2') format('woff2');font-weight: 500;font-style: normal;font-display: swap; }
@font-face { font-family: 'Nunito Sans';src: url('/assets/fonts/nunito-sans-600.woff2') format('woff2');font-weight: 600;font-style: normal;font-display: swap; }
@font-face { font-family: 'Nunito Sans';src: url('/assets/fonts/nunito-sans-700.woff2') format('woff2');font-weight: 700;font-style: normal;font-display: swap; }
@font-face { font-family: 'Nunito Sans';src: url('/assets/fonts/nunito-sans-800.woff2') format('woff2');font-weight: 800;font-style: normal;font-display: swap; }

@font-face { font-display: swap; font-family: 'Lato'; font-style: normal; font-weight: 100; src: url('./assets/fonts/lato-v25-latin-100.woff2') format('woff2');}
@font-face { font-display: swap; font-family: 'Lato'; font-style: normal; font-weight: 300; src: url('./assets/fonts/lato-v25-latin-300.woff2') format('woff2');}
@font-face { font-display: swap; font-family: 'Lato'; font-style: normal; font-weight: 400; src: url('./assets/fonts/lato-v25-latin-regular.woff2') format('woff2');}
@font-face { font-display: swap; font-family: 'Lato'; font-style: normal; font-weight: 700; src: url('./assets/fonts/lato-v25-latin-700.woff2') format('woff2');}
@font-face { font-display: swap; font-family: 'Lato'; font-style: normal; font-weight: 900; src: url('./assets/fonts/lato-v25-latin-900.woff2') format('woff2');} */
/* #endregion Fonts */

/* #region Reset 2026 CSS */
  *,*::before,*::after{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased;}
  article,aside,details,figcaption,figure,footer,header,main,nav,section{display:block;}
  h1,h2,h3,h4,h5,h6,p,blockquote,pre{margin:0;overflow-wrap:break-word;}
  img,picture,video,canvas,svg{display:block;max-width:100%;}
  ol,ul{list-style:none;padding:0;margin:0;}
  table{border-collapse:collapse;border-spacing:0;}
  th,td{text-align:left;padding:0;}
  input,button,textarea,select{font:inherit;color:inherit;}
  button{background:none;border:none;padding:0;cursor:pointer;}
  fieldset,legend{margin:0;padding:0;border:0;}
  a{text-decoration:none;color:inherit;}
  pre,code{font-family:monospace,monospace;}
/* #endregion Reset CSS */

/* #region Variables CSS */
  :root {
    /* Colors */
    --color-primary: #232323;
    --color-secondary: #f4f4f4;
    --color-text-primary: #3b3a3a;
    --color-link: #292928;
    --color-link-hover: #3a3a39;
    --color-title: #fff;
    --color-headings: #fefefe; 
    --color-border: #c9c2c2;
    --color-cards: #f9f5f0;
    --color-background-white: #fff;
    --color-background-dark: #232323;
    --color-background-footer: #272727;

    /* Typography */
    --font-family-base: "Lato", sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.5;
    --line-height-heading: 1.2;
    --font-weight-light: 200;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --font-size-h1: 3rem;
    --font-size-h2: 2.5rem;
    --font-size-h3: 2rem;
    --font-size-h4: 1.5rem;
    --font-size-h5: 1.25rem;
    --font-size-h6: 1rem;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
    --space-xl: 64px;
    --space-xxl: 128px;

    /* Radius & Shadows */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.15);

    /* Breakpoints & Grid */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-xxl: 1400px;
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-xxl: 1320px;
    --gutter-x: 1.25rem;

    /* Z-index */
    --zindex-hero: 10;
    --zindex-mobile-menu: 1000;
    --zindex-dropdown: 1010;
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-offcanvas-backdrop: 1040;
    --zindex-offcanvas: 1045;
    --zindex-modal-backdrop: 1050;
    --zindex-modal: 1055;
    --zindex-popover: 1070;
    --zindex-tooltip: 1080;
    --zindex-toast: 1090;
  }
/* #endregion Variables CSS */

/* #region Basic CSS */
  /* Basic */
  html, body { height: 100%; margin: 0; }
  html { font-size: var(--font-size-base); scroll-behavior: smooth; }
  body { font-family: var(--font-family-base); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-text); background-color: var(--color-background);
    min-height:100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  
  /* --- Typography --- */
  h1, .h1 { font-size: 1.25rem; line-height: 1.375rem; font-weight: 400; color: var(--color-title); letter-spacing: 0.02em; }
  @media (min-width: 768px) { h1, .h1 { font-size: 1.5rem; line-height: 1.375rem; } }
  @media (min-width: 1200px) { h1, .h1 { font-size: 2rem; } }

  h2, .h2 { font-size: 1.25rem; font-weight: 600; line-height: 1.4; margin-bottom: 2.5rem; color: var(--color-primary); text-align: center; }
  @media (min-width: 768px) { h2, .h2 { font-size: 2rem; line-height: 1.2; margin-bottom: 5rem; } }
  @media (min-width: 1200px) { h2, .h2 { font-size: 2.5rem; margin-bottom: 7.5rem; } }

  h3, .h3 { font-size: 0.875rem; font-weight: 500; line-height: 1.2; margin-bottom: 0.75rem; color: #262525; }
  @media (min-width: 768px) { h3, .h3 { font-size: 1.6875rem; } }
  @media (min-width: 1200px) { h3, .h3 { font-size: 1.875rem; line-height: 1.5; } }


  /* H4 */
  /* h4, .h4 {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0.75rem;
    color: #262525;
  }
  @media (min-width: var(--bp-lg)) { h4, .h4 { font-size: 1.375rem; } }
  @media (min-width: var(--bp-xl)) { h4, .h4 { font-size: 1.5rem; } } */

  h5, .h5 {font-size: 1rem;font-weight: 500;line-height: 1.2;margin-bottom: 1rem;color: #262525;}
  @media (min-width: 576px) {h5, .h5 {font-size: 0.875rem;}}
  @media (min-width: 992px) {h5, .h5 {font-size: 1rem;}}
  @media (min-width: 1200px) {h5, .h5 {font-size: 1.7rem;}}
  @media (min-width: 1400px) {h5, .h5 {font-size: 1rem;}}

  h6, .h6 {font-size: 0.625rem;font-weight: 500;line-height: 1.2;margin-bottom: 1.5rem;color: #262525;font-weight: 400;text-transform: uppercase;}
  @media (min-width: 768px) {h6, .h6 {font-size: 0.75rem;}}
  @media (min-width: 992px) {h6, .h6 {font-size: 0.875rem;}}
  @media (min-width: 1200px) {h6, .h6 {font-size: 1rem;}}

  p { font-size: .875rem; line-height: 1.75; font-weight: 400; padding-bottom: 1rem; }
  @media (min-width: 992px) { p { font-size: 1rem; } }

  a {font-size: 1rem; line-height: 1.5; font-weight: regular; text-decoration: none; background-color: var(--transparent);color: var(--primary); transition:color 0.3s; }
  @media (min-width: 576px) {a {font-size: 0.75rem;}}

  .blockquote, blockquote {border-left: 1px solid var(--gray-300);font-size: 1rem;padding: 0 0 0 1.5rem;}
  strong, .strong { font-weight: 600; }
  b { font-weight: 900; }
  small, .small { font-size: 50%; }
  sub, sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
  sub {bottom: -0.25em;}
  sup {top: -0.5em;}
  del {text-decoration-color: var(--primary);}
  pre {font-family: monospace, monospace;font-size: 1em;}

/* #endregion Basic CSS */

/* Style */

/* #region Menu */
/* Menu Top */ 
.header { position: sticky; top: 0; z-index: var(--zindex-sticky); padding-block: 20px; width: 100%; background-color: var(--color-background-white); }
.menu { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-inline: 0; position: relative; }
.navbar-logo img { display: block; height: auto; width: 140px; margin-left: 1rem; }
.navbar-toggler { order: 2; cursor: pointer; margin-right: 1rem; }
.navbar-toggler img { display: inline-block; height: 14px; width: auto; }
.navbar-nav { display: none; flex-direction: column; gap: 32px; flex: 1; justify-content: start; text-align: right; position: absolute; top: 100%; right: 0; 
  width: 100%; background-color: var(--color-background-white); padding: 1rem 0; z-index: var(--zindex-mobile-menu); }
.navbar-nav.active { display: flex; height: 100vh; width: 70%; padding-right: 20px; padding-top: 40px; }
.nav-item a { text-decoration: none; color: #000; font-weight: 500; line-height: 2; font-size: 1rem; cursor: pointer; }
.nav-item a:hover { text-decoration: underline; }
.navbar-contact { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.navbar-contact .circle { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background-color: #000000; color: #fff; cursor: pointer; }
.navbar-contact .circle svg { width: 50%; height: 50%; }
.navbar-contact a { font-size: 16px; line-height: 1.2; letter-spacing: 0.05em; color: var(--color-link); }

@media (min-width: 768px) { 
  .navbar-logo img { width: 175px; }
  .nav-item a { font-size: 18px; }
  .navbar-contact .circle { width: 40px; height: 40px; }
  .navbar-contact a { font-size: 18px; line-height: 1.2; letter-spacing: 0.05em; }
  .menu { justify-content: space-between; padding-inline: 1rem; }
  .navbar-nav { flex-direction: column; width: 70%; right: 0; top: 100%; padding-top: 40px; padding-right: 20px; background-color: var(--color-background-white); }
}

@media (min-width: 1200px) { 
  .menu { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-inline: 2rem; }
  .navbar-logo img { width: 217px; }
  .navbar-nav { position: static; display: flex; flex-direction: row; justify-content: center; gap: 32px; text-align: center; background: none; width: auto; flex: 1; }
  .nav-item a { font-size: 14px; }
  .navbar-toggler { display: none; } 
  .navbar-contact { flex: 0 0 auto; }
  .navbar-contact .circle { width: 34px; height: 34px; }
  .navbar-contact a { font-size: 16px; line-height: 1.2; letter-spacing: 0.05em; }
}
/* #endregion Menu */

/* #region Hero */
/* Hero */
.hero { position: relative; display: grid; width: 100%; min-height: calc(100vh - 77px); overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0; background:rgba(0,0,0,0.25); z-index: var(--zindex-base); }
.hero-img { position: absolute; inset: 0; z-index: 0; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-text { position: relative; align-self: center; text-align: center; color: #fff; z-index: var(--zindex-hero); }
.subtitle { display: inline-block; font-size: 3.5rem; line-height: 1.27; font-weight: 100; white-space: pre-line; padding-inline: 1rem; margin-bottom: 1.875rem; }
.subtitle::after { content: ""; }

@media (min-width: 768px) { 
  .subtitle { font-size: 5rem; line-height: 1.5; /*padding-inline: 30px;*/ margin-bottom: 3.125rem;}
}

@media (min-width: 1025px) { 
  .subtitle { font-size: 7.5rem; line-height: 1.25; font-weight: 100; margin-bottom: 3rem; }
}
/* #endregion Hero */

/* #region Inwestycja */
/* Inwestycja */
.investition-section { display: grid; grid-template-columns: 1fr; width: 100%; padding-block: 80px; padding-inline: 16px; }
.investition-description { display: grid; grid-template-columns: 1fr; }
.accordion { width: 100%; cursor: pointer; margin-top: 40px; }
.accordion-header { display: flex; align-items: center; justify-content: space-between; width: 100%; font-size: .875rem; line-height: 2.4; font-weight: 500; justify-content: space-between; cursor: pointer; padding: .625rem; background-color: var(--color-cards); border: 1px solid var(--color-border); border-radius: 4px; transition: all 0.4s; }
.accordion-body { display: none; overflow: hidden; width: 100%; justify-content: space-between; cursor: pointer; margin-bottom: 1em; padding: .625rem; background-color: var(--color-background-white); border: 1px solid var(--color-border); border-radius: 4px; }
.accordion-header.active + .accordion-body { display: flex; }
.accordion-header svg.arrow { display: block; height: 1rem; width: auto; transition: transform 0.3s ease; }
.accordion-header.active svg.arrow { transform: rotate(90deg); }
.acc-item a { display: inline-flex; align-items: center; gap: .5rem; color: inherit; font-size: .875rem; line-height: 2.4; font-weight: 400; }
.doc-icon { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; }
.acc-item a:hover, .doc-icon:hover { opacity: .7; text-decoration: underline; } 

.info-blocks { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: stretch; justify-items: stretch; margin-top: 16px; }
.info-blocks-item { display: grid; justify-content: start; width: 100%; min-height: 160px; padding: 1rem; background-color: #f9f5f0; border-radius: 4px; }
.info-blocks-title { font-size: .75rem; line-height: 1.1; letter-spacing: 2px; color: #656464; }
.info-blocks-item h3 { font-size: 2.25rem; line-height: 1.2; font-weight: 700; margin-bottom: 0; padding-bottom: 80px; }

@media (min-width: 768px) {
  .investition-section { width: 100%; padding-block: 100px; padding-inline: 32px; }
  .accordion-header { font-size: 1rem; }
  .acc-item a { font-size: 1rem; }
  .info-blocks { grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 2rem; }
  info-blocks-item { display: grid; justify-content: start; width: 100%; min-height: 160px; padding: 2rem; }
  .info-blocks-title { font-size: 14px; line-height: 1.2; }
  .info-blocks-item h3 { font-size: 2.625rem; line-height: 1.1; padding-bottom: 80px; }

}
@media (min-width: 1200px) {
    .investition-section { width: 100%; padding-block: 120px; }
    .investition-description { grid-template-columns: 3fr 1fr; gap: 70px; max-width: 1170px; margin: 0 auto; }
    .accordion { margin-top: 0; }
    .info-blocks { grid-template-columns: repeat(4, 1fr); margin-top: 80px; }
    .info-blocks-title { font-size: 1rem; line-height: 1.2; }
    .info-blocks-item h3 { font-size: 3.75rem; line-height: 1.5; padding-bottom: 80px; }
}

/* #endregion Inwestycja */

/* #region Udogodnienia */
/* Udogodnienia */
.facilities-section { width: 100%; padding-block: 80px; background-color: #2a2a2a; }
.facilities-section h2 { color: #fff; }
.facilities-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem 1rem; padding-inline: 1rem; color: #fff; }

/* Iconbox */
.icon-box { display: grid; grid-template-columns: 1fr; gap: 1rem; justify-items: center; align-content: start; text-align: center; margin: 0 auto; }
.icon-box svg { display: block; width:auto; height: 32px; fill: #c9c2c2; }
.icon-box p { font-size: 12px; line-height: 20px; color: #c9c2c2; font-weight: 400; }

@media (min-width: 768px) {
  .facilities-section { padding-block: 100px; }
  .facilities-icons { grid-template-columns: repeat(4, 1fr); gap: 40px 54px; padding-inline: 2rem; }
  .icon-box { gap: 1.75rem; }
  .icon-box svg { height: 48px;  }
  .icon-box p { font-size: 14px; line-height: 20px; }
}

@media (min-width: 1200px) { 
  .facilities-section { padding-block: 120px; }
  .facilities-icons { grid-template-columns: repeat(6, 1fr); gap: 80px 100px; padding-inline: 0; width: 1170px; margin: 0 auto; }
  .icon-box { gap: 2rem; }
  .icon-box svg { height: 55px;  }
  .icon-box p { font-size: 1rem; line-height: 22px; }
}

/* #endregion Udogodnienia */

/* #region Lokalizacja */
/* Lokalizacja */
.location-section { width: 100%; padding-block: 80px; }
.location-container { display: grid; grid-template-columns: 1fr; row-gap: 28px; padding-inline: 1rem; justify-content: center; align-items: stretch; }
.location-container h2 {margin-bottom: 0; }
.location-container p { text-align: center; line-height: 1.7; padding-bottom: 0; margin: 0 auto; }

@media (min-width: 768px) {
  .location-section { padding-block: 100px; }
  .location-container { padding-inline: 2rem; }
}
@media (min-width: 1200px) { 
  .location-section { padding-block: 120px; }
  .location-container { padding-inline: 0; width: 1170px; margin: 0 auto; }
  .location-container p { max-width: 960px; }
}

.polaroid-section { display: grid; grid-template-columns: 1fr; grid-template-rows: max-content max-content; gap: 1.5rem; justify-content: stretch; align-items: stretch; }
.polaroid { width: 100%; background-color: #fff; }
.polaroid img { max-height: 328px; width: 100%; border-radius: 6px; object-fit: cover; aspect-ratio: 3 / 2; }
.polaroid-container { background-color: #fff; }
.polaroid-container p { text-align: start; font-size: .75rem; font-weight: 600; line-height: 1.125; color: #3b3a3a; padding-block: 1rem;}
.polaroid-caption { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; }

/* tooltip */
.tooltip { position: relative; display: inline-flex; cursor: pointer; }
.tooltip svg { color: #3b3a3a; width: 14px; height: 14px; }
.tooltip-content { position: absolute; bottom: 125%; left: 50%; transform: translateX(-50%); width: 220px; padding: 10px 12px; background-color: #2b2b2b; color: #fff; 
  font-size: 0.7rem; line-height: 1.4; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 10; }
.tooltip-content a { font-size: 0.7rem; color: #fff; }
.tooltip:hover .tooltip-content, .tooltip:focus-within .tooltip-content { opacity: 1; pointer-events: auto; } 
 
@media (min-width: 768px) {
  .polaroid-section { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; margin-top: 40px; }
  .polaroid img { max-height: 344px; }
  .polaroid-container p { font-size: .875rem; line-height: 20px; }
}
@media (min-width: 1200px) {  
  .polaroid img { max-height: 480px; }
  .polaroid-container p { line-height: 28px; }
}

.location-icons-section { display: grid;  grid-template-columns: repeat(3, 1fr); gap: 1.25rem; justify-items: center; align-content:center ; text-align: center;}
.location-icon-box { display: grid; grid-template-columns: 1fr; gap: 1rem; justify-items: center; align-content: start; text-align: center; margin: 0 auto; }
.location-icon-box img { display: block; width: 44px; height: 53px; margin: 0 auto; }
.location-icon-box p { font-size: 12px; line-height: 12px; color: #3b3a3a; font-weight: 700; text-align: center; }
.location-icon-box span { display: block; padding: 5px 10px; border-radius: 999px; border: 0.5px solid #c9c2c2; background-color: #f8f4ef; font-size: 10px; line-height: 18px; color: #6f6555; font-weight: 500; font-style: italic; text-align: center; }

@media (min-width: 768px) { 
  .location-icons-section { grid-template-columns: repeat(5, 1fr); column-gap: 3rem; margin-top: 80px; }
  .location-icon-box { gap: 1.5rem; }
  .location-icon-box img { width: 66px; height: 80px; }
  .location-icon-box p { font-size: 16px; line-height: 24px; }
  .location-icon-box span { font-size: 14px; line-height: 18px; }
}

@media (min-width: 1200px) {
  .location-icons-section { grid-template-columns: repeat(5, 1fr); max-width: 1170px; margin: 0 auto; margin-top: 80px; }
  .location-icon-box { gap: 1.875rem; white-space: nowrap; }
  .location-icon-box img { width: 88px; height: 105px; }
  .location-icon-box p { font-size: 1rem; line-height: 24px; }
} 
/* #endregion Lokalizacja */

/* #region Mieszkania */
/* #region Filtry */
/* filtry */
.filter-wrapper { width: 100%; }
.filter-box { background: #6e6a65; padding: 20px; margin: 0 16px; }
.filter-container { display: none; grid-template-columns: 1fr; gap: 1rem; align-items: center; }
.filter-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; background: none; border: none; font-weight: 600; color: #fff; cursor: pointer; margin-bottom: 0; }
.filter-box.active .filter-toggle { margin-bottom: 12px; }

.filter-container select { font-size: 12px; line-height: 24px; background-color: #ffffff; font-weight: 500; border: 1px solid #ccc; padding: 0 40px 0 12px; height: 36px; appearance: none; cursor: pointer; outline: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708"/></svg>');
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 16px;
}
.filter-container select option { border: 1px solid #ccc; border-radius: 6px; padding: 6px 12px; font-size: 12px; line-height: 20px; font-weight: 500; background-color: #ffffff; color: #333; }
.clear-filters { grid-column: 1 / -1; justify-self: end; font-size: 0.875rem; text-decoration: underline; color: #fff; cursor: pointer; }
.filter-box.active .filter-container { display: grid; }
.icon svg { width: 1.5rem; height: 1.5rem; }
.icon-minus { display: none; }
.filter-box.active .icon-plus { display: none; }
.filter-box.active .icon-minus { display: inline-block; }

/* .view-icons { display: flex; justify-content: center; align-items: center; gap: 0.75rem; margin-block: 2rem; }
.view-icons button { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.view-icons button + button { margin-left: 0.25rem; }
.view-icons p { display: inline-flex; align-items: center; margin: 0 0.25rem 0 0; padding-bottom: 0; font-size: 1rem; }
.view-icons svg { display: block; width: 1.5rem; height: 1.5rem; opacity: 0.4; transition: opacity 0.2s ease, transform 0.2s ease; }
.view-icons button.active svg { opacity: 1; transform: scale(1.05); } */

@media (min-width: 768px) {
  .filter-box { padding: 20px; margin: 0 2rem; }
  .filter-container { grid-template-columns: repeat(2, 1fr); }
  .clear-filters { grid-column: 2; justify-self: end; align-self: center; }
  /* .view-icons { gap: 1rem; margin-block: 2.5rem; }
  .view-icons svg { width: 2rem; height: 2rem; } */
}

@media (min-width: 1200px) {
  .filter-box { margin: 0; }
  .filter-toggle { display: none; }
  .filter-container { display: grid; grid-template-columns: repeat(5, 1fr) auto; align-items: center; max-width: 1170px; gap: 1rem; margin: 0 auto; }
  .clear-filters { grid-column: auto; white-space: nowrap; align-self: center; justify-self: end; }
}
/* #endregion Filtry */
/* #region grid mieszkania */
/* grid cards mieszkania */
.flat-grid-wrapper { display: grid; grid-template-columns: 1fr; gap: 1rem; padding-inline: 1rem; margin-bottom: 5rem; }
.flat-card { width: 100%; border-radius: 6px; border: 0.25px solid #1d1a17; background-color: #ffffff; padding: 2.5rem 1.375rem; }
.flat-card h3 { font-size: 1.5rem; line-height: 1.3; font-weight: 800; color: #000000; margin-bottom: 1.875rem; }
.fc-flat-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: center; }
.fc-flat-info span { font-size: .875rem; color: #353535; }
.fc-flat-info p { font-size: 1rem; font-weight: 700; margin: .25rem 0 0; }
.fc-flat-img img { display: block; width: 100%; height: auto; margin-block: 2.5rem 3.375rem; }
.fc-prices { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; }
.fc-prices-info p { font-size: 1rem; font-weight: 700; padding-bottom: .5rem; margin: 0 0 .25rem; }
.fc-prices-info span { font-size: .75rem; }
.fc-prices-links { display: flex; flex-direction: column; gap: .5rem; }
.fc-prices-links a { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: inherit; text-decoration: none; cursor: pointer; }
.fc-prices-links a svg { width: .875rem; height: .875rem; flex-shrink: 0; }
.fc-prices-links a:hover { text-decoration: underline; }

@media (min-width: 768px) {
  .flat-grid-wrapper { grid-template-columns: repeat(2, 1fr); padding-inline: 2rem; margin-bottom: 6.25rem; }
  .flat-card { padding: 2.5rem 2.125rem; }
  .flat-card h3 { font-size: 1.625rem; margin-bottom: 2.5rem; }
  .fc-prices-info p { font-size: 1.25rem; }
  .fc-prices-info span { font-size: .875rem; }
  .fc-prices-links a { font-size: 1rem; }
  .fc-prices-links a svg { width: 1rem; height: 1rem; }
}

@media (min-width: 1200px) {
  .flat-grid-wrapper { grid-template-columns: repeat(3, 1fr); gap: 1.875rem; max-width: 1170px; margin: 0 auto; padding-inline: 0; margin-bottom: 6.875rem; }
  .flat-card { padding: 2.5rem 1.5rem; }
  .flat-card h3 { font-size: 1.5rem; margin-bottom: 2.25rem; }
}
/* #endregion grid mieszkania */
/* #region tabela mieszkań */
  /* tabela mieszkań */

.table-wrapper.active { display: block; }
.flat-grid-wrapper.hidden { display: none; }
.table-wrapper { margin-inline: 16px; overflow-x: auto; margin-top: 2rem; }
table { width: 100%; table-layout:auto; border-collapse: separate; border-spacing: 0;  }
td, th { font-size: 14px; line-height: 1.2; white-space: nowrap; text-align: center; }
th { padding-block: 12px; padding-inline: 20px; background-color: #222220; color: white; }
th:first-child { border-top-left-radius: 999px; border-bottom-left-radius: 999px; width: auto; }
th:last-child { border-top-right-radius: 999px; border-bottom-right-radius: 999px; width: auto; }
tbody tr:hover { background-color: #dee2e6; }

td { padding: 12px 25px; border-bottom: .25px solid #dee2e6; color: #000; }
td p { font-size: 14px; padding-bottom: 0; }
td span { font-size: 12px; color: #656464; margin: 0; }
td a { font-size: 14px; margin: 0; padding: 0; }
td a svg { width: 16px; height: auto; display: inline-block; vertical-align: middle; }
td span.status { text-transform: uppercase; letter-spacing: .03em; border-radius: 999px; vertical-align: middle; padding-block: 5px; padding-inline: 12px; font-size: 14px; line-height: 12px; color: #fff; }
.wolne { background-color: #677a5f; }
.rezerwacja { background-color: #9e5c28; }
.sprzedane { background-color: #b42318; color: #fff; }
td .open_modal_btn { display: inline-block; vertical-align: middle; padding-block: 5px; padding-inline: 12px; font-size: 14px; line-height: 12px; font-weight: 600; }

th:nth-child(2), td:nth-child(2) { min-width: 180px; white-space:unset; }
th:nth-child(3), td:nth-child(3) { width: 48px; padding-inline: 0; text-align: center; }
td:nth-child(3) a { display: flex; justify-content: center; }

.add-info .parking-price { padding-bottom: 0; }
/* .add-info > p:first-child & .add-info > p:last-child { padding-bottom: 1rem; } */

@media (min-width: 768px) { 
  .table-wrapper { margin-inline: 2rem; margin-top: 2.5rem; } 
}
@media (min-width: 1200px) { 
  .table-wrapper { max-width: 1170px; margin-inline: auto; margin-top: 5rem; } 
}
/* #endregion tabela mieszkań */

.button-section { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 40px; }
.button-section button { padding-block: 12px; padding-inline: 20px; text-align: center; border: none; background-color: #222220; color: white; font-size: 14px; cursor: pointer; }

@media (min-width: 1200px) {
  .button-section { max-width: 1170px; margin-inline: auto; }
}

.add-info { padding-inline: 16px; margin-top: 40px; }
@media (min-width: 768px) { 
  .add-info { margin-inline: 32px; margin-top: 80px; } 
}
@media (min-width: 1200px) { 
  .add-info { max-width: 1170px; margin-inline: auto; } 
}
/* #endregion Mieszkania */

/* #region Modal */
.modal { display: none; position: fixed; z-index: var(--zindex-modal); padding-block: 100px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); filter: drop-shadow(0px 10px 27.5px rgba(0,0,0,0.15)); }
.modal-wrapper { display: grid; grid-template-columns: 1fr; width: 300px; margin: auto; background-color: #ffffff; }
.modal-top-bar { display: grid; grid-template-columns: 1fr auto; height: 36px; border-bottom: 1px solid #cfcdcd; }
.modal-title { padding-left: 36px; background-color: #353535; display: flex; align-items: center; }
.modal-title p { font-size: 14px; padding-bottom: 0; color: #ffffff; font-weight: 700; margin: 0; }
.close { aspect-ratio: 1 / 1; height: 100%; display: grid; place-items: center; }
.close svg { width: 18px; height: 18px; color: #a3a3a3; cursor: pointer; }
.close svg:hover, .close svg:focus { color: #000; text-decoration: none; }
.modal-content { display: grid; grid-template-columns: 1fr; padding-inline: 36px; padding-block: 30px 50px; }
.modal-icon { display: grid; grid-template-columns: auto 1fr; gap: 2rem;  justify-items: start; }
.modal-icon p { font-size: 13px; line-height: 16px; padding-block: 4px; }
.modal-icon svg { display: block; width: 25px; height: 30px; }
.modal-prices-info { margin-top: 20px; }
.modal-prices-info p { font-size: 13px; line-height: 16px; padding-bottom: 8px; }
.highlighted-price { font-weight: 700; }
.modal-prices-list { margin-top: 24px; }
.modal-prices-list h4 { display: flex; justify-content: space-between; align-items: center; background-color: #353535; color: #ffffff; font-size: 12px; letter-spacing: 1px; padding: 8px 16px; border-radius: 999px; margin: 0 0 12px 0; }
.modal-prices-list ul { list-style: none; margin: 0; padding-inline: 8px; }
.modal-prices-list li { display: grid; grid-template-columns: 1fr; padding-bottom: 8px; font-size: 12px; line-height: 18px; }
.modal-prices-list li p { margin: 0; padding-bottom:0; }


@media (min-width: 768px) {
  .modal-wrapper { width: 668px; }
  .modal-top-bar { height: 71px; }
  .modal-title { padding-left: 70px; }
  .modal-title p { font-size: 20px; }
  .close svg { width: 32px; height: 32px; }
  .modal-content { padding-inline: 70px; padding-block: 60px 100px; }
  .modal-icon { margin-bottom: 40px; align-items: center; }
  .modal-icon p { font-size: 20px; line-height: 32px; }
  .modal-icon svg { width: 49px; height: auto; }
  .modal-prices-info p { font-size: 20px; line-height: 32px; padding-block: 8px; }
  .modal-prices-list h4 { font-size: 16px; padding: 15px 20px; }
  .modal-prices-list ul { padding-inline: 16px; }
  .modal-prices-list li { grid-template-columns: auto 1fr; }
  .modal-prices-list li p { font-size: 16px; line-height: 28px; }
  .modal-prices-list li p:last-child { text-align: right; }
}

/* #endregion Modal */

/* #region Galeria */

.gallery { padding-block: 100px; padding-inline: 0 20px; }
.gallery-header { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; }
.gallery h2 { margin: 0; text-align: center; flex: 1 1 auto; }
.gallery-slider { margin-top: 40px; }
.my-slider { background-color: #fff; padding-right: 16px; }
.slide { width: 220px; height: 180px; background-color: transparent; flex: 0 0 auto; }
.slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-buttons { display: none; gap: 10px; }
.gallery-buttons button { width: 74px; height: 73px; background-color: #ffffff; border: 0.5px solid #c5c3c3; cursor: pointer; }
.gallery-buttons button svg { margin: 0 auto; }

@media (min-width: 768px) {
.gallery { padding-block: 100px; padding-inline: 0 32px; }
.gallery-slider { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: end; margin-top: 100px; }
.gallery-buttons.gallery-buttons-tablet { display: flex; flex-direction: column; justify-content: flex-start; }
.gallery-buttons.gallery-buttons-tablet button { margin-bottom: 32px; }
.slide { max-width: 344px; height: 240px; }
}

@media (min-width: 1200px) {
.gallery { padding-block: 120px; padding-inline: 0 100px; }
.gallery-header { max-width: 1170px; margin: 0 auto 24px; justify-content: space-between; }
.gallery h2 { padding-bottom: 30px; }
.gallery-slider { margin-top: 60px; }
.gallery-buttons.gallery-buttons-tablet { display: none; }
.gallery-buttons.gallery-buttons-desktop { display: flex; gap: 32px; }
.gallery-buttons.gallery-buttons-desktop button { width: 30px; height: 49px; margin: 0; border: 1px solid #656464; }
.my-slider { padding-right: 95px; }
.slide { max-width: 442px; height: 360px; }
}

/* #endregion Galeria */

/* #region Kontakt */
.contact-section { width: 100%; background-color: #f9f5f0; padding-block: 40px; }
.contact-wrapper { padding-inline: 16px; background-color: #f9f5f0; }
.contact-wrapper h2 { margin: 0; text-align: center; flex: 1 1 auto; }
.contact-info { display:grid; grid-template-columns: 1fr; margin-top: 40px; }
.contact-info-map iframe { height: 230px; width: 100%; border: 0; opacity: 0.851; }
.contact-info-card { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 30px; background-color: #2a2a2a; }
.contact-info-card > h3 { grid-column: 1 / -1; font-size: 16px; line-height: 21px; color: #ffffff; font-weight: 700; }
.contact-info-item .info-item-title { display: block; white-space: nowrap; font-size: 14px; line-height: 21px; color: #ffffff; font-weight: 500; margin-bottom: 1rem; padding-bottom: 0; }
.contact-info-item p { font-size: 12px; line-height: 14px; color: #9f9f9f; font-weight: 400; padding-bottom: 8px; }

@media (min-width: 768px) { 
.contact-section { padding-block: 80px; }
.contact-wrapper { padding-inline: 32px; }
.contact-info { position: relative; margin-top: 60px; padding-bottom: 100px; }
.contact-info-map iframe { height: 420px; width: 100%; border: 0; }
.contact-info-card { position: absolute; left: 50%; bottom: -50px; transform: translateX(-50%); width: 523px; height: 255px; padding: 60px 40px; }
.contact-info-item .info-item-title { font-size: 1rem; line-height: 21px; }
.contact-info-item p { font-size: 1rem; line-height: 18px; }
}

@media (min-width: 1200px) {
.contact-section { padding-block: 100px; }
.contact-wrapper { max-width: 1170px; padding-inline: 0; margin: 0 auto; }
.contact-info { display: grid; grid-template-columns: 400px 1fr; padding-bottom: 0; }
.contact-info-card { position: static; background-color: #2a2a2a; padding: 60px; grid-template-columns: 1fr; transform: none; left: auto; bottom: auto; width: auto; height: auto; max-width: 400px; }
.contact-info-map { order: 2; }
.contact-info-map iframe { height: 100%; min-height: 420px; }
.contact-info-card > h3 { font-size: 28px; line-height: 42px; }
.contact-info-item .info-item-title { line-height: 24px; }
.contact-info-item p { line-height: 22px; }
}

/* Form section */
.contact-form-section { display: grid; grid-template-columns: 1fr; }
.form-wrapper { padding-inline: 16px; margin-top: 40px; }
.form-wrapper h3 { font-size: 14px; line-height: 21px; font-weight: 700; margin-bottom: 24px; }
.contact-form { width: 100%; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.form-field { display: flex; flex-direction: column; }
.form-field input, .form-field textarea { width: 100%; padding: 12px; border: 1px solid #e6e6e6; font-size: 14px; }
.form-field textarea { min-height: 160px; resize: none; }
.form-field button { padding: 12px 50px; margin-top: 40px; background-color: #494848; align-self: flex-end; font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: #ffffff; font-weight: 700; text-align: center; border: none; cursor: pointer; }
.form-field.full { grid-column: 1 / -1; }
.checkbox-group { display: flex; flex-direction: column; gap: 12px; font-size: 13px; line-height: 1.4; text-align: justify; }
.checkbox-group label { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start;  }
.form-actions { display: flex; justify-content: flex-end; }
.error { color: red; font-size: 12px; margin-top: 4px; }
/* podświetlenie błędnych inputów */
.form-field.error-field input,
.form-field.error-field textarea { border-color: red; background-color: #fff0f0; }
.form-field .error { display: block; color: red; font-size: 12px; margin-top: 4px; }
.sendMessageInfo { font-size: 12px; color: #494848; }
.checkbox-group label .error { display: block; margin-left: 0; white-space: nowrap; }

/* .consultant-card { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; max-height: 120px; padding-inline: 16px; margin-top: 40px; }
.consultant-img img { width: 170px; height: 120px; opacity: 0.851; object-fit: cover; object-position: top; }
.consultant-info h4 { font-size: 18px; line-height: 22px; }
  .consultant-info p { font-size: 12px; line-height: 14px; }
  .consultant-info a { display: block; font-size: 14px; line-height: 16px; }
  .consultant-info a:hover { text-decoration: underline; } */

@media (min-width: 768px) {
  .form-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .form-wrapper { padding-inline: 32px; margin-top: 100px; }
  .form-wrapper h3 { font-size: 28px; line-height: 42px; }
  .form-field button { margin-top: 40px; }
  /* .consultant-card { max-height: 210px; padding-inline: 32px; margin-top: 40px; }
  .consultant-img { width: 302px; height: auto; }
  .consultant-img img { width: 302px; height: 208px; }
  .consultant-info h4 { font-size: 20px; line-height: 24px; }
  .consultant-info p { font-size: 14px; line-height: 16px; }
  .consultant-info a { display: block; font-size: 16px; line-height: 18px; } */
}

@media (min-width: 1200px) {
  .contact-form-section { grid-template-columns: 1fr; max-width: 1170px; margin: 0 auto; padding-inline: 0; align-items: start; }
  /* .contact-form-section { grid-template-columns: 400px 1fr; max-width: 1170px; margin: 120px auto 0; padding-inline: 0; align-items: start; } */
  /* .form-wrapper { order: 2; padding-inline: 80px 0; margin-top: 0; } */
  /* .consultant-card { order: 1; grid-template-columns: 1fr; width: 400px; max-width: 400px; max-height: none; margin-right: 100px; margin-top: 0; padding-inline: 0; gap: 24px; }
  .consultant-img { width: 400px; height: auto; }
  .consultant-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 1; }
  .consultant-info h4 { font-size: 24px; line-height: 42px; }
  .consultant-info p { font-size: 14px; line-height: 16px; }
  .consultant-info a { display: block; font-size: 16px; line-height: 18px; } */
}

/* #endregion Kontakt */

/* #region Footer */
/* Footer */
.address-section { background-color: #2a2a2a; width: 100%; padding-block: 5rem; font-size: .875rem; line-height: 1.375rem; color: #fff; }
.address-container { display: grid; align-content: space-between; align-items: start; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 1rem; 
  grid-template-areas: "siedziba siedziba" "sprzedaz budynek"; padding-inline: 1rem; }
.add-item h3{ font-size: .875rem; font-weight: 600; margin-bottom: 0; color: #fff; }
.add-item p { padding-bottom: 3px; }
.add-item-1 { white-space: nowrap; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 1rem; margin-bottom: 1rem; grid-template-areas: "title title" "adres1 adres2"; }
.add-item-2, .add-item-3 { display: grid; grid-template-columns: 1fr; grid-template-rows: auto; gap:1rem;}

@media (min-width: 768px) {
.address-container { display: grid; align-content: space-between; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto auto; gap: 1rem; 
  grid-template-areas: "siedziba sprzedaz budynek"; padding-inline: 2rem; }
  .add-item-1 { margin-bottom: 0; }
}

@media (min-width: 1200px) {
  .address-container { max-width: 1170px; margin: 0 auto; padding-inline: 0; }
}

footer, .footer { display:flex; align-items:center; justify-content:space-between; width:100%; max-height: 68px; padding:16px 20px; background:#2a2a2a; color:#98948e; }
.footer-logo img { display:block; width:109px; height:auto; }
.footer .links a { color:#98948e; text-decoration:none; font-size: 10px; }
.footer .links a:hover { text-decoration:underline; }

/* #endregion Footer */