/* 1) Tytuł sekcji intro2 – mniejszy rozmiar na wszystkich viewportach */
h1.intro2-content__title {
  font-size: 56px; /* desktop default */
  line-height: 1.2;
}

/* duże laptopy/ekrany */
@media (max-width: 1600px) {
  h1.intro2-content__title { font-size: 48px; line-height: 1.2; }
}

/* tablet/małe laptopy */
@media (max-width: 767px) {
  h1.intro2-content__title { font-size: 32px; line-height: 1.25; }
}

/* telefony */
@media (max-width: 450px) {
  h1.intro2-content__title { font-size: 26px; line-height: 1.3; }
}

/* 2) HERO: tło na pełną wysokość okna (źródło tła jest na .bg-img) */
html, body { height: 100%; margin: 0; }

.intro2 > .bg-img {
  min-height: 100vh;       /* pełny viewport */
  display: flex;           /* pionowe centrowanie kontentu */
  align-items: center;
  background-size: cover;
  background-position: center;
}

/* 3) Zmniejszamy paddingi, żeby wysokość nie była sztucznie zawyżona */
.intro2 .intro2-content { padding: clamp(40px, 8vh, 100px) 0; }


/* =========================
   4) 4 kroki (journey) – layout i LINIA BEZ KOŃCÓWEK
   ========================= */
#mechanizm-journey { position: relative; overflow: hidden; }

#mechanizm-journey .journey{
  /* sterujące zmienne */
  --badge: 56px;      /* średnica kółka */
  --pt: 48px;         /* padding-top */
  --pad-x: 28px;      /* padding poziomy */
  --gap: 26px;        /* odstęp między kolumnami */
  --n: 4;             /* liczba kolumn na desktopie */

  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: var(--gap);
  padding: var(--pt) var(--pad-x) var(--pt);
  border-radius: 12px;

  /* fallback + kolorem motywu (jeśli zdefiniowany jako --theme) */
  background: #f6fbf6;
  background: color-mix(in srgb, var(--theme) 6%, white);

  box-shadow: inset 0 8px 30px rgba(0,0,0,.04);
}

/* przerywana linia PRZEZ ŚRODEK kółek – od środka 1. kolumny do środka ostatniej */
#mechanizm-journey .journey::before{
  content: "";
  position: absolute;
  height: 2px;
  top: calc(var(--pt) + var(--badge) / 2);
  /* obliczenia szerokości siatki (bez padów i gapów) */
  left: calc(
    var(--pad-x) +
    ( (100% - (2 * var(--pad-x)) - ((var(--n) - 1) * var(--gap))) / (2 * var(--n)) )
  );
  right: calc(
    var(--pad-x) +
    ( (100% - (2 * var(--pad-x)) - ((var(--n) - 1) * var(--gap))) / (2 * var(--n)) )
  );
  background: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, var(--theme) 25%, white),
    color-mix(in srgb, var(--theme) 25%, white) 8px,
    transparent 8px,
    transparent 16px
  );
  opacity: .45;
  pointer-events: none;
}

#mechanizm-journey .journey-step { text-align: center; padding: 0 10px; }

#mechanizm-journey .journey-icon{
  width: var(--badge); height: var(--badge); margin: 0 auto 28px; border-radius: 999px;
  display: grid; place-items: center; background: var(--theme); color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  font-weight: 800; font-size: 18px; letter-spacing: .5px; font-variant-numeric: tabular-nums;
  position: relative; z-index: 2; /* zawsze nad linią */
}

#mechanizm-journey .journey-title{
  margin: 6px auto 8px; line-height: 1.25; font-size: clamp(18px,1.3vw,21px); max-width: 22ch;
}
#mechanizm-journey .journey-text{ margin: 0; opacity: .9; max-width: 28ch; margin-inline: auto; }

/* RWD (Bootstrap-owe progi) */
@media (max-width:1199.98px){
  #mechanizm-journey .journey{
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    --n: 2; --pt: 40px; --pad-x: 22px; gap: 24px;
    padding: var(--pt) var(--pad-x) 18px;
  }
  /* ::before pozostaje – lewo/prawo liczone z nowych zmiennych */
}

@media (max-width:575.98px){
  #mechanizm-journey .journey{
    grid-template-columns: 1fr;
    --n: 1; --pt: 28px; --pad-x: 16px; padding: var(--pt) var(--pad-x) 14px;
  }
  #mechanizm-journey .journey::before{ display: none; }
  #mechanizm-journey .journey-step{
    text-align: left; display: grid; grid-template-columns: var(--badge) 1fr; gap: 12px; align-items: start;
  }
  #mechanizm-journey .journey-icon{ margin: 0; }
  #mechanizm-journey .journey-title, #mechanizm-journey .journey-text{ max-width: 100%; }
}

/* JOURNEY: pasek z tarczą tuż pod prostokątem, przycisk na swoim miejscu */
#mechanizm-journey .cta-row{ margin-top: 10px !important; }           /* blisko prostokąta */
#mechanizm-journey .cta-row.align-items-center{ align-items: center !important; }
#mechanizm-journey .cta-row.align-items-center > .col-lg-8{ align-self: flex-start !important; }
#mechanizm-journey .cta-row.align-items-center > .col-lg-4,
#mechanizm-journey .cta-row.align-items-center > .cta-wrap{ align-self: center !important; }
#mechanizm-journey .cta-line{ margin-top: 0 !important; font-size: 15px; opacity: .9; }
#mechanizm-journey .cta-wrap{ margin-top: 0 !important; }
@media (max-width:1199.98px){ #mechanizm-journey .cta-row{ margin-top: 8px !important; } }
@media (max-width:575.98px){ #mechanizm-journey .cta-row{ margin-top: 12px !important; } }


/* --------- 5) SEKCJA EDUKACJA ---------- */
/* ABOUT5 — FINAL: równe odstępy, jedna linia, label 2-linijkowy */
.about5-right__bottom::before,
.about5-right__bottom::after,
.about5-right__bottom-counts::before,
.about5-right__bottom-counts::after { content: none !important; display: none !important; }
.about5-right__bottom { display: flex !important; grid-template-columns: initial !important; }

.about5-right__bottom{
  --sep-gap: 52px;      /* bliżej tekstu; w razie potrzeby 48–56 */
  --logo-left-trim: 0px;
  align-items: center;
  gap: var(--sep-gap);
}

.about5-right__bottom-counts{ display:flex; align-items:center; gap: 1rem; padding:0 !important; line-height:1; }
.about5-right__bottom-counts .counters-item{ line-height:1; }

.about5-right__bottom-counts .clients{
  text-transform: uppercase;
  display:inline-block;
  margin:0 !important;
  white-space:normal;
  line-height:1.15;
  max-width: 7ch; /* NASZEJ ↵ MOCY */
}

/* jedyny separator – połowa gapu, centrowany do ikony */
.about5-right__bottom-logo{ position:relative; margin:0 !important; padding:0 !important; flex:0 0 auto; }
.about5-right__bottom-logo::before{
  content:""; position:absolute;
  top:50%; left: calc(var(--sep-gap) / -2);
  transform: translate(-50%, -50%);
  width:1px; height: clamp(48px, 7vw, 84px);
  background: color-mix(in srgb, var(--tp-theme-1, #88c559) 25%, #c9d7c7);
  opacity:.9; pointer-events:none;
}
@supports not (color-mix(in srgb, black, white)){
  .about5-right__bottom-logo::before{ background:#c9d7c7; }
}
.about5-right__bottom-logo img{ display:block; margin-left: calc(var(--logo-left-trim) * -1); }

@media (max-width:575.98px){
  .about5-right__bottom{ --sep-gap:18px; --logo-left-trim:0px; }
  .about5-right__bottom-logo::before{ display:none; }
  .about5-right__bottom-counts .clients{ max-width:none; }
}


/* ================ 6) kolor nawigacji =================*/
.sticky-wrapper.sticky { 
  background-color: #034320 !important; /* zmień na swój */
}

#contact.contact2 { padding-top: 145}
  

/* ================ 7) Wyłączenie dużych liter =================*/
h1, h2, h3, h4, h5, h6,
.section-title__title,
.section-title__sub-title,
.feature3-item__title,
.about1 .section-title__title,
.about5 .section-title__title,
[class*="title"] {
  text-transform: none !important;
}
/* span-y w tytułach */
.section-title__title span,
.section-title__sub-title span { text-transform: none !important; }

/* WYJĄTEK: hero H1*/
.intro2-content__title { text-transform: uppercase !important; }

html{ scroll-behavior:smooth; }

/* ================ 8) Przetwarzanie danych =================*/
#contact .form-legal{
font-size:12px;
line-height:1.45;
color:rgba(0,0,0,.5);
margin-top: 16px !important;
}

@media (max-width: 575.98px){
  #contact .form-legal{ margin-top: 12px !important; }
}


/* ================ 9) stopka =================*/

/* STOPKA: ikony w kółkach */
.footer2-widget__item-contact-list{
  display: flex;
  align-items: flex-start;          /* ikona nie rozciąga się na wysokość wielu linii */
  gap: 14px;
}

.footer2-widget__item-contact-list-icon{
  --size: 44px;                     /* możesz podbić np. do 48px */
  flex: 0 0 var(--size);            /* nie kurcz i nie rozciągaj w flexboxie */
  width: var(--size);
  height: var(--size);
  border-radius: 50% !important;    /* zawsze koło */
  display: grid;                    /* perfekcyjne centrowanie ikony */
  place-items: center;
  line-height: 1;
  padding: 0 !important;            /* brak różnego paddingu, który robi „jajko” */
  box-sizing: border-box;
  overflow: hidden;                 /* gdy motyw rysuje obwódki/pseudo-elementy */
}

.footer2-widget__item-contact-list-icon i{
  font-size: 18px;                  /* wyrównaj z innymi kółkami */
  line-height: 1;
}

/* Jeżeli motyw domalowuje obwódki przez pseudo-elementy – też zaokrąglamy */
.footer2-widget__item-contact-list-icon::before,
.footer2-widget__item-contact-list-icon::after{
  border-radius: 50% !important;
}


/* FOOTER: większy odstęp między kolumnami (~+50%) */
.footer2-main-block > .row{
  margin-left: -24px !important;   /* było ~ -16px/-15px */
  margin-right: -24px !important;
}
.footer2-main-block > .row > [class*="col-"]{
  padding-left: 24px !important;   /* było ~ 16px/15px */
  padding-right: 24px !important;
}

/* szerokie ekrany: odrobinkę więcej */
@media (min-width: 1400px){
  .footer2-main-block > .row{
    margin-left: -28px !important;
    margin-right: -28px !important;
  }
  .footer2-main-block > .row > [class*="col-"]{
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

/* mobile – zostaw ciaśniej, żeby nie „pływało” */
@media (max-width: 575.98px){
  .footer2-main-block > .row{
    margin-left: -16px !important;
    margin-right: -16px !important;
  }
  .footer2-main-block > .row > [class*="col-"]{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ================ 10) kontakt =================*/
/* Godziny w karcie kontaktu */
.contact2-card .hours{ margin-top: 14px; }
.contact2-card .hours__title{
  display:flex; align-items:center; gap:10px;
  font-weight:700; margin-bottom:8px;
}
.contact2-card .hours__title i{ color: var(--theme, #6f9700); }

.contact2-card .hours__list{
  list-style:none; margin:0; padding:10px 12px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
}
.contact2-card .hours__list li{
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 0; font-size:15px;
  border-bottom:1px dashed rgba(0,0,0,.06);
}
.contact2-card .hours__list li:last-child{ border-bottom:0; }
.contact2-card .hours__list strong{
  font-weight:700; color:#123B2E;
}



/* ================ 11) 4 kroki responsywnosc =================*/

/* Journey – mobile text fix (blokuje "literka-po-literce") */
#mechanizm-journey .journey-step,
#mechanizm-journey .journey-title,
#mechanizm-journey .journey-text { 
  min-width: 0; /* klucz w grid/flex: pozwala elementom realnie się rozszerzyć */
}

#mechanizm-journey .journey-title,
#mechanizm-journey .journey-text {
  display: block;
  width: 100%;
  max-width: none;
  white-space: normal !important;   /* reset theme */
  word-break: normal !important;     /* reset theme */
  overflow-wrap: break-word !important; /* nie łamie po każdej literze */
  hyphens: auto;                     /* ładniejsze dzielenie wyrazów */
  writing-mode: horizontal-tb;       /* twardy reset, gdyby jakiś styl wymuszał vertical */
  text-align: center;
}

/* Telefony: jedna kolumna; desktop zostaje jak jest */
@media (max-width: 575.98px) {
  #mechanizm-journey .journey {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  #mechanizm-journey .journey-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  #mechanizm-journey .journey-icon { margin-bottom: 10px; }

  /* === subtelne spacingi na mobile === */
@media (max-width: 575.98px) {
  #mechanizm-journey .journey {
    row-gap: clamp(22px, 5vw, 30px); /* dlaczego: większy odstęp między krokami, bez zmiany kolumn */
  }
  #mechanizm-journey .journey-step + .journey-step {
    margin-top: clamp(6px, 2vw, 10px); /* dlaczego: dodatkowy mikro-oddech od 2. kroku */
  }
  #mechanizm-journey .journey-text {
    margin-bottom: clamp(8px, 2.4vw, 12px); /* dlaczego: nie “przykleja” się do kolejnego badge */
  }
}
}


/* ================ 12) Zwiększenie h2 na telefonach =================*/


@media (max-width: 575.98px) {
  .section-title .section-title__title,
  .section-title h2.section-title__title,
  .section-title h2,
  h2.section-title__title {
    font-size: clamp(33px, 9vw, 40px); /* dlaczego: +25% względem wcześniejszych 26–32 px */
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
    text-wrap: balance;
  }
}

@supports not (text-wrap: balance) {
  @media (max-width: 575.98px) {
    .section-title .section-title__title,
    .section-title h2.section-title__title,
    .section-title h2,
    h2.section-title__title {
      overflow-wrap: break-word; /* dlaczego: ładne łamanie na słabszych przeglądarkach */
      hyphens: auto;
    }
  }
}

/* ================ 13) sekcja o nas na telefonie =================*/

/* === About1 — mobilny kolaż 2 kolumny (jak na desktopie) === */
@media (max-width: 575.98px) {
  /* Grid 2 kolumny (zostaje jak wcześniej) */
  #about1 .about1-thumb .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 16px;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #about1 .about1-thumb .row > [class*="col-"] { padding: 0 !important; }

  /* Lewa kolumna — subtelne opuszczenie startu */
  #about1 .about1-thumb .img_1 {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin-top: clamp(8px, 2.5vw, 18px); /* nie zaczyna w tej samej linii co prawa */
    aspect-ratio: 3 / 4;
  }

  /* Prawa kolumna — spacja między górą i dołem */
  #about1 .about1-thumb .row .col-sm-6:nth-child(2) {
    display: grid;
    grid-auto-rows: auto;
    row-gap: clamp(12px, 3.5vw, 20px); /* większy odstęp między dwoma zdjęciami */
    align-content: start;
  }

  /* Proporcje prawej kolumny (jak wcześniej) */
  #about1 .about1-thumb .row .col-sm-6:nth-child(2) .about1-thumb__item:first-child {
    aspect-ratio: 3 / 4;
  }
  #about1 .about1-thumb .row .col-sm-6:nth-child(2) .about1-thumb__item:last-child {
    aspect-ratio: 16 / 9;
  }

  /* Karty obrazów */
  #about1 .about1-thumb__item { border-radius: 16px; overflow: hidden; }
  #about1 .about1-thumb__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* Reset marginów, gdy używamy row-gap */
  #about1 .about1-thumb__item.mb-4 { margin-bottom: 0 !important; }
}

@media (max-width: 575.98px) {
  /* Odstęp między przyciskiem a kolarzem */
  #about1 .about1-thumb {
    margin-top: clamp(18px, 5.5vw, 36px); /* dlaczego: wyraźny oddech pod CTA */
  }

  /* Lewe, wysokie zdjęcie jeszcze niżej */
  @media (max-width: 575.98px) {
  #about1 .about1-thumb .img_1 {
    margin-top: clamp(40px, 10vw, 64px); /* dlaczego: wyraźnie niżej, by nie startowało równo z prawą kolumną */
  }
}
}

/* ================ 14) same corner rounding =================*/

/* === Contact2 — spójne corner rounding dla karty i formularza === */
/* === Contact2 — więcej oddechu nad numerem i pod godzinami === */
:root { --contact-form-radius: 16px; } /* dopasuj do formularza, jeśli inny */

/* Mobile: takie samo zaokrąglenie jak formularz */
@media (max-width: 575.98px) {
  /* Ustal promień jak w .about1-content__list (zmień wartość jeśli u Ciebie inna) */
  .about1-content__list.bg-color1 { --corner-mobile-about: 16px; }

  /* Zastosuj ten sam promień na karcie kontaktowej */
  .contact2-card {
    border-radius: var(--corner-mobile-about, 16px) !important; /* ważne: nadpisuje wcześniejsze reguły */
    overflow: hidden; /* dlaczego: tło i dzieci nie wychodzą poza promień */
  }
}

.contact2-card {
  /* więcej oddechu: było clamp(28px, 5.5vw, 44px) */
  padding-inline: clamp(16px, 3vw, 28px);
  padding-block: clamp(36px, 7vw, 60px); /* dlaczego: tło nie startuje/nie kończy zbyt blisko treści */
}

/* Mobile: ciut więcej, by wizualnie oddychało */
@media (max-width: 575.98px) {
  .contact2-card {
    padding-block: clamp(42px, 10vw, 68px);
  }
}

/* Nie pozwól, by marginesy dzieci “zjadały” nowy oddech */
.contact2-card > :first-child { margin-top: 0; }   /* dlaczego: nadpisuje margin-collapsing */
.contact2-card > :last-child  { margin-bottom: 0; }

/* ================ 15) sekcja korzyści przycisk w zdjeciu na mobile =================*/


/* override */
@media (max-width: 575.98px) {
  #about .about5-left__btn-wrapper { bottom: 0 !important; }
  #about .about5-left { margin-bottom: 0 !important; }
}


/* 1) USTAWIENIA (zmień wg potrzeby) — domyślnie max na lewo/dół */
@media (max-width: 575.98px) {
  #about {
    /* pozycja w kontenerze */
    --btn-left: 0%;
    --btn-bottom: 0%;
    /* rozmiar (skaluje się z obrazem); zmień środek clampa, aby ogólnie powiększać/zmniejszać */
    --btn-font: clamp(11px, 3.0cqw, 15px);
    /* SPŁASZCZANIE: zmniejszaj pad-y; jeśli nadal “wysoki”, zmniejsz też --btn-icon */
    --btn-pad-y: 0.8em;  /* ↓ mniejsze = niższy przycisk */
    --btn-pad-x: 2em;  /* szerokość “pigułki” */
    --btn-icon: 1.55em;   /* średnica kółka z ikoną – drugi limiter wysokości */
    /* Szerokość całego przycisku: auto | <px> | <%> | <cqw>  */
    --btn-width: auto;    /* np. 52cqw albo 220px */
  }
}

/* Fallback bez cqw -> skala wg viewportu */
@supports not (width: 1cqw) {
  @media (max-width: 575.98px) {
    #about { --btn-font: clamp(11px, 3.6vw, 15px); }
  }
}

/* 2) Pozycjonowanie i style na mobile */
@media (max-width: 575.98px) {
  /* Przyklej w lewym-dolnym rogu obrazu (0/0) lub koryguj zmiennymi powyżej */
  #about .about5-left__btn-wrapper {
    position: absolute !important;
    left: var(--btn-left) !important;
    bottom: var(--btn-bottom) !important;
    right: auto !important;
    top: auto !important;
    margin: 0 !important;
    z-index: 3;
    white-space: nowrap;
  }

  /* Guzik – pełna kontrola wysokości/szerokości/skali */
  #about .about5-left__btn-wrapper .theme-btn.style5 {
    display: inline-flex !important;       /* stabilna wysokość */
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: var(--btn-font);
    line-height: 1 !important;             /* usuwa ukryty limiter wysokości */
    min-height: 0 !important;              /* kasuje theme’owe min-height */
    height: auto !important;
    padding: var(--btn-pad-y) var(--btn-pad-x) !important;
    width: var(--btn-width) !important;    /* kontrola szerokości */
    border-radius: 999px;
    border-width: 1.5px;
    gap: 0.65em;
  }

  /* Ikona w kółku – drugi limiter wysokości; zmieniaj --btn-icon, by spłaszczać dalej */
  #about .about5-left__btn-wrapper .theme-btn.style5 span {
    width: var(--btn-icon) !important;
    height: var(--btn-icon) !important;
    min-width: var(--btn-icon) !important;
    min-height: var(--btn-icon) !important;
    flex: 0 0 var(--btn-icon) !important;
  }
  #about .about5-left__btn-wrapper .theme-btn.style5 span .svg-img {
    width: 0.85em; height: auto; display: block;
  }
}

/* 3) Neutralizacja wcześniejszych “spychań”, jeśli w theme istnieją */
@media (max-width: 500px) {
  #about .about5-left__btn-wrapper { bottom: var(--btn-bottom) !important; }
  #about .about5-left { margin-bottom: 0 !important; }
}