:root {
  --yellow: rgb(255, 217, 61, 1);
  --granat: rgb(30, 41, 59, 1);
  --off-white: rgb(248, 250, 252, 1);
  --white: rgb(255, 255, 255);
}

/* Margin/Padding */

.mb-100 {
  margin-bottom: 100px;
}

.pt-100 {
  padding-top: 100px;
}

.pb-100 {
  padding-bottom: 100px;
}

.kreator-section .text-yellow {
  color: var(--yellow);
}

/* Przycisk "Umów sprzątanie" w headerze – wygląd jednolity na wszystkich stronach */
.button-navi {
  background-color: var(--yellow);
  color: var(--granat);
  border: 1px solid var(--granat);
  border-radius: 8px;
  transition: all 0.3s;
}
.button-navi:hover {
  background-color: var(--granat);
  color: var(--yellow);
  border: 1px solid var(--yellow);
  border-radius: 8px;
  transition: all 0.3s;
}

.svg-wrapper-navi {
  color: var(--yellow);
  background-color: var(--granat);
  width: 36px;
  height: 36px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}

.svg-wrapper-navi:focus .svg-wrapper-navi:hover {
  color: var(--granat);
  background-color: var(--yellow);
  width: 36px;
  height: 36px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}

.text-granat {
  color: var(--granat);
}

/* Padding */
.about_us_pb {
  padding-bottom: 30px;
}

/* MyBTN */
.hero-button-wrap .secondary-button-hero {
  width: fit-content;
  min-height: var(--style-button-height);
  font-size: var(--font-button-size);
  font-weight: var(--font-button--weight);
  font-family: var(--font-button--family);
  font-style: normal;
  line-height: 1.4;
  letter-spacing: normal;
  padding: 10px 10px 10px 30px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s;
  border: solid var(--granat);
  border-radius: 40px;
  padding: 10px 20px 10px 20px;
  color: var(--color-white);
  border: var(--style-border-width-buttons-primary) solid var(--color-white);
  border-radius: var(--style-border-radius-buttons-primary);
}

.hero-button-wrap .secondary-button-hero:hover {
  background-color: var(--color-background-yellow);
  width: fit-content;
  min-height: var(--style-button-height);
  font-size: var(--font-button-size);
  font-weight: var(--font-button--weight);
  font-family: var(--font-button--family);
  font-style: normal;
  line-height: 1.4;
  letter-spacing: normal;
  padding: 10px 10px 10px 30px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s;
  border: solid var(--yellow);
  border-radius: 40px;
  padding: 10px 20px 10px 20px;
  color: var(--color-foreground);
  border: var(--style-border-width-buttons-primary) solid var(--yellow);
  border-radius: var(--style-border-radius-buttons-primary);
}

/* Icon */
.icon-tile {
  font-size: 60px;
  color: var(--yellow);
  margin-bottom: 20px;
  display: inline-block;
  transition: color 0.25s ease;
}

/* jak pracujemy */

.step_size {
  font-size: 120px;
  color: #fff;
}

.how_work_bg {
  background-color: var(--yellow);
}

.how_work_bg .subheading-bg {
  background-color: var(--granat);
  border-color: var(--granat);
  color: #fff;
}

/* Obszar dzialania */

/* ============================================
   SEKCJA "OBSZAR DZIAŁANIA" – mapa Google
   ============================================ */

/* Wrapper na mapę – kontroluje wysokość i wygląd */
.area-map-wrapper {
  width: 100%; /* pełna szerokość kolumny */
  height: 100%; /* dopasowuje się do wysokości lewej kolumny */
  min-height: 500px; /* minimum 500px – żeby na małych ekranach też dobrze wyglądała */
  border-radius: 18px; /* zaokrąglone rogi – pasują do reszty szablonu */
  overflow: hidden; /* przycina mapę do zaokrąglonych rogów */
  position: relative; /* potrzebne dla pozycjonowania iframe w środku */
}

/* Sam iframe mapy */
.area-map-wrapper iframe {
  width: 100%; /* pełna szerokość wrappera */
  height: 100%; /* pełna wysokość wrappera */
  border: 0; /* brak ramki – Google daje swoją domyślną */
  display: block; /* usuwa odstęp pod iframe (przeglądarki traktują iframe jak inline) */

  /* ⭐ FILTR CZARNO-BIAŁY + delikatne stonowanie */
  filter: grayscale(100%) contrast(0.95);
}

/* Efekt po najechaniu – mapa wraca do kolorów */
.area-map-wrapper:hover iframe {
  filter: grayscale(0%) contrast(1); /* pełne kolory – interaktywny element */
  transition: filter 0.4s ease; /* płynne przejście */
}

/* Płynne przejście w drugą stronę (z kolorów na czarno-biały) */
.area-map-wrapper iframe {
  transition: filter 0.4s ease;
}

/* ============================================
   RESPONSYWNOŚĆ – na mobile mapa pod kafelkami
   ============================================ */

@media (max-width: 991px) {
  .area-map-wrapper {
    min-height: 400px; /* na mobile trochę mniejsza */
    margin-top: 40px; /* odstęp od kafelków powyżej */
  }
}

/* Kreator */

.kreator-section {
  background-color: var(--granat); /* tło sekcji – kremowe */
  --padding-top: 50px; /* mniejszy odstep od gory niz domyslne 100px */

  /* Wymuszamy markową paletę GlowServices (Charcoal & Sun Yellow)
     niezależnie od tego, jaki motyw ma reszta strony.
     cennik.html ma we własnym <style> w <head> starą, nieprzerobioną
     paletę z szablonu (granat/biel, przyciski-pigułki), przez co
     kalkulator wyglądał tam inaczej niż na stronie głównej. */
  --color-foreground: rgba(30, 41, 59, 1);
  --color-background: rgba(248, 250, 252, 1);
  --color-primary-hover: rgba(255, 217, 61, 1);

  --color-primary-button-text: rgba(255, 217, 61, 1);
  --color-primary-button-background: rgba(30, 41, 59, 1);
  --color-primary-button-border: rgba(30, 41, 59, 1);
  --color-primary-button-icon: rgba(30, 41, 59, 1);
  --color-primary-button-icon-background: rgba(255, 217, 61, 1);

  --color-primary-button-hover-text: rgba(30, 41, 59, 1);
  --color-primary-button-hover-background: rgba(255, 217, 61, 1);
  --color-primary-button-hover-border: rgba(255, 217, 61, 1);
  --color-primary-button-hover-icon: rgba(255, 217, 61, 1);
  --color-primary-button-hover-icon-background: rgba(30, 41, 59, 1);

  --style-border-radius-buttons-primary: 8px;

  --color-input-text: rgba(30, 41, 59, 0.85);
  --color-input-border: rgba(30, 41, 59, 0.2);
  --color-input-hover-text: rgba(30, 41, 59, 1);
  --color-input-hover-border: rgba(255, 217, 61, 0.7);
}

.kreator-section .heading {
  color: var(--yellow);
}

.kreator-section .section-subtitle {
  color: var(--yellow);
}

/* Wrapper kreatora – białe pudełko ze cieniem */
.kreator-wrapper {
  background-color: #ffffff; /* białe tło */
  border-radius: 18px; /* zaokrąglone rogi (spójne z szablonem) */
  padding: 40px; /* odstęp wewnętrzny */
  max-width: 100%; /* max szerokość – żeby nie był za szeroki */
  width: 100%;
  margin: 50px auto 0; /* wycentrowany + odstęp od nagłówka */
  box-shadow: 0 10px 40px rgba(31, 61, 43, 0.08); /* delikatny cień */
}

/* ── Siatka pytań (2 kolumny na desktopie, 1 na mobile) ──────────── */

.kreator-pytania-grid {
  display: grid; /* układ siatki CSS Grid */
  grid-template-columns: 1fr 1fr; /* 2 równe kolumny */
  gap: 32px 40px; /* gap: pionowy 32px, poziomy 40px */
  margin-bottom: 32px;
}

/* Na mobile (do 768px) – 1 kolumna */
@media (max-width: 768px) {
  .kreator-pytania-grid {
    grid-template-columns: 1fr; /* jedna kolumna */
    gap: 24px;
  }
}

/* ====== POJEDYNCZE PYTANIE ====== */

.kreator-pytanie {
  margin-bottom: 0 !important; /* odstęp między pytaniami */
}

.kreator-pytanie:last-of-type {
  margin-bottom: 0 !important; /* więcej odstępu przed wynikiem */
}

/* Etykieta nad opcjami – "1. Rodzaj nieruchomości" */
.kreator-label {
  color: var(--color-foreground); /* Forest Green */
  font-size: 15px;
  font-weight: 600; /* lekko pogrubione */
  margin-bottom: 12px;
  opacity: 0.85;
}

/* ====== KONTENER OPCJI (przyciski w rzędzie) ====== */

.kreator-opcje {
  display: flex; /* przyciski obok siebie */
  flex-wrap: wrap; /* zawijają się na mobile */
  gap: 10px; /* odstęp między przyciskami */
}

/* Wariant z małymi przyciskami (dla liczb 1-5) */
.kreator-opcje.opcje-male .kreator-btn {
  min-width: 52px; /* mała szerokość – kwadratowe */
  padding: 12px 8px; /* mniejszy padding */
  justify-content: center; /* tekst wycentrowany */
}

/* ====== POJEDYNCZY PRZYCISK OPCJI ====== */

.kreator-btn {
  display: inline-flex; /* żeby ikona i tekst były obok siebie */
  align-items: center; /* wyrównanie w pionie */
  gap: 8px; /* odstęp ikona-tekst */

  padding: 12px 20px; /* odstęp wewnętrzny */
  border: 2px solid rgba(31, 61, 43, 0.15);
  background-color: #ffffff; /* białe tło */
  color: var(--color-foreground);
  border-radius: 12px; /* zaokrąglone rogi */

  font-size: 14px;
  font-weight: 500;
  cursor: pointer; /* kursor "łapka" przy najechaniu */

  transition: all 0.2s ease; /* płynna animacja hovera */
}

/* Hover – delikatne wyróżnienie */
.kreator-btn:hover {
  border-color: var(--color-primary-hover);
  background-color: rgba(200, 169, 106, 0.05);
}

/* AKTYWNY przycisk – wybrana opcja */
.kreator-btn.aktywny {
  border-color: var(--color-foreground);
  background-color: var(--color-foreground);
  color: #ffffff; /* biały tekst */
}

/* Aktywny przycisk – hover nie zmienia (już jest aktywny) */
.kreator-btn.aktywny:hover {
  background-color: var(--color-foreground);
  border-color: var(--color-foreground);
}

/* Ikona w przycisku */
.kreator-btn i {
  font-size: 16px; /* rozmiar ikony */
}

/* Etykieta rabatu (-15%, -25%) */
.kreator-rabat {
  color: var(--color-primary-hover);
  font-weight: 600;
  font-size: 12px;
  margin-left: 4px;
}

/* Aktywny przycisk - rabat ma jaśniejszy złoty */
.kreator-btn.aktywny .kreator-rabat {
  color: #e8c788; /* jaśniejszy gold na ciemnym tle */
}

/* ====== SEKCJA WYNIKU (cena + CTA) ====== */

.kreator-wynik {
  background-color: var(--color-background);
  border: 2px solid var(--yellow);
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
  margin-top: 32px;
}

/* Etykieta "Szacunkowa cena" */
.kreator-wynik-label {
  color: var(--color-foreground);
  font-size: 14px;
  margin: 0 0 8px;
  opacity: 0.75;
}

/* GŁÓWNA CENA – duża, mocna */
.kreator-wynik-cena {
  color: var(--color-foreground);
  font-size: 42px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.1;
}

/* Cena (sama liczba) – złota */
.kreator-wynik-cena #kreator-cena {
  color: var(--color-primary-hover);
}

/* Informacja pod ceną */
.kreator-wynik-info {
  color: var(--color-foreground);
  font-size: 13px;
  opacity: 0.65;
  margin: 0 0 20px;
  line-height: 1.5;
}

/* ============================================================
   RESPONSYWNOŚĆ – dostosowania na mobile
   ============================================================ */

@media (max-width: 768px) {
  /* Mniejszy padding wrappera na mobile */
  .kreator-wrapper {
    padding: 24px 20px;
    margin-top: 30px;
  }

  /* Mniejsze przyciski na mobile */
  .kreator-btn {
    padding: 10px 14px;
    font-size: 13px;
  }

  /* Cena nieco mniejsza */
  .kreator-wynik-cena {
    font-size: 36px;
  }

  /* Wrapper wyniku - mniejszy padding */
  .kreator-wynik {
    padding: 22px 18px;
  }
}

/* Lista "Rodzaj usługi" na Kontakt – dopasowanie do stylu pozostałych pól formularza */
.contact-form select {
  width: 100%;
  padding: 0 15px;
  min-height: 54px;
  color: var(--color-input-text);
  background-color: var(--color-input-background);
  border: var(--style-border-width-inputs) solid var(--color-input-border);
  outline: none;
  cursor: pointer;
}

.contact-form select:focus,
.contact-form select:hover {
  color: var(--color-input-hover-text);
  background-color: var(--color-input-hover-background);
  border-color: var(--color-input-hover-border);
}

/* Checkbox zgody RODO – formularz kontaktowy i krok 2 kreatora wyceny */
.field-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 16px;
}

.field-checkbox input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  padding: 0;
  margin: 2px 0 0;
  accent-color: var(--granat);
  cursor: pointer;
}

.field-checkbox label {
  display: block;
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--granat);
  cursor: pointer;
}

.field-checkbox label a {
  color: var(--granat);
  text-decoration: underline;
}

/* Formularz kontaktowy ma granatowe tło – tekst zgody musi być biały */
.contact-form .field-checkbox label {
  color: var(--white);
}

.contact-form .field-checkbox label a {
  color: var(--yellow);
}

/* Cennik */

.card-pricing-headings-active {
  /* background-color: var(--off-white); */
  padding: 24px;
}

/* Środkowa karta (Dom) jest żółta – bez granatowej obwódki przycisk
   znikałby na hover (żółty na żółtym), więc dodajemy 1px granatową ramkę */
.card-pricing.active .button--primary:hover {
  border: 1px solid var(--granat);
}

/* Przycisk "Wyślij wiadomość" na stronie Kontakt – żółte tło/granatowy napis,
   na hover granatowe tło z żółtym napisem i żółtą obwódką */
.contact-form .button--primary {
  background-color: var(--yellow);
  color: var(--granat);
  border: 1px solid var(--yellow);
}
.contact-form .button--primary:hover,
.contact-form .button--primary:focus {
  background-color: var(--granat);
  color: var(--yellow);
  border: 1px solid var(--yellow);
}

/* ============================================================
   KREATOR WYCENY – KROK 2 (dane kontaktowe klienta)
   ============================================================ */

.kreator-podsumowanie-label {
  margin-bottom: 8px;
}

.kreator-podsumowanie-tekst {
  background-color: var(--off-white);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--granat);
  white-space: pre-line;
  margin: 0 0 24px;
}

.kreator-krok-2-cena {
  margin-bottom: 28px;
}

.kreator-lead-status {
  min-height: 20px;
  font-size: 14px;
  font-weight: 600;
  margin: 16px 0 0;
  text-align: center;
}

.kreator-lead-status.sukces {
  color: #1a7f37;
}

.kreator-lead-status.blad {
  color: #c0362c;
}

.kreator-krok-2-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

.kreator-btn-wstecz {
  background-color: transparent;
  color: var(--granat);
  border: 1px solid var(--granat);
  border-radius: 8px;
  padding: 0 30px;
  min-height: var(--style-button-height, 54px);
  font-size: var(--font-button-size);
  font-weight: var(--font-button--weight);
  font-family: var(--font-button--family);
  cursor: pointer;
  transition: all 0.3s;
}

.kreator-btn-wstecz:hover {
  background-color: var(--granat);
  color: var(--white);
}

#kreator-wyslij:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Status wysyłki formularza kontaktowego (kontakt.html) */
.form-status {
  min-height: 20px;
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
}

.form-status.sukces {
  color: #1a7f37;
}

.form-status.blad {
  color: #c0362c;
}

#kontakt-form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Mapa na stronie Kontakt – czarno-biała, tak jak w sekcji "Obszar działania" */
.google-map iframe {
  filter: grayscale(100%) contrast(0.95);
  transition: filter 0.4s ease;
}

.google-map:hover iframe {
  filter: grayscale(0%) contrast(1);
}

/* ============================================================
   OPINIE KLIENTÓW – siatka kart (zastępuje dawną karuzelę)
   ============================================================ */

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 50px;
}

.testimonial-card {
  background-color: #ffffff;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 10px 40px rgba(31, 61, 43, 0.08);
}

.testimonial-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.testimonial-quote-icon {
  color: var(--yellow);
  display: flex;
}

.testimonial-stars {
  color: var(--yellow);
  display: flex;
  gap: 3px;
  font-size: 14px;
}

.testimonial-text {
  flex-grow: 1;
  color: var(--granat);
  line-height: 1.6;
}

.testimonial-author {
  border-top: 1px solid rgba(30, 41, 59, 0.1);
  padding-top: 16px;
}

.testimonial-location {
  opacity: 0.65;
}

@media (max-width: 767px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .testimonial-card {
    padding: 24px;
  }
}

/* ============================================================
   IKONY "DLACZEGO MY" (strona główna, cennik, o nas)
   Białe tło + granatowa obwódka + granatowa ikona, zamiast
   tych samych 3 ikon powielanych na 6-13 różnych kart.
   ============================================================ */

.why-icon-wrapper {
  background-color: var(--white);
  border: 2px solid var(--granat);
  border-radius: 18px;
  color: var(--granat);
  font-size: 30px;
}

@media (max-width: 991px) {
  .why-icon-wrapper {
    font-size: 26px;
  }
}

/* Wariant żółty (strona główna i O nas) - obramowanie zostaje granatowe */
.why-icon-wrapper.why-icon-yellow {
  color: var(--yellow);
}

/* ============================================================
   DOPISEK POD KAFELKAMI CENNIKA (gwiazdka o koszcie dojazdu)
   ============================================================ */

.pricing-disclaimer {
  text-align: center;
  margin-top: 24px;
  opacity: 0.65;
}

/* ============================================================
   IKONY "OBSZAR DZIAŁANIA" (strona główna)
   Granatowe kółko/kwadrat + biała ikona dopasowana do nagłówka,
   każda karta ma teraz inną, pasującą ikonę.
   ============================================================ */

.area-icon-wrapper {
  background-color: var(--granat);
  color: var(--white);
  border-radius: 10px;
  font-size: 32px;
}

@media (max-width: 991px) {
  .area-icon-wrapper {
    font-size: 28px;
  }
}

/* ============================================================
   IKONY SEKCJI "USŁUGI" (strona główna)
   Ta sama granatowo-biała stylistyka co "Obszar działania",
   każda zakładka usługi ma teraz własną, pasującą ikonę
   zamiast powielonej między "Biura" a "Tapicerka".
   ============================================================ */

.service-icon-wrapper {
  width: 70px;
  height: 70px;
  min-width: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--granat);
  color: var(--white);
  border-radius: 10px;
  font-size: 32px;
}


.pricing-note {
  max-width: 720px;
  margin: 40px auto 0;
  text-align: center;
  font-weight: 500;
  color: var(--granat);
}

.pricing-note + .pricing-disclaimer {
  margin-top: 12px;
}

/* ============================================================
   Cennik – tabela usług dodatkowych
   ============================================================ */
.extra-services-card {
  max-width: 820px;
  margin: 0 auto;
  background-color: var(--white);
  border: 1px solid rgba(30, 41, 59, 0.1);
}

.extra-services-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--granat);
}

.extra-services-table thead th {
  background-color: var(--granat);
  color: var(--yellow);
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 18px 28px;
  text-align: left;
}

.extra-services-table th,
.extra-services-table td {
  padding: 20px 28px;
  vertical-align: middle;
}

.extra-services-table tbody th {
  font-size: 18px;
  font-weight: 600;
  text-align: left;
}

.extra-services-table thead th:last-child,
.extra-services-table td {
  text-align: right;
  white-space: nowrap;
}

.extra-services-table td {
  font-size: 18px;
  font-weight: 600;
}

.extra-services-table tbody tr + tr {
  border-top: 1px solid rgba(30, 41, 59, 0.1);
}

.extra-services-table tbody tr:hover {
  background-color: var(--off-white);
}

.extra-services-detail {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 400;
  opacity: 0.7;
}

@media (max-width: 575px) {
  .extra-services-table thead th,
  .extra-services-table th,
  .extra-services-table td {
    padding: 16px;
  }

  .extra-services-table tbody th,
  .extra-services-table td {
    font-size: 16px;
  }

  .extra-services-table td {
    white-space: normal;
  }
}

/* ============================================================
   Kafelki cen – boczne równej wysokości, środkowy (Dom) wysunięty
   ============================================================ */
@media (min-width: 1200px) {
  .pricing-cards .product-grid > [class*="col-"] {
    display: flex;
    align-items: center;
  }

  .pricing-cards .card-pricing {
    width: 100%;
    height: calc(100% - 48px);
  }

  .pricing-cards .card-pricing.active {
    height: 100%;
    padding-block: 52px;
    box-shadow: 0 24px 48px rgba(30, 41, 59, 0.15);
  }

  /* przycisk zawsze na dole karty, niezależnie od długości listy */
  .pricing-cards .card-pricing .buttons {
    margin-top: auto;
  }
}

/* ============================================================
   Strona główna – sekcja Usługi: widoczne separatory i sygnał,
   że zwinięte usługi można kliknąć
   ============================================================ */
.our-services accordion-horizontal .service-list {
  --color-border: rgba(255, 255, 255, 0.14);
  --color-background: rgba(46, 55, 64, 1);
}

/* płynne, "miękkie" przełączanie kart */
.service-list {
  --ease-soft: cubic-bezier(0.65, 0, 0.35, 1);
}

.service-list .accordion-content {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-list .accordion-li.active .accordion-content {
  opacity: 1;
  transition: opacity 0.6s ease 0.35s;
}

@media (max-width: 991px) {
  .service-list .accordion-content {
    transition:
      max-height 0.6s var(--ease-soft),
      opacity 0.3s ease;
  }

  .service-list .accordion-li.active .accordion-content {
    transition:
      max-height 0.6s var(--ease-soft),
      opacity 0.6s ease 0.15s;
  }
}

.service-list-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.7);
}

.service-list-hint .bi {
  color: var(--yellow);
  font-size: 18px;
}

.service-list .accordion-title {
  cursor: pointer;
}

.service-list .accordion-title:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 4px;
  border-radius: 8px;
}

.service-list .accordion-title .service-icon-wrapper,
.service-list .accordion-title .heading,
.service-list .accordion-title .icon {
  transition: background-color 0.3s, color 0.3s, transform 0.3s;
}

@media (hover: hover) {
  .service-list .accordion-li:not(.active):hover .service-icon-wrapper {
    background-color: var(--yellow);
    color: var(--granat);
  }

  .service-list .accordion-li:not(.active):hover .heading,
  .service-list .accordion-li:not(.active):hover .icon {
    color: var(--yellow);
  }

  .service-list .accordion-li:not(.active):hover .icon-plus-circle {
    transform: rotate(90deg);
  }
}

@media (min-width: 992px) {
  /* separatory od góry do dołu: odstęp pionowy przeniesiony z listy na karty */
  .our-services accordion-horizontal .service-list {
    padding-block: 0;
  }

  .our-services .service-list .accordion-li {
    padding-block: 40px;
  }

  .accordion-horizontal .service-list .accordion-li {
    transition:
      width 0.8s var(--ease-soft),
      min-width 0.8s var(--ease-soft),
      background-color 0.3s;
  }

  .service-list .accordion-li:not(.active) .accordion-title {
    animation: service-title-in 0.5s ease 0.3s both;
  }

  .service-list .accordion-li:not(.active):hover {
    background-color: rgba(255, 255, 255, 0.04);
  }
}

@keyframes service-title-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ============================================================
   Bezpiecznik przed poziomym przewijaniem na mobile – rozwijane
   menu (position:fixed + translateX) potrafi dodać ~6px do
   szerokości dokumentu mimo że wizualnie jest poza ekranem.
   ============================================================ */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

/* ============================================================
   Strona główna – kolumny "Domu / AirBnb / Firma": równa
   szerokość i wyrównanie do góry (były różnej szerokości,
   nagłówki "pływały" na różnych wysokościach)
   ============================================================ */
.image-text .list-block {
  align-items: flex-start;
}

.image-text .list-block .text-item {
  flex: 1 1 0;
  max-width: none;
}

@media (max-width: 767px) {
  .image-text .list-block {
    flex-direction: column;
    gap: 32px;
  }

  .image-text .list-block .text-item {
    max-width: 100%;
  }
}