@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.078125vw; }

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

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

p {
  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:hover {
  font-weight: 500 !important; }

section p {
  color: #303A5A; }

li {
  font-size: 14rem; }

strong {
  font-weight: 700;
  color: #193E2C; }

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

section {
  display: block;
  margin: 0 auto;
  max-width: 1000rem;
  padding-top: 60rem;
  padding-bottom: 60rem; }
  section.max-width {
    max-width: 1231rem; }
    section.max-width .inner-section {
      display: block;
      max-width: 1000rem;
      margin: 0 auto; }

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%; }

.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; }

/* --- 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.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;
      /* --- STYL ELEMENTU MENU (DESKTOP) --- */ }
      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 {
          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;
          /* Hack na pogrubianie bez przesuwania tekstu */ }
          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;
          font-weight: 700;
          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: 40rem;
    border-radius: 0 15rem 15rem 15rem;
    box-shadow: 0 20rem 50rem rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10rem);
    transition: all 0.2s ease-out;
    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; }
          .dropdown-wrapper .dropdown-column .column-list li a .icon-arrow {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 22rem;
            height: 22rem;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            font-size: 12rem;
            line-height: 1;
            padding-bottom: 2rem;
            transition: all 0.2s; }
          .dropdown-wrapper .dropdown-column .column-list li a:hover {
            transform: translateX(5rem);
            font-weight: 500; }
            .dropdown-wrapper .dropdown-column .column-list li a:hover .icon-arrow {
              background: white;
              color: #163e33;
              border-color: white; } }

/* --- 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: flex;
      flex-direction: column !important;
      justify-content: flex-start;
      align-items: flex-start;
      opacity: 0;
      visibility: hidden;
      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 {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
        right: auto; }
      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: 20rem;
          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 .nav-link::before {
            content: '→';
            transition: transform 0.3s; }
          header .navbar .nav-links-wrapper .nav-item .nav-link.open {
            /* Pokazujemy menu */ }
            header .navbar .nav-links-wrapper .nav-item .nav-link.open .nav-link {
              font-weight: 700; }
              header .navbar .nav-links-wrapper .nav-item .nav-link.open .nav-link::before {
                transform: rotate(90deg); }
            header .navbar .nav-links-wrapper .nav-item .nav-link.open .dropdown-wrapper {
              display: none; }
          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 .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; }
            header .navbar .nav-links-wrapper .nav-item .dropdown-wrapper .dropdown-column .column-header {
              color: white;
              font-size: 16rem;
              font-weight: 600;
              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-header::before {
                content: '←';
                display: flex;
                align-items: center;
                justify-content: center;
                width: 22rem;
                height: 22rem;
                border: 1px solid rgba(255, 255, 255, 0.5);
                border-radius: 50%;
                margin-right: 10rem;
                font-size: 12rem;
                line-height: 1; }
            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: 15rem;
                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::before {
                  content: '→';
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 20rem;
                  height: 20rem;
                  border: 1px solid rgba(255, 255, 255, 0.3);
                  border-radius: 50%;
                  margin-right: 10rem;
                  font-size: 10rem;
                  transition: all 0.3s;
                  flex-shrink: 0; }
                header .navbar .nav-links-wrapper .nav-item .dropdown-wrapper .dropdown-column .column-list li a .icon-arrow {
                  display: none; }
                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; }
        header .navbar .nav-links-wrapper .nav-item:hover .dropdown-wrapper {
          display: block; } }

.banner-wrapper {
  max-width: 1231rem;
  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 68rem; }

footer {
  padding-bottom: 30rem;
  margin-top: 60rem;
  /* --- 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: 30rem;
      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; }
  .desktop {
    display: none !important; }
  .mobile {
    display: initial !important; }
  html {
    font-size: 0.70px; }
  banner {
    height: 100vh !important;
    border-radius: 0 !important; }
    banner .content-wrapper {
      padding: 100rem 50rem !important; }
  section {
    padding-left: 50rem;
    padding-right: 50rem; }
  .flex {
    flex-direction: column !important; }
  .row {
    flex-direction: column !important;
    gap: 80rem !important; }
    .row .col-50 {
      width: 100% !important; }
    .row .img-container {
      min-width: 100%;
      height: 400rem !important; }
  .offer-wrapper {
    flex-wrap: wrap;
    gap: 20rem;
    width: 100%; }
    .offer-wrapper .offer {
      width: 30dvw;
      max-width: 30dvw; }
  footer {
    height: 200rem !important; }
    footer .upper-info {
      width: unset !important;
      display: block !important;
      align-items: end !important; }
    footer .lower-links {
      gap: 20rem !important;
      justify-content: start !important; }
      footer .lower-links a {
        font-size: 16rem !important; }
    footer .logo {
      padding: 0 15rem; }
    footer p {
      font-size: 16rem !important; }
  .intro-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 40rem; }
  .intro-text {
    max-width: 100% !important; }
  .custom-bg-section {
    padding-left: 50rem;
    padding-right: 50rem; }
  .process-row {
    flex-direction: column;
    gap: 15rem; }
  .process-arrow {
    transform: rotate(90deg);
    margin: 10rem 0; }
  .ico-card-row {
    gap: 80rem !important; }
  .banner-wrapper.custom-1 h4 {
    margin-left: 0; }
  banner .content-wrapper {
    max-height: unset !important;
    width: 100% !important; }
  banner .cta-wrapper {
    flex-direction: column;
    text-align: center; }
  .jun-container {
    flex-direction: column;
    align-items: stretch;
    gap: 50rem;
    padding-bottom: 40rem; }
  .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"); }
  .jun-content-col {
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    min-width: unset; }
  .jun-map-col {
    width: 100%;
    flex: auto;
    display: flex;
    justify-content: center; }
  .jun-map-col iframe {
    max-width: 600rem; } }

.steps-cards {
  min-width: 420rem;
  display: flex;
  flex-direction: column;
  gap: 17rem; }
  .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: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 .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 .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; }
  .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: cover;
      padding: 22rem;
      font-size: 40rem;
      font-weight: 300;
      border-radius: 12rem; }

.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%;
  /* --- GÓRA: UKŁAD --- */
  /* --- Ś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;
    background: #163e33;
    /* 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; } }

/* 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/bg5.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative; }

.max-width {
  /* Tło sekcji zostawiam puste wg prośby */
  padding: 50rem 0; }

.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); }

.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 {
  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; }
  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 (zapas na marginesy obsłuży JS lub calc) */
  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;
  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; }
    .pagination .page-link:hover {
      background-color: #d7d7d7; }
    .pagination .page-link.active {
      background-color: #193E2C;
      /* Twój kolor z _colors.scss */
      color: white;
      font-weight: bold; }

/* Zmienne (jeśli nie masz ich pod ręką) */
.swiper {
  max-height: 110rem; }

.green-carousel-container {
  background-color: #153e30;
  border-radius: 24rem;
  padding: 40rem 60rem;
  position: relative;
  overflow: hidden; }
  @media (max-width: 768px) {
    .green-carousel-container {
      padding: 30rem 20rem; } }

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

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

.swiper-slide {
  height: auto; }

.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;
  box-shadow: 0 4rem 15rem rgba(0, 0, 0, 0.3);
  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: 50rem !important;
  height: 50rem !important;
  border-radius: 12rem;
  color: #153e30 !important;
  box-shadow: 0 4rem 10rem rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease; }
  .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; } }