@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap");
html {
  font-size: 0.072083333vw;
  letter-spacing: 2%; }

@media (min-width: 1600px) {
  html {
    font-size: 1.2px; } }

body {
  margin: 0 auto;
  font-family: 'Jost', sans-serif; }
  body main {
    margin-top: 108rem; }

p {
  color: #2E2E2E;
  margin: 0;
  font-size: 14rem;
  font-weight: 300;
  line-height: 24rem; }

h1 {
  font-size: 64rem;
  margin: 0;
  line-height: 68rem;
  font-weight: 500;
  color: white;
  text-shadow: 0rem 4rem 6.2rem rgba(0, 0, 0, 0.71); }

h2 {
  font-size: 40rem;
  line-height: 49rem;
  margin: 0;
  font-weight: 500;
  color: #193E2C; }

h3 {
  font-size: 32rem;
  line-height: 49rem;
  margin: 0;
  font-weight: 500;
  color: #193E2C; }

h4 {
  font-size: 20rem;
  margin: 0;
  font-weight: 500;
  color: #193E2C; }

h5 {
  font-size: 18rem;
  margin: 0;
  font-weight: bold; }

a {
  color: #193E2C; }

section p {
  color: #303A5A; }

li {
  font-size: 14rem;
  color: #2E2E2E;
  font-weight: 300;
  line-height: 24rem;
  padding-left: 10rem; }

strong {
  font-weight: 500;
  color: #2E2E2E; }

.section-wrapper {
  width: 100%;
  display: block; }

section {
  display: block;
  margin: 0 auto;
  max-width: 1094rem;
  margin-bottom: 80rem; }
  section.max-width {
    max-width: 1280rem; }
    section.max-width .inner-section {
      display: block;
      max-width: 1094rem;
      margin: 0 auto; }
  section.green-bg {
    background: #3D6551;
    border-radius: 20rem;
    padding: 50rem 0; }
    section.green-bg.dark {
      background: #193E2C; }
    section.green-bg p, section.green-bg h1, section.green-bg h2, section.green-bg h3, section.green-bg h4, section.green-bg h5, section.green-bg h6, section.green-bg li, section.green-bg strong, section.green-bg a {
      color: white; }

sep {
  display: block;
  height: 20rem; }

.row {
  display: flex;
  width: 100%;
  gap: 80rem;
  justify-content: space-between;
  align-items: stretch; }
  .row.reversed {
    flex-direction: row-reverse; }
  .row .img-container {
    min-width: 340rem;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 12rem; }

.col-50 {
  display: block;
  width: calc(50% - 10rem); }

.w-100 {
  width: 100% !important;
  max-width: 100% !important; }

.h-100 {
  height: 100%; }

.flex {
  display: flex !important; }

.ac {
  align-items: center; }

.sb {
  justify-content: space-between; }

.jc {
  justify-content: center; }

.je {
  justify-content: end; }

.nb {
  border-radius: 0 !important; }

.fitted {
  width: fit-content;
  height: fit-content;
  max-width: 340rem;
  border-radius: 20rem; }

thead {
  height: 50rem;
  background-color: gray;
  border: 1rem solid black;
  font-size: 12rem; }

tr {
  height: 50rem;
  text-align: center;
  border: 1rem solid black; }
  tr td {
    font-size: 12rem; }

img.w-100 {
  width: unset !important;
  margin-right: auto;
  margin-left: auto;
  display: block; }

/* --- KONFIGURACJA --- */
/* Kolory */
/* --- HEADER GŁÓWNY --- */
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1000;
  background-color: white;
  transition: background-color 0.3s, box-shadow 0.3s;
  /* Stan po przewinięciu strony */ }
  header li {
    padding-left: 0; }
  header.scrolled {
    background-color: white;
    box-shadow: 0rem 4rem 10rem 0rem rgba(66, 68, 90, 0.4); }
    header.scrolled .dropdown-wrapper {
      top: 56rem; }
    header.scrolled .navbar {
      height: 80rem; }
    @media (max-width: 1100px) {
      header.scrolled .hamburger img {
        filter: invert(0); } }
  header .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1231rem;
    height: 108rem;
    margin: 0 auto;
    padding: 0 20rem;
    box-sizing: border-box;
    transition: height 0.3s;
    position: relative;
    /* --- STYL KONTAKT BUTTON --- */
    /* --- HAMBURGER (Widoczny tylko na mobile) --- */ }
    header .navbar .logo {
      width: 122rem;
      height: 100%;
      display: block;
      background-image: url("/Assets/Img/Misc/logo.png");
      background-size: contain;
      background-repeat: no-repeat;
      background-position: left center;
      flex-shrink: 0; }
    header .navbar .nav-links-wrapper {
      height: 100%;
      display: flex;
      align-items: center;
      /* [DODANE] Ukrywamy guzik domyślnie (na desktopie) */
      /* --- STYL ELEMENTU MENU (DESKTOP) --- */ }
      header .navbar .nav-links-wrapper .close-menu-btn {
        display: none; }
      header .navbar .nav-links-wrapper .nav-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        height: 100%;
        align-items: center; }
      header .navbar .nav-links-wrapper .nav-item {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        /* --- EFEKT HOVER (ZAKŁADKA) I DROPDOWN --- */ }
        header .navbar .nav-links-wrapper .nav-item .nav-link {
          text-transform: uppercase;
          color: #333;
          font-size: 17rem;
          font-weight: 400;
          text-decoration: none;
          transition: all 0.2s;
          white-space: nowrap;
          display: flex;
          align-items: center;
          padding: 10rem 20rem;
          border-radius: 6rem;
          position: relative;
          z-index: 1002; }
          header .navbar .nav-links-wrapper .nav-item .nav-link.button {
            background: #163e33;
            color: white;
            padding: 11rem 18rem;
            border-radius: 15rem;
            font-weight: 400; }
            header .navbar .nav-links-wrapper .nav-item .nav-link.button:hover {
              background: #236452;
              color: white !important; }
          header .navbar .nav-links-wrapper .nav-item .nav-link.active:not(.button) {
            font-weight: 700; }
        header .navbar .nav-links-wrapper .nav-item:hover .nav-link:not(.button) {
          background-color: #163e33;
          color: #ffffff !important;
          margin-top: -94rem;
          padding-top: 100rem; }
        header .navbar .nav-links-wrapper .nav-item:hover .dropdown-wrapper {
          opacity: 1;
          visibility: visible;
          transform: translateY(0); }
    header .navbar button.contact-btn {
      margin-left: 20rem;
      cursor: pointer; }
    header .navbar .hamburger {
      display: none;
      cursor: pointer;
      width: 40px;
      height: 40px;
      align-items: center;
      justify-content: center;
      z-index: 2000; }
      header .navbar .hamburger img {
        width: 30px;
        height: auto;
        display: block;
        transition: 0.3s; }

/* --- MEGA MENU DESKTOP STYLE (Nowa struktura) --- */
@media (min-width: 1101px) {
  .dropdown-wrapper {
    position: absolute;
    top: 70rem;
    left: 0;
    background-color: #163e33;
    padding: 20rem 30rem;
    border-radius: 0 15rem 15rem 15rem;
    box-shadow: 0 20rem 50rem rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10rem);
    z-index: 1001;
    min-width: 300rem; }
    .dropdown-wrapper .dropdown-columns {
      display: flex;
      gap: 60rem;
      list-style: none;
      padding: 0;
      margin: 0; }
    .dropdown-wrapper .dropdown-column {
      display: flex;
      flex-direction: column;
      min-width: 200rem; }
      .dropdown-wrapper .dropdown-column .column-header {
        color: rgba(255, 255, 255, 0.7);
        font-size: 14rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 500;
        margin-bottom: 20rem;
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 10rem; }
      .dropdown-wrapper .dropdown-column .column-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 12rem; }
        .dropdown-wrapper .dropdown-column .column-list li a {
          color: #ffffff;
          text-decoration: none;
          font-size: 16rem;
          font-weight: 300;
          display: flex;
          align-items: center;
          gap: 12rem;
          transition: transform 0.2s;
          text-wrap: nowrap; }
          .dropdown-wrapper .dropdown-column .column-list li a .icon-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 22rem;
            height: 22rem; }
          .dropdown-wrapper .dropdown-column .column-list li a:hover {
            transform: translateX(5rem);
            font-weight: 500; } }

/* --- MOBILE STYLES (NAPRAWIONE) --- */
@media (max-width: 1100px) {
  header .navbar {
    height: 80px !important;
    padding: 0 20px; }
    header .navbar .contact-btn {
      margin-right: 20rem !important;
      font-size: 0;
      gap: 0;
      padding: 5rem 10rem; }
      header .navbar .contact-btn img {
        width: 20rem;
        height: 20rem; }
    header .navbar .hamburger {
      display: flex; }
    header .navbar .nav-links-wrapper {
      position: fixed;
      top: 10rem;
      left: 10rem;
      width: calc(100% - 20rem);
      height: calc(100vh - 20rem);
      max-width: none;
      background-color: #163e33;
      border-radius: 20rem;
      padding: 80rem 30rem 40rem 30rem;
      /* KLUCZOWE POPRAWKI UKŁADU WERTYKALNEGO: */
      display: none;
      flex-direction: column !important;
      justify-content: flex-start;
      align-items: flex-start;
      transform: scale(0.95);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 10rem 40rem rgba(0, 0, 0, 0.5);
      overflow-y: auto;
      z-index: 2000;
      /* Lista główna - to naprawia problem horyzontalny */ }
      header .navbar .nav-links-wrapper.active {
        transform: scale(1);
        right: auto;
        display: flex; }
      header .navbar .nav-links-wrapper .close-menu-btn {
        display: block;
        /* [DODANE] Pokazujemy guzik na mobile */
        position: absolute;
        top: 25rem;
        right: 85rem;
        background: none;
        border: none;
        color: white;
        font-size: 45rem;
        cursor: pointer;
        z-index: 2001;
        padding: 10rem;
        line-height: 1; }
        header .navbar .nav-links-wrapper .close-menu-btn:hover {
          color: #a6cfa3; }
      header .navbar .nav-links-wrapper .nav-list {
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
        height: auto;
        gap: 15rem;
        margin: 0;
        padding: 0; }
      header .navbar .nav-links-wrapper .nav-item {
        border: none;
        width: 100%;
        display: block;
        /* LINKI GŁÓWNE (Poziom 1) */
        /* --- DROPDOWN (Poziom 2 i 3) --- */ }
        header .navbar .nav-links-wrapper .nav-item .nav-link {
          color: white !important;
          font-size: 26rem;
          font-weight: 400;
          text-transform: uppercase;
          letter-spacing: 1px;
          padding: 10rem 0;
          background: transparent !important;
          border-radius: 0;
          display: flex;
          width: 100%;
          align-items: center;
          justify-content: flex-start; }
          header .navbar .nav-links-wrapper .nav-item .nav-link::after {
            display: none; }
          header .navbar .nav-links-wrapper .nav-item .nav-link::before {
            content: '→';
            transition: transform 0.3s;
            margin-right: 20rem; }
          header .navbar .nav-links-wrapper .nav-item .nav-link:hover {
            color: #a6cfa3 !important;
            font-weight: 400 !important; }
            header .navbar .nav-links-wrapper .nav-item .nav-link:hover::before {
              transform: translateX(5rem); }
        header .navbar .nav-links-wrapper .nav-item.open {
          /* Pokazujemy menu - ZMIENIONE NA BLOCK (NAPRAWA BŁĘDU) */ }
          header .navbar .nav-links-wrapper .nav-item.open .nav-link {
            font-weight: 700; }
            header .navbar .nav-links-wrapper .nav-item.open .nav-link::before {
              transform: rotate(90deg); }
          header .navbar .nav-links-wrapper .nav-item.open .dropdown-wrapper {
            display: block; }
        header .navbar .nav-links-wrapper .nav-item .dropdown-wrapper {
          display: none;
          background: transparent;
          box-shadow: none;
          padding: 0 0 0 35rem;
          margin-top: 5rem;
          position: static;
          opacity: 1;
          visibility: visible;
          transform: none;
          min-width: auto;
          border-radius: 0;
          width: 100%; }
          header .navbar .nav-links-wrapper .nav-item .dropdown-wrapper .dropdown-columns {
            display: flex;
            flex-direction: column !important;
            gap: 15rem;
            padding: 0;
            margin: 0; }
          header .navbar .nav-links-wrapper .nav-item .dropdown-wrapper .dropdown-column {
            width: 100%;
            min-width: auto;
            display: flex;
            flex-direction: column;
            margin-left: 20rem;
            gap: 20rem; }
            header .navbar .nav-links-wrapper .nav-item .dropdown-wrapper .dropdown-column .column-header {
              color: white;
              font-size: 26rem;
              font-weight: 500;
              padding: 10rem 0;
              margin: 0;
              border: none;
              background: transparent;
              display: flex;
              align-items: center;
              text-transform: uppercase; }
            header .navbar .nav-links-wrapper .nav-item .dropdown-wrapper .dropdown-column .column-list {
              display: flex;
              flex-direction: column !important;
              gap: 10rem;
              padding: 0 0 0 15rem;
              margin: 0;
              border-left: 1px solid rgba(255, 255, 255, 0.1); }
              header .navbar .nav-links-wrapper .nav-item .dropdown-wrapper .dropdown-column .column-list li {
                border: none;
                width: 100%;
                display: block; }
              header .navbar .nav-links-wrapper .nav-item .dropdown-wrapper .dropdown-column .column-list li a {
                color: rgba(255, 255, 255, 0.8);
                font-size: 26rem;
                padding: 5rem 0;
                text-transform: none;
                display: flex;
                align-items: center;
                width: 100%;
                text-decoration: none; }
                header .navbar .nav-links-wrapper .nav-item .dropdown-wrapper .dropdown-column .column-list li a .icon-arrow {
                  margin-right: 20rem; }
                header .navbar .nav-links-wrapper .nav-item .dropdown-wrapper .dropdown-column .column-list li a:hover {
                  color: white;
                  font-weight: 400 !important;
                  background: transparent;
                  transform: none; }
                  header .navbar .nav-links-wrapper .nav-item .dropdown-wrapper .dropdown-column .column-list li a:hover::before {
                    background: white;
                    color: #163e33;
                    border-color: white; } }

.banner-wrapper {
  max-width: 1280rem;
  display: block;
  margin: 0 auto;
  position: relative;
  overflow: hidden; }
  .banner-wrapper banner {
    color: white;
    display: block;
    margin: 0 auto;
    max-height: 563rem;
    background: black;
    background-position: center;
    background-size: cover;
    border-radius: 20rem; }
    .banner-wrapper banner .content-wrapper {
      box-sizing: border-box;
      position: relative;
      width: 100%;
      max-height: 563rem;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: end;
      padding: 68rem; }
      @media (max-width: 680px) {
        .banner-wrapper banner .content-wrapper {
          padding: 30rem; } }

footer {
  padding-bottom: 30rem;
  /* --- GŁÓWNY UKŁAD --- */
  /* LEWA KOLUMNA */
  /* PRAWA KOLUMNA (Linki) */ }
  footer section {
    background-color: #F4F4F6;
    border-radius: 20rem;
    margin-bottom: 30rem;
    padding: 60rem 0; }
  footer .inner-section {
    padding: 0 40rem; }
  footer .footer-content {
    display: flex;
    justify-content: space-between;
    gap: 80rem;
    align-items: flex-start; }
  footer .footer-left {
    flex: 1;
    max-width: 450rem;
    /* --- NOWA LOKALIZACJA PRAW AUTORSKICH --- */ }
    footer .footer-left .contact-btn {
      background-color: #163e33;
      color: white;
      border: none;
      padding: 12rem 25rem;
      border-radius: 10rem;
      font-size: 16rem;
      font-weight: 500;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 15rem;
      transition: background 0.3s;
      margin-top: 20rem; }
      footer .footer-left .contact-btn img {
        height: 16rem;
        width: auto;
        filter: brightness(0) invert(1); }
      footer .footer-left .contact-btn:hover {
        background-color: #236452; }
    footer .footer-left .footer-desc {
      font-size: 15rem;
      color: #555;
      line-height: 1.6;
      font-weight: 300;
      text-align: justify;
      margin-top: 30rem; }
    footer .footer-left .footer-legal {
      margin-top: 50rem;
      font-size: 13rem;
      color: #888; }
      footer .footer-left .footer-legal .copyright {
        margin-bottom: 5rem; }
      footer .footer-left .footer-legal .legal-links {
        display: flex;
        gap: 10rem; }
        footer .footer-left .footer-legal .legal-links a {
          color: #888;
          text-decoration: none;
          transition: color 0.2s; }
          footer .footer-left .footer-legal .legal-links a:hover {
            color: #163e33; }
        footer .footer-left .footer-legal .legal-links .divider {
          color: #ccc; }
  footer .footer-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: 80rem; }
    footer .footer-right .link-group ul {
      list-style: none;
      padding: 0;
      margin: 0; }
      footer .footer-right .link-group ul li a {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
        color: #666;
        font-size: 14rem;
        transition: all 0.2s; }
        footer .footer-right .link-group ul li a:hover {
          color: #163e33;
          text-decoration: none; }

/* --- RESPONSYWNOŚĆ (MOBILE) --- */
@media (max-width: 1100px) {
  footer section {
    border-radius: 0;
    padding: 40rem 0; }
  footer .inner-section {
    padding: 0 20rem; }
  footer .footer-content {
    flex-direction: column;
    gap: 50rem; }
  footer .footer-left {
    max-width: 100%; }
    footer .footer-left h3 {
      font-size: 26rem; }
    footer .footer-left .footer-desc {
      text-align: left;
      margin-top: 20rem; }
    footer .footer-left .footer-legal {
      margin-top: 30rem; }
  footer ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10rem 15rem; }
    footer ul li {
      margin-bottom: 0; }
      footer ul li a {
        font-size: 13rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block; }
  footer .footer-right {
    justify-content: flex-start;
    flex-direction: column;
    gap: 40rem;
    width: 100%; }
    footer .footer-right .link-group {
      width: 100%; }
      footer .footer-right .link-group h4 {
        margin-bottom: 15rem; } }

.mobile {
  display: none !important; }

@media (max-width: 680px) {
  h1 {
    font-size: 50rem; }
  p {
    font-size: 20rem;
    line-height: 32rem; }
  li {
    font-size: 20rem;
    line-height: 32rem; }
  .desktop {
    display: none !important; }
  .mobile {
    display: initial !important; }
  html {
    font-size: 0.18vw; }
  section {
    padding-left: 26rem;
    padding-right: 26rem;
    box-sizing: border-box;
    /* To jest absolutnie kluczowe! */
    width: 100%; }
    section .inner-section:not(.no-margin) {
      margin: 0 26rem !important; }
    section banner {
      height: 100vh !important;
      border-radius: 0 !important; }
      section banner .content-wrapper {
        padding: 100rem 50rem !important; }
    section .flex {
      flex-direction: column !important;
      gap: 40rem; }
    section .row {
      flex-direction: column !important;
      gap: 80rem; }
      section .row .col-50 {
        width: 100% !important; }
      section .row .img-container {
        min-width: 100%;
        height: 400rem !important; }
    section .offer-wrapper {
      flex-wrap: wrap;
      gap: 10rem;
      width: 100%; }
      section .offer-wrapper .offer {
        width: calc(50% - 52rem) !important;
        min-width: calc(50% - 52rem); }
    section footer {
      height: 200rem !important; }
      section footer .upper-info {
        width: unset !important;
        display: block !important;
        align-items: end !important; }
      section footer .lower-links {
        gap: 20rem !important;
        justify-content: start !important; }
        section footer .lower-links a {
          font-size: 16rem !important; }
      section footer .logo {
        padding: 0 15rem; }
      section footer p {
        font-size: 16rem !important; }
    section .intro-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 40rem; }
    section .intro-text {
      max-width: 100% !important; }
    section .custom-bg-section {
      padding-left: 50rem;
      padding-right: 50rem; }
    section .process-row {
      flex-direction: column;
      gap: 15rem; }
    section .process-arrow {
      transform: rotate(90deg);
      margin: 10rem 0; }
    section .ico-card-row {
      gap: 80rem !important; }
    section .banner-wrapper.custom-1 h4 {
      margin-left: 0; }
    section banner .content-wrapper {
      max-height: unset !important;
      width: 100% !important; }
    section banner .cta-wrapper {
      flex-direction: column;
      text-align: center; }
    section .jun-container {
      flex-direction: column;
      align-items: stretch;
      gap: 50rem;
      padding-bottom: 40rem; }
    section .jun-visual-col {
      width: 100% !important;
      height: 80rem !important;
      background-position: center center !important;
      flex: auto !important;
      background-image: url("/Assets/Img/Misc/logo_white.png"); }
    section .jun-content-col {
      align-items: center !important;
      text-align: center !important;
      width: 100% !important;
      min-width: unset; }
    section .jun-map-col {
      width: 100%;
      flex: auto;
      display: flex;
      justify-content: center; }
    section .jun-map-col iframe {
      max-width: 600rem; }
  .steps-cards {
    margin: 0 20rem !important; }
  .steps-card-wrapper {
    flex-direction: column;
    gap: 20rem;
    align-items: center; }
  .steps-card-content {
    font-size: 20rem !important; }
  li {
    padding-left: 0 !important; }
  .green-card {
    width: 80vw !important; } }

.steps-cards {
  min-width: 420rem;
  display: flex;
  flex-direction: column;
  gap: 17rem; }
  .steps-cards.empty .steps-card-title {
    text-transform: uppercase;
    font-weight: 400 !important;
    margin-bottom: 10rem; }
  .steps-cards.empty .step-no {
    background-color: #193E2C !important;
    color: white !important;
    border: none !important; }
    .steps-cards.empty .step-no::after {
      display: none !important; }
  .steps-cards.empty .steps-card {
    background-color: white !important;
    border: none !important; }
  .steps-cards.inside-green {
    color: white; }
    .steps-cards.inside-green .step-no::after {
      display: none !important; }
    .steps-cards.inside-green .steps-card {
      border: none !important; }
  .steps-cards.light-green-segment .steps-card-wrapper {
    gap: 14rem; }
  .steps-cards.light-green-segment .steps-card-title {
    font-weight: 400 !important;
    text-transform: uppercase; }
  .steps-cards.light-green-segment .step-no {
    min-width: 52rem !important;
    min-height: 52rem !important;
    width: 52rem !important;
    height: 52rem !important;
    border: none !important;
    background-color: #3D6551 !important;
    font-size: 24rem;
    color: white !important; }
    .steps-cards.light-green-segment .step-no::after {
      display: none !important; }
  .steps-cards.light-green-segment .steps-card {
    padding: 0 !important;
    border: none !important; }
  .steps-cards .steps-card-wrapper {
    display: flex;
    gap: 32rem; }
    .steps-cards .steps-card-wrapper .step-no {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 66rem;
      min-height: 66rem;
      height: 66rem;
      width: 66rem;
      border-radius: 50%;
      font-size: 24rem;
      font-weight: 500;
      border: 1rem solid #2E2E2E;
      position: relative; }
      .steps-cards .steps-card-wrapper .step-no img {
        filter: brightness(0) invert(0); }
      .steps-cards .steps-card-wrapper .step-no:not(.no-line):not(.last)::after {
        content: '';
        position: absolute;
        display: block;
        left: 50%;
        bottom: calc(-100% - 10rem);
        /* Pozycja pod tekstem */
        width: 1rem;
        /* Szerokość linii (możesz dać np. 50%) */
        height: calc(100%);
        /* Grubość linii */
        background-color: #2E2E2E; }
      .steps-cards .steps-card-wrapper .step-no.active {
        background-color: #193E2C;
        color: white;
        border: none; }
        .steps-cards .steps-card-wrapper .step-no.active img {
          filter: brightness(0) invert(1); }
    .steps-cards .steps-card-wrapper .steps-card {
      width: 100%;
      padding: 15rem 23rem;
      border-radius: 8rem;
      border: 1rem solid #2E2E2E; }
      .steps-cards .steps-card-wrapper .steps-card.active {
        background-color: #193E2C;
        color: white; }
        .steps-cards .steps-card-wrapper .steps-card.active li, .steps-cards .steps-card-wrapper .steps-card.active a {
          color: white !important; }
      .steps-cards .steps-card-wrapper .steps-card .steps-card-title {
        font-size: 16rem;
        line-height: 24rem;
        font-weight: 500; }
      .steps-cards .steps-card-wrapper .steps-card .steps-card-content {
        font-size: 14rem;
        font-weight: 300; }

.offer-card {
  background: #193E2C;
  border-radius: 20rem;
  padding: 30rem 0; }
  .offer-card h2 {
    color: white; }
  .offer-card .offer-wrapper {
    display: flex;
    justify-content: space-between; }
    .offer-card .offer-wrapper .offer {
      display: flex;
      flex-direction: column;
      justify-content: end;
      background-position: center;
      color: white;
      width: 190rem;
      height: 200rem;
      background-size: 100%;
      padding: 22rem;
      font-size: 40rem;
      font-weight: 300;
      border-radius: 12rem;
      transition: 2s all;
      text-shadow: 1rem 1rem 2rem #193E2C; }
      .offer-card .offer-wrapper .offer:hover {
        background-size: 120%; }

.home-form-section {
  border-radius: 20rem;
  background-image: url("/Assets/Img/Bg/bg2.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative; }
  .home-form-section h3 {
    color: white; }
  .home-form-section .inner-section {
    position: relative;
    /* Pozycjonowanie względem rodzica */
    z-index: 1;
    /* Treść musi być NAD nakładką */
    border-radius: 20rem; }
  .home-form-section::before {
    border-radius: 20rem;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Używamy Twojego koloru firmowego (#163e33) z przezroczystością 0.85 */
    /* Dzięki temu zdjęcie delikatnie przebija, ale tło jest spójne z resztą strony */
    background-color: rgba(22, 62, 51, 0.85);
    /* Jeśli wolisz czarne przyciemnienie, użyj tego zamiast powyższego: */
    /* background-color: rgba(0, 0, 0, 0.7); */
    z-index: 0;
    /* Warstwa pod treścią */ }

/* Główny kontener komponentu */
.contact-component-wrapper {
  color: #ffffff;
  width: 100%;
  padding: 60rem 0;
  /* --- ŚRODEK: KROKI (STEPS) --- */
  /* --- DÓŁ: TEKST STOPKI --- */ }
  .contact-component-wrapper .contact-top-row {
    display: flex;
    justify-content: space-between;
    gap: 60rem;
    margin-bottom: 80rem;
    /* LEWA STRONA (TEKST) */
    /* PRAWA STRONA (FORMULARZ) */ }
    .contact-component-wrapper .contact-top-row .text-block {
      flex: 1;
      max-width: 600rem; }
      .contact-component-wrapper .contact-top-row .text-block .title {
        color: #ffffff; }
      .contact-component-wrapper .contact-top-row .text-block .description {
        font-size: 15rem;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.8);
        font-weight: 300;
        text-align: justify; }
    .contact-component-wrapper .contact-top-row .form-block {
      flex: 1;
      max-width: 500rem; }
      .contact-component-wrapper .contact-top-row .form-block .form-card {
        background-color: #1e4a3e;
        border-radius: 20rem;
        padding: 40rem;
        box-shadow: 0 10rem 30rem rgba(0, 0, 0, 0.2); }
        .contact-component-wrapper .contact-top-row .form-block .form-card .form-heading {
          font-size: 26rem;
          font-weight: 600;
          margin-bottom: 10rem; }
        .contact-component-wrapper .contact-top-row .form-block .form-card .form-subheading {
          font-size: 13rem;
          color: rgba(255, 255, 255, 0.7);
          margin-bottom: 30rem;
          line-height: 1.4; }
        .contact-component-wrapper .contact-top-row .form-block .form-card form {
          display: flex;
          flex-direction: column;
          gap: 15rem; }
          .contact-component-wrapper .contact-top-row .form-block .form-card form input {
            width: 100%;
            background: #ffffff;
            border: none;
            border-radius: 5rem;
            padding: 12rem 15rem;
            font-size: 14rem;
            color: #333;
            box-sizing: border-box; }
            .contact-component-wrapper .contact-top-row .form-block .form-card form input::placeholder {
              color: #888; }
          .contact-component-wrapper .contact-top-row .form-block .form-card form .inputs-row {
            display: flex;
            gap: 15rem; }
          .contact-component-wrapper .contact-top-row .form-block .form-card form .checkbox-wrapper {
            display: flex;
            align-items: flex-start;
            gap: 10rem;
            margin-top: 5rem;
            margin-bottom: 15rem; }
            .contact-component-wrapper .contact-top-row .form-block .form-card form .checkbox-wrapper input[type="checkbox"] {
              width: 16rem;
              height: 16rem;
              margin-top: 3rem;
              accent-color: #163e33;
              cursor: pointer; }
            .contact-component-wrapper .contact-top-row .form-block .form-card form .checkbox-wrapper label {
              font-size: 11rem;
              color: rgba(255, 255, 255, 0.6);
              line-height: 1.3;
              cursor: pointer; }
          .contact-component-wrapper .contact-top-row .form-block .form-card form .btn-submit {
            background-color: white;
            color: #163e33;
            border: none;
            border-radius: 30rem;
            padding: 12rem 30rem;
            font-size: 16rem;
            font-weight: 600;
            align-self: flex-start;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10rem;
            transition: transform 0.2s; }
            .contact-component-wrapper .contact-top-row .form-block .form-card form .btn-submit:hover {
              transform: translateX(5rem); }
            .contact-component-wrapper .contact-top-row .form-block .form-card form .btn-submit span {
              font-size: 18rem; }
  .contact-component-wrapper .steps-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60rem;
    position: relative;
    padding: 0 20rem;
    /* Linia pozioma w tle */ }
    .contact-component-wrapper .steps-row.empty-version {
      background: none;
      /* Usuwamy tło z tej sekcji, bo już jest w .home-form-section */ }
      .contact-component-wrapper .steps-row.empty-version .step-single {
        background: none;
        /* Usuwamy tło z pojedynczych kroków, żeby były przejrzyste */ }
        .contact-component-wrapper .steps-row.empty-version .step-single .step-num, .contact-component-wrapper .steps-row.empty-version .step-single .step-desc {
          color: #193E2C;
          background: white; }
      .contact-component-wrapper .steps-row.empty-version::before {
        background: #193E2C; }
    .contact-component-wrapper .steps-row::before {
      content: '';
      position: absolute;
      top: 40rem;
      left: 50rem;
      right: 50rem;
      height: 1px;
      background: rgba(255, 255, 255, 0.2);
      z-index: 0; }
    .contact-component-wrapper .steps-row .step-single {
      text-align: center;
      position: relative;
      z-index: 1;
      background: #163e33;
      padding: 15rem; }
      .contact-component-wrapper .steps-row .step-single .step-num {
        font-size: 80rem;
        font-weight: 100;
        line-height: 1;
        margin-bottom: 20rem;
        display: inline-block;
        color: rgba(255, 255, 255, 0.9); }
      .contact-component-wrapper .steps-row .step-single .step-desc {
        font-size: 18rem;
        font-weight: 600;
        line-height: 1.3;
        color: white; }
  .contact-component-wrapper .contact-footer-text {
    text-align: center;
    max-width: 800rem;
    margin: 0 auto; }
    .contact-component-wrapper .contact-footer-text p {
      font-size: 20rem;
      font-weight: 300;
      line-height: 1.5;
      color: #ffffff; }

/* --- RESPONSYWNOŚĆ (MOBILE) --- */
@media (max-width: 1100px) {
  .contact-component-wrapper .contact-top-row {
    flex-direction: column;
    gap: 40rem;
    margin-bottom: 50rem; }
    .contact-component-wrapper .contact-top-row .text-block, .contact-component-wrapper .contact-top-row .form-block {
      max-width: 100%; }
    .contact-component-wrapper .contact-top-row .form-block .form-card .inputs-row {
      flex-direction: column; }
  .contact-component-wrapper .steps-row {
    flex-wrap: wrap;
    gap: 40rem;
    justify-content: center;
    background: none; }
    .contact-component-wrapper .steps-row::before {
      display: none; }
    .contact-component-wrapper .steps-row .step-single {
      flex: 1 1 40%; }
      .contact-component-wrapper .steps-row .step-single .step-num {
        font-size: 50rem; }
  .contact-component-wrapper .contact-footer-text p {
    font-size: 16rem; } }

.bg-card {
  border-radius: 20rem;
  background-image: url("/Assets/Img/Bg/bg-card.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  padding-top: 45rem;
  padding-bottom: 45rem; }
  .bg-card p, .bg-card strong, .bg-card a {
    color: white !important; }

.green-card {
  background: #193E2C;
  width: 32%;
  padding: 15rem 20rem;
  border-radius: 20rem; }
  .green-card h2, .green-card h3, .green-card h4, .green-card p, .green-card li {
    color: white; }

.splitted .inner-section {
  background-image: url("/Assets/Img/Bg/price.webp");
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat; }

.splitted .text-container {
  background: #193E2C;
  width: 70%; }

.etap {
  margin-bottom: 30rem;
  display: flex;
  gap: 17rem; }
  .etap .et-ico {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50rem;
    height: 50rem;
    background: white;
    border-radius: 50%; }

/* Zakładam, że zmienne kolorów są dostępne, definiuję zieleń tła z obrazka */
.form-section {
  border-radius: 20rem;
  background-image: url("/Assets/Img/Bg/bg2.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  padding: 50rem 0; }

.max-width {
  /* Tło sekcji zostawiam puste wg prośby */ }

.contact-header {
  text-align: center;
  margin-bottom: 40rem;
  color: white;
  text-shadow: 0rem 4rem 6.2rem rgba(0, 0, 0, 0.71);
  /* Kolor white, font-size 64rem i cienie są już w Twoim definicji h1 */ }

.form-container {
  background-color: #436050;
  border-radius: 20rem;
  /* ok. 24px */
  padding: 40rem 50rem;
  /* Duże odstępy wewnątrz */
  box-shadow: 0 10rem 30rem rgba(0, 0, 0, 0.2); }
  @media (max-width: 768px) {
    .form-container {
      padding: 40rem 20rem; } }

.form-grid {
  display: flex;
  gap: 40rem;
  /* Odstęp między kolumnami */
  align-items: center; }
  @media (max-width: 768px) {
    .form-grid {
      flex-direction: column; } }

/* --- LEWA KOLUMNA --- */
.col-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Nadpisanie kolorów Twojej typografii dla ciemnego tła */ }
  .col-left h3.light-text {
    color: white;
    margin-bottom: 15rem; }
  .col-left p.light-text {
    color: white;
    opacity: 0.9;
    margin-bottom: 30rem;
    max-width: 90%; }

.inputs-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15rem; }
  .inputs-wrapper input {
    width: 100%;
    height: 45rem;
    /* ok. 54px wysokości */
    padding: 0 20rem;
    border-radius: 8rem;
    border: none;
    outline: none;
    /* Styl tekstu wewnątrz inputa zbliżony do Twojego P */
    font-size: 14rem;
    font-weight: 300;
    font-family: inherit; }
    .inputs-wrapper input::placeholder {
      color: #666; }

/* --- PRAWA KOLUMNA --- */
.col-right {
  flex: 1; }

.white-card {
  background-color: #f9f9f9;
  border-radius: 12rem;
  padding: 30rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box; }

.checkbox-area {
  display: flex;
  gap: 12rem;
  margin-bottom: 25rem; }
  .checkbox-area input[type="checkbox"] {
    /* Powiększenie checkboxa */
    width: 20rem;
    height: 20rem;
    margin-top: 4rem;
    flex-shrink: 0;
    cursor: pointer; }
  .checkbox-area label {
    cursor: pointer;
    /* Nadpisanie koloru turquoise z Twojego section p */ }
    .checkbox-area label p.legal-text {
      color: #555;
      font-size: 12rem;
      /* Trochę mniejsze niż standardowe 14rem dla lepszej czytelności */
      line-height: 18rem; }

/* Przycisk */
.submit-btn {
  width: 100%;
  background-color: #1e3a2f;
  color: white;
  border: none;
  padding: 15rem;
  border-radius: 6rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10rem;
  transition: background-color 0.3s;
  /* Typografia przycisku */
  font-size: 16rem;
  font-weight: 500; }
  .submit-btn:hover {
    background-color: #152921; }

button, a.button {
  display: flex;
  gap: 10rem;
  padding: 12rem 15rem;
  background: #193E2C;
  color: white;
  height: 37rem;
  border-radius: 8rem;
  align-items: center;
  border: none;
  cursor: pointer;
  font-size: 14rem;
  font-weight: 400;
  font-family: 'Jost', sans-serif; }
  button img, a.button img {
    height: 14rem;
    width: 14rem; }

.grid {
  /* Ukrywamy galerię zanim JS ją ułoży, żeby nie było widać "skoku" */
  opacity: 0;
  transition: opacity 0.4s ease-in; }
  .grid.loaded {
    opacity: 1; }

/* Element pomocniczy do definiowania szerokości kolumn */
.grid-sizer,
.grid-item {
  width: 32%;
  /* 3 kolumny */
  margin-bottom: 20rem;
  /* Odstęp pionowy */ }

/* Pojedynczy kafelek */
.grid-item {
  float: left;
  border-radius: 12rem;
  overflow: hidden; }
  .grid-item img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease; }
    .grid-item img:hover {
      transform: scale(1.03); }

/* Responsywność - zmiana ilości kolumn */
@media (max-width: 1024px) {
  .grid-sizer, .grid-item {
    width: 48%;
    /* 2 kolumny na tabletach */ } }

@media (max-width: 600px) {
  .grid-sizer, .grid-item {
    width: 100%;
    /* 1 kolumna na telefonie */ } }

/* --- Stylizacja Paginacji --- */
.pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /* Zapobiega wychodzeniu przycisków poza ekran na smartfonach */
  gap: 10rem;
  margin-top: 50rem; }
  .pagination .page-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40rem;
    height: 40rem;
    border-radius: 50%;
    background-color: #f0f0f0;
    color: #333;
    text-decoration: none;
    font-size: 16rem;
    font-weight: 500;
    transition: all 0.3s;
    /* Nowe style dla przycisków ze słowami (pigułki zamiast kół) */ }
    .pagination .page-link:hover {
      background-color: #d7d7d7; }
    .pagination .page-link.active {
      background-color: #193E2C;
      color: white;
      font-weight: bold; }
    .pagination .page-link.prev-link, .pagination .page-link.next-link {
      width: auto;
      padding: 0 20rem;
      border-radius: 20rem; }

/* Zmienne (jeśli nie masz ich pod ręką) */
.green-carousel-container {
  background-color: #153e30;
  border-radius: 24rem;
  padding: 30rem 60rem;
  position: relative;
  overflow: hidden; }
  .green-carousel-container.gray-bg {
    background-color: #F5F5F7; }
    .green-carousel-container.gray-bg .carousel-title {
      color: #153e30; }
  .green-carousel-container.white-bg {
    background-color: white;
    border: 1rem solid #153e30; }
    .green-carousel-container.white-bg .carousel-title {
      color: #153e30; }
  @media (max-width: 768px) {
    .green-carousel-container {
      padding: 30rem 20rem; } }

.carousel-title {
  color: white;
  font-size: 30rem;
  font-weight: 500;
  margin-bottom: 10rem;
  margin-left: 10rem; }
  @media (max-width: 768px) {
    .carousel-title {
      font-size: 28rem;
      margin-bottom: 20rem; } }

/* --- Stylizacja Swipera --- */
.custom-swiper {
  padding: 10rem !important;
  position: static; }

.slide-content {
  width: 100%;
  /* Kwadratowe lub lekko prostokątne proporcje jak na zdjęciu */
  aspect-ratio: 1 / 1;
  border-radius: 20rem;
  overflow: hidden;
  background-color: #ccc;
  transition: transform 0.3s ease;
  /* Efekt hover (opcjonalnie) */ }
  .slide-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; }
  .slide-content:hover {
    transform: scale(1.02); }

/* --- Customizacja Strzałek Swipera --- */
.swiper-button-next,
.swiper-button-prev {
  background-color: white;
  width: 35rem !important;
  height: 35rem !important;
  border-radius: 12rem;
  color: #153e30 !important;
  transition: all 0.3s ease;
  margin-top: 10rem !important; }
  .swiper-button-next::after,
  .swiper-button-prev::after {
    font-size: 20rem !important;
    font-weight: bold; }
  .swiper-button-next:hover,
  .swiper-button-prev:hover {
    background-color: #f0f0f0;
    transform: scale(1.1); }

/* Pozycjonowanie strzałek - wyrównanie do krawędzi obrazków */
.swiper-button-prev {
  left: 10rem !important; }

.swiper-button-next {
  right: 10rem !important; }

/* Na mobile ukrywamy strzałki (zostaje swipe) lub zmniejszamy */
@media (max-width: 768px) {
  .swiper-button-next,
  .swiper-button-prev {
    display: none; } }

.post-grid {
  width: 100%;
  display: grid;
  gap: 30rem;
  grid-template-columns: auto auto auto; }
  .post-grid .post-card {
    position: relative; }
    .post-grid .post-card .img-element {
      min-width: 345rem;
      height: 245rem;
      background-size: cover;
      position: center;
      border-radius: 20rem; }
    .post-grid .post-card .date {
      position: absolute;
      top: 13rem;
      left: 10rem;
      font-size: 13rem;
      background: rgba(255, 255, 255, 0.72);
      padding: 4rem 8rem;
      border-radius: 10rem; }

@media (max-width: 680px) {
  .post-grid {
    grid-template-columns: auto; }
    .post-grid .post-card .img-element {
      min-width: 100%; } }

.blog-post {
  /* Główny obrazek wpisu */
  /* Krótki opis pod obrazkiem */
  /* Spis treści */ }
  .blog-post header {
    margin-bottom: 20rem; }
    .blog-post header p {
      color: #666666; }
  .blog-post > img {
    max-width: 100%;
    height: auto;
    margin-bottom: 30rem;
    border-radius: 20rem;
    /* Zaokrąglenie dopasowane do kafelków */ }
  .blog-post .lead {
    font-size: 18rem;
    font-weight: bold;
    margin-bottom: 30rem; }
  .blog-post .toc {
    background: #f9f9f9;
    padding: 20rem;
    margin-bottom: 30rem;
    border-radius: 10rem; }
    .blog-post .toc h3 {
      margin-top: 0;
      margin-bottom: 10rem; }
    .blog-post .toc ul {
      margin: 0;
      padding-left: 20rem; }
  .blog-post .post-content {
    line-height: 1.6;
    /* Tutaj ewentualnie możesz wrzucać style dla h2, h3 i p wewnątrz tekstu bloga */ }

/* Sekcja z powiązanymi wpisami */
.related-posts {
  margin-top: 60rem;
  border-top: 1px solid #eeeeee;
  padding-top: 40rem;
  margin-bottom: 60rem; }
  .related-posts h2 {
    margin-bottom: 20rem; }

.post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6, .post-content p, .post-content ul, .post-content li {
  margin-bottom: 20rem; }