.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-color-553701f:#F4F6F2;--e-global-color-c211e91:#467B3C;--e-global-color-f0253a9:#1A1D18;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --ciemny-grafit:#1a1d18; --Space-Grotesk:Space Grotesk; --zielony:#3a6832; --Manrope:Manrope; --zolty:#efbc3b; --zloty:#8f742b; --mietowy:#d7e3d1; --szary:#9ca295; --jasny-szary:#f5f6f3; --ciemny-szary:#ffffff; --space-blok:30px; --padding-top:80px; --padding-zero:0px; --bialy:#ffffff; }
/* Start custom CSS *//* =========================================================
   LOOP CAROUSEL — KATEGORIE MASZYN
   ========================================================= */


/* ---------------------------------------------------------
   1. WIDGET KARUZELI
   --------------------------------------------------------- */

.kategorie-carousel {
  position: relative;
  overflow: visible !important;
}

.kategorie-carousel .elementor-widget-container {
  overflow: visible !important;
}


/*
 * Dodajemy miejsce na cień kart,
 * ale nie pozwalamy slajdom wychodzić bez kontroli.
 */
.kategorie-carousel .swiper {
  padding-top: 14px !important;
  padding-bottom: 30px !important;
  padding-left: 14px !important;
  padding-right: 14px !important;

  margin-top: -14px !important;
  margin-bottom: -30px !important;
  margin-left: -14px !important;
  margin-right: -14px !important;
}

.kategorie-carousel .swiper-slide {
  overflow: visible !important;
}


/* ---------------------------------------------------------
   2. KARTA KATEGORII
   --------------------------------------------------------- */

.kategoria-card {
  overflow: hidden !important;

  background: #ffffff !important;

  border: 1px solid #dbe3d6 !important;
  border-radius: 16px !important;

  color: #343634 !important;
  text-decoration: none !important;

  box-shadow: none !important;

  transition:
    border-color .25s ease,
    box-shadow .25s ease !important;
}


/* Gdy cały kontener jest linkiem */
a.kategoria-card,
a.kategoria-card:link,
a.kategoria-card:visited,
a.kategoria-card:hover,
a.kategoria-card:active {
  color: #343634 !important;
  text-decoration: none !important;
}


/* Wszystkie linki wewnątrz karty */
.kategoria-card a,
.kategoria-card a:link,
.kategoria-card a:visited,
.kategoria-card a:hover,
.kategoria-card a:active {
  color: inherit !important;
  text-decoration: none !important;
}


/* Hover całej karty */
.kategoria-card:hover {
  border-color: #7fa87a !important;

  box-shadow:
    0 12px 28px rgba(30, 50, 28, .10) !important;
}


/* ---------------------------------------------------------
   3. NAZWA KATEGORII
   --------------------------------------------------------- */

.kategoria-title,
.kategoria-title *,
.kategoria-title a,
.kategoria-title a:link,
.kategoria-title a:visited {
  color: #343634 !important;
  text-decoration: none !important;

  transition: color .25s ease !important;
}


/* Nazwa kategorii na hover */
.kategoria-card:hover .kategoria-title,
.kategoria-card:hover .kategoria-title *,
.kategoria-card:hover .kategoria-title a {
  color: #43863f !important;
}


/* ---------------------------------------------------------
   4. STRZAŁKA WEWNĄTRZ KARTY
   --------------------------------------------------------- */

.kategoria-arrow {
  color: #43863f !important;

  transition:
    transform .25s ease,
    color .25s ease !important;
}

.kategoria-arrow svg {
  fill: currentColor !important;
  stroke: currentColor !important;
}

.kategoria-card:hover .kategoria-arrow {
  transform: translateX(5px) !important;
}


/* ---------------------------------------------------------
   5. OBRAZEK
   --------------------------------------------------------- */

.kategoria-image {
  overflow: hidden !important;
}

.kategoria-image img {
  display: block !important;

  width: 100% !important;

  transition: transform .4s ease !important;
}

.kategoria-card:hover .kategoria-image img {
  transform: scale(1.025) !important;
}


/* ---------------------------------------------------------
   6. PAGINACJA — KROPKI
   --------------------------------------------------------- */

.kategorie-carousel .swiper-pagination {
  position: relative !important;

  left: auto !important;
  right: auto !important;
  bottom: auto !important;

  width: 100% !important;

  margin-top: 22px !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  gap: 8px !important;
}


/* zwykła kropka */
.kategorie-carousel .swiper-pagination-bullet {
  width: 7px !important;
  height: 7px !important;

  margin: 0 !important;

  background: #d6dfd2 !important;

  opacity: 1 !important;

  transition:
    background-color .2s ease,
    transform .2s ease !important;
}


/* aktywna kropka */
.kategorie-carousel .swiper-pagination-bullet-active {
  background: #43863f !important;

  transform: scale(1.15) !important;
}


/* ---------------------------------------------------------
   7. STRZAŁKI KARUZELI
   --------------------------------------------------------- */

.kategorie-carousel .elementor-swiper-button,
.kategorie-carousel .swiper-button-prev,
.kategorie-carousel .swiper-button-next {
  width: 44px !important;
  height: 44px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  top: 50% !important;

  border: 1px solid #d9e2d5 !important;
  border-radius: 50% !important;

  background: #ffffff !important;
  color: #43863f !important;

  box-shadow: 0 4px 14px rgba(30, 50, 28, .06) !important;

  transition:
    background-color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease !important;
}


/* Lewa strzałka */
.kategorie-carousel .elementor-swiper-button-prev,
.kategorie-carousel .swiper-button-prev {
  left: -56px !important;

  transform: translateY(-50%) !important;
}


/* Prawa strzałka */
.kategorie-carousel .elementor-swiper-button-next,
.kategorie-carousel .swiper-button-next {
  right: -56px !important;

  transform: translateY(-50%) !important;
}


/* Ikony */
.kategorie-carousel .elementor-swiper-button svg,
.kategorie-carousel .swiper-button-prev svg,
.kategorie-carousel .swiper-button-next svg {
  width: 18px !important;
  height: 18px !important;

  fill: currentColor !important;
  stroke: currentColor !important;
}


/* Hover strzałek */
.kategorie-carousel .elementor-swiper-button-prev:hover,
.kategorie-carousel .swiper-button-prev:hover,
.kategorie-carousel .elementor-swiper-button-next:hover,
.kategorie-carousel .swiper-button-next:hover {
  background: #f4f8f2 !important;

  border-color: #79a875 !important;

  box-shadow:
    0 6px 18px rgba(30, 50, 28, .10) !important;

  transform:
    translateY(-50%)
    scale(1.04) !important;
}


/* Nieaktywna strzałka */
.kategorie-carousel .swiper-button-disabled,
.kategorie-carousel .elementor-swiper-button.swiper-button-disabled {
  opacity: .35 !important;

  cursor: default !important;
}


/* ---------------------------------------------------------
   8. TABLET
   --------------------------------------------------------- */

@media (max-width: 1024px) {

  .kategorie-carousel .elementor-swiper-button-prev,
  .kategorie-carousel .swiper-button-prev {
    left: -20px !important;
  }

  .kategorie-carousel .elementor-swiper-button-next,
  .kategorie-carousel .swiper-button-next {
    right: -20px !important;
  }

}


/* ---------------------------------------------------------
   9. MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

  .kategorie-carousel .swiper-pagination {
    margin-top: 18px !important;

    gap: 7px !important;
  }

  .kategorie-carousel .swiper-pagination-bullet {
    width: 6px !important;
    height: 6px !important;
  }


  .kategorie-carousel .elementor-swiper-button,
  .kategorie-carousel .swiper-button-prev,
  .kategorie-carousel .swiper-button-next {
    width: 40px !important;
    height: 40px !important;
  }


  .kategorie-carousel .elementor-swiper-button-prev,
  .kategorie-carousel .swiper-button-prev {
    left: 6px !important;
  }

  .kategorie-carousel .elementor-swiper-button-next,
  .kategorie-carousel .swiper-button-next {
    right: 6px !important;
  }


  /* Na dotykowych urządzeniach nie potrzebujemy animacji hover */
  .kategoria-card:hover {
    box-shadow: none !important;
  }

  .kategoria-card:hover .kategoria-image img {
    transform: none !important;
  }

  .kategoria-card:hover .kategoria-arrow {
    transform: none !important;
  }

}

/* =========================================
   POPRAWKA: PAGINACJA NA ŚRODKU
   ========================================= */

.kategorie-carousel .swiper-pagination {
  position: static !important;

  width: fit-content !important;
  max-width: 100% !important;

  margin: 24px auto 0 auto !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  gap: 8px !important;

  transform: none !important;
}

.kategorie-carousel .swiper-pagination-bullet {
  width: 7px !important;
  height: 7px !important;

  margin: 0 !important;

  background: #d6dfd2 !important;
  opacity: 1 !important;
}

.kategorie-carousel .swiper-pagination-bullet-active {
  background: #43863f !important;
  transform: scale(1.15) !important;
}


/* =========================================
   POPRAWKA: STRZAŁKA W KARCIE
   ========================================= */

.kategoria-arrow,
.kategoria-arrow *,
.kategoria-arrow svg,
.kategoria-arrow svg *,
.kategoria-arrow path {
  color: #43863f !important;
  fill: #43863f !important;
  stroke: #43863f !important;
}


/* Hover strzałki w karcie */
.kategoria-card:hover .kategoria-arrow {
  transform: translateX(5px) !important;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

  .kategorie-carousel .swiper-pagination {
    margin-top: 18px !important;
    gap: 7px !important;
  }

  .kategorie-carousel .swiper-pagination-bullet {
    width: 6px !important;
    height: 6px !important;
  }
}/* End custom CSS */