/* =========================
   BUTTON (gradient fill on hover).
   ========================= */

.btn-white-custom {
  background-color: var(--pro3w-white);
  color: var(--pro3w-black) !important;

  background-image: linear-gradient(to right, var(--pro3w-black) 0, var(--pro3w-black) 100%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;

  transition: color .3s ease, background-size .3s ease, border-color .3s ease;
}

.btn-white-custom:hover {
  background-size: 100% 100%;
  color: var(--pro3w-white) !important;
}

/* blue */
.btn-blue-custom {
  background-color: var(--pro3w-user-color-1);
  color: var(--pro3w-white) !important;

  background-image: linear-gradient(to right, var(--pro3w-user-color-2) 0, var(--pro3w-user-color-2) 100%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;

  transition: color .3s ease, background-size .3s ease, border-color .3s ease;
}

.btn-blue-custom:hover{
  background-size: 100% 100%;
  color: var(--pro3w-white) !important;;
}

/* =========================
   SECTION + LAYERING
   ========================= */

section.bg-user-color-2{
  position: relative;
  overflow: hidden;
}

/* tło ikon (pod treścią) */
.pixel-bg{
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* treść zawsze nad ikonami */
section.bg-user-color-2 .container{
  position: relative;
  z-index: 1;
}


/* =========================
   PIXEL ICONS (Font Awesome <i>)
   ========================= */

.pixel-group{
  position: absolute;
  inset: 0;
}

/* same ikonki */
.sujet-pixel-icon{
  position: absolute;
  display: inline-block;
  line-height: 1;
  /* performance */
  will-change: transform;

  /* ruch ikony */
  animation: floatIcon 12s ease-in-out infinite !important;
}

/* rozjazd czasu ikon w grupie */
.pixel-group > .sujet-pixel-icon:nth-child(2){
  animation-duration: 16s !important;
  animation-delay: -2s !important;
}
.pixel-group > .sujet-pixel-icon:nth-child(3){
  animation-duration: 14s !important;
  animation-delay: -6s !important;
}

/* rozmiary (dla <i> to font-size) */
.size-lg{ font-size: 8vw; }
.size-md{ font-size: 5vw; }
.size-sm{ font-size: 3vw; }

/* animacja pojedynczej ikony */
@keyframes floatIcon{
  0%,100%{ transform: translate3d(0,0,0) translateZ(0); }
  50%    { transform: translate3d(0,-20px,0) translateZ(0); }
}


/* =========================
   GROUP FLOAT (drugi ruch, żeby nie było synchro)
   ========================= */

.pixel-group-1{
  animation: groupFloat1 18s ease-in-out infinite !important;
}

.pixel-group-2{
  animation: groupFloat2 22s ease-in-out infinite !important;
}

@keyframes groupFloat1{
  0%,100%{ transform: translate3d(0,0,0); }
  50%    { transform: translate3d(25px,-15px,0); }
}

@keyframes groupFloat2{
  0%,100%{ transform: translate3d(0,0,0); }
  50%    { transform: translate3d(-20px,20px,0); }
}


/* =========================
   POSITIONS (dopasuj jak chcesz)
   ========================= */

.pixel-group-1 > .sujet-pixel-icon:nth-child(1){ top: 15%; left: 10%; color: rgba(255,255,255,.15); filter: blur(.2rem);}
.pixel-group-1 > .sujet-pixel-icon:nth-child(2){ top: 40%; left: 25%; color: rgba(255,255,255,.05); }
.pixel-group-1 > .sujet-pixel-icon:nth-child(3){ top: 65%; left: 12%; color: rgba(255,255,255,.12); filter: blur(.3rem);}

.pixel-group-2 > .sujet-pixel-icon:nth-child(1){ top: 20%; right: 15%; color: rgba(255,255,255,.06); filter: blur(.2rem);}
.pixel-group-2 > .sujet-pixel-icon:nth-child(2){ top: 50%; right: 8%;color: rgba(255,255,255,.08); filter: blur(.12rem); }
.pixel-group-2 > .sujet-pixel-icon:nth-child(3){ top: 70%; right: 20%;color: rgba(255,255,255,.10); }


/* =========================
   OPTIONAL: if your background is light, swap color
   ========================= */
/*
section.bg-user-color-2.is-light .sujet-pixel-icon{
  color: rgba(0,0,0,.18);
}
*/


/* =========================
   DEBUG (odkomentuj na test)
   ========================= */
/*
.pixel-bg{ outline: 2px solid lime; }
.sujet-pixel-icon{ outline: 1px dashed red; }
*/


/* =========================
   WCAG: reduce motion
   (jeśli użytkownik ma w systemie “Ogranicz ruch”, animacje się wyłączą)
   ========================= */

@media (prefers-reduced-motion: reduce){
  .pixel-group,
  .sujet-pixel-icon{
    animation: none !important;
  }
}
//nowe
/* tło ikon (pod treścią) */
.pixel-bg2{
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* grupy ikon */
.pixel-group2{
  position: absolute;
  inset: 0;
}

/* ikonki */
.pixel-bg2 .sujet-pixel-icon{
  position: absolute;
  display: inline-block;
  line-height: 1;
  will-change: transform;

  animation: floatIcon 12s ease-in-out infinite !important;
}

/* rozjazd czasu animacji */
.pixel-group2 > .sujet-pixel-icon:nth-child(2){
  animation-duration: 16s !important;
  animation-delay: -2s !important;
}

.pixel-group2 > .sujet-pixel-icon:nth-child(3){
  animation-duration: 14s !important;
  animation-delay: -6s !important;
}

/* rozmiary */
.size-lg{ font-size: 8vw; }
.size-md{ font-size: 5vw; }
.size-sm{ font-size: 3vw; }

/* animacja */
@keyframes floatIcon{
  0%,100%{ transform: translate3d(0,0,0) translateZ(0); }
  50%{ transform: translate3d(0,-20px,0) translateZ(0); }
}


/* ===== group float ===== */

.pixel-bg2 .pixel-group-1{
  animation: groupFloat1 18s ease-in-out infinite !important;
}

.pixel-bg2 .pixel-group-2{
  animation: groupFloat2 22s ease-in-out infinite !important;
}

@keyframes groupFloat1{
  0%,100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(25px,-15px,0); }
}

@keyframes groupFloat2{
  0%,100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(-20px,20px,0); }
}


/* =========================
   POSITIONS + CZARNE IKONY
   ========================= */

.pixel-bg2 .pixel-group-1 > .sujet-pixel-icon:nth-child(1){
  top: 15%;
  left: 10%;
  color: rgba(var(--pro3w-user-color-1-rgb),.15);
  filter: blur(.2rem);
}

.pixel-bg2 .pixel-group-1 > .sujet-pixel-icon:nth-child(2){
  top: 40%;
  left: 25%;
  color: rgba(var(--pro3w-user-color-1-rgb),.05);
}

.pixel-bg2 .pixel-group-1 > .sujet-pixel-icon:nth-child(3){
  top: 65%;
  left: 12%;
  color: rgba(var(--pro3w-user-color-1-rgb),.12);
  filter: blur(.3rem);
}

.pixel-bg2 .pixel-group-2 > .sujet-pixel-icon:nth-child(1){
  top: 20%;
  right: 15%;
  color: rgba(0,0,0,.06);
  filter: blur(.2rem);
}.pixel-bg2 .pixel-group-2 > .sujet-pixel-icon:nth-child(2){
  top: 50%;
  right: 8%;
  color: rgba(var(--pro3w-user-color-1-rgb),.15);
  filter: blur(.12rem);
}



.pixel-bg2 .pixel-group-2 > .sujet-pixel-icon:nth-child(3){
  top: 70%;
  right: 20%;
  color: rgba(var(--pro3w-user-color-1-rgb),.10);
}


/* reduce motion */

@media (prefers-reduced-motion: reduce){
  .pixel-group2,
  .pixel-bg2 .sujet-pixel-icon{
    animation: none !important;
  }
}


.animate-button-right i {
  transform: translateX(0px);
  transition: all 0.3s;
text-decoration:none!Important;
}
.box__readmore:hover .animate-button-right i {
  transform: translateX(4px);
  transition: all 0.3s;
text-decoration:none!Important;
}

/* =========================
   WRAPPER + OVERLAYS
   ========================= */
.box-kategorie .box__wrapper {
  position: relative;
  overflow: hidden;
}

/* gradient */
.box-kategorie .box__wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 40%,
    rgba(0,0,0,.2) 70%,
    rgba(0,0,0,1) 100%
  );
  z-index: 1;
}

/* niebieski hover overlay */
.box-kategorie .box__wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(var(--pro3w-user-color-1-rgb), .9);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 1;
}

.box-kategorie .box__wrapper:hover::before,
.box-kategorie .box__wrapper:focus-within::before {
  opacity: 1;
}

/* =========================
   LAYOUT — tytuł na dole
   ========================= */
.box-kategorie .box__body {
  position: relative;
  z-index: 2;
  
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: start;
  gap: .6rem;
}

/* =========================
   NOTKA — schowana w gridzie
   ========================= */
.box-kategorie .box__content {
  /* grid sprawia, że domyślnie zajmuje 0 miejsca */
  display: grid;
  grid-template-rows: 0fr;
  
  transition-property: grid-template-rows;
  transition-duration: .25s;
  transition-timing-function: ease;
  transition-delay: .15s;
}

.box-kategorie .box__content > * {
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  
  transition: 
    opacity .25s ease,
    transform .25s ease .15s;
}

/* hover → notka rozwija się do naturalnej wysokości */
.box-kategorie .box__wrapper:hover .box__content,
.box-kategorie .box__wrapper:focus-within .box__content {
  grid-template-rows: 1fr;
}

.box-kategorie .box__wrapper:hover .box__content > *,
.box-kategorie .box__wrapper:focus-within .box__content > * {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   WCAG
   ========================= */
@media (prefers-reduced-motion: reduce) {
  .box-kategorie .box__wrapper::before,
  .box-kategorie .box__content,
  .box-kategorie .box__content > * {
    transition: none;
    transform: none;
  }
}

/* nowe roboty */
/* =========================
   WRAPPER + OVERLAYS — ROBOTY2
   ========================= */
.roboty2 .box__wrapper {
  position: relative;
  overflow: hidden;
  transition: transform .3s ease;
}

.roboty2 .box__wrapper:hover,
.roboty2 .box__wrapper:focus-within {
  transform: scale(1.05);
}

/* stałe lekkie tło z gradientem */
.roboty2 .box__wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(var(--pro3w-user-color-1-rgb), .3) 0%,
    rgba(var(--pro3w-user-color-1-rgb), .3) 60%,
    rgba(0,0,0,.8) 100%
  );
  z-index: 1;
}

/* intensywniejsze tło po hoverze */
.roboty2 .box__wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(var(--pro3w-user-color-1-rgb), .9);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 1;
}

.roboty2 .box__wrapper:hover::before,
.roboty2 .box__wrapper:focus-within::before {
  opacity: 1;
}

/* =========================
   LAYOUT — tytuł na dole
   ========================= */
.roboty2 .box__body {
  position: relative;
  z-index: 2;
  
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: start;
  gap: .6rem;
}

/* =========================
   NOTKA — schowana w gridzie
   ========================= */
.roboty2 .box__content {
  display: grid;
  grid-template-rows: 0fr;
  
  transition: grid-template-rows .25s ease;
}

.roboty2 .box__content > * {
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  
  transition: 
    opacity .25s ease,
    transform .25s ease;
}

/* hover → notka rozwija się do naturalnej wysokości */
.roboty2 .box__wrapper:hover .box__content,
.roboty2 .box__wrapper:focus-within .box__content {
  grid-template-rows: 1fr;
}

.roboty2 .box__wrapper:hover .box__content > *,
.roboty2 .box__wrapper:focus-within .box__content > * {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   WCAG
   ========================= */
@media (prefers-reduced-motion: reduce) {
  .roboty2 .box__wrapper,
  .roboty2 .box__wrapper::before,
  .roboty2 .box__content,
  .roboty2 .box__content > * {
    transition: none;
    transform: none;
  }
}

/* oferta */
/* =========================
   WRAPPER + OVERLAYS — ARTICLE (tylko w .offers)
   ========================= */
.offers .article_ex_pos_container--item .article-card__wrapper, .offers .article_module_container--item  {
  position: relative;
  overflow: hidden;
}

/* stałe lekkie tło na obrazku */
.offers .article_ex_pos_container--item .article-card__image::after, .offers .article_module_container--item .article-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(var(--pro3w-user-color-1-rgb), .3);
  z-index: 1;
  transition: opacity .25s ease;
}

/* tło znika po hoverze */
.offers .article_ex_pos_container--item .article-card__wrapper:hover .article-card__image::after,
.offers .article_ex_pos_container--item .article-card__wrapper:focus-within .article-card__image::after,
.offers .article_module_container--item .article-card__wrapper:hover .article-card__image::after,
.offers .article_module_container--item .article-card__wrapper:focus-within .article-card__image::after  {
  opacity: 0;
}

/* intensywne niebieskie tło po hoverze */
.offers .article_ex_pos_container--item .article-card__image::before, .offers .article_module_container--item .article-card__image::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(var(--pro3w-user-color-1-rgb), .9);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 1;
}

.offers .article_ex_pos_container--item .article-card__wrapper:hover .article-card__image::before,
.offers .article_ex_pos_container--item .article-card__wrapper:focus-within .article-card__image::before,
.offers .article_module_container--item .article-card__wrapper:hover .article-card__image::before,
.offers .article_module_container--item .article-card__wrapper:focus-within .article-card__image::before  {
  opacity: 1;
}

/* pozycjonowanie obrazka */
.offers .article_ex_pos_container--item .article-card__image,.offers .article_module_container--item .article-card__image {
  position: relative;
}

/* =========================
   ARTICLE-BODY — ukryty, wyśrodkowany
   ========================= */
.offers .article_ex_pos_container--item .article-card__body, .offers .article_module_container--item .article-card__body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  
  opacity: 0;
  pointer-events: none;
  
  transition: opacity .25s ease;
}

/* hover → pokazujemy article-body */
.offers .article_ex_pos_container--item .article-card__wrapper:hover .article-card__body,
.offers .article_ex_pos_container--item .article-card__wrapper:focus-within .article-card__body,
.offers .article_module_container--item .article-card__wrapper:hover .article-card__body,
.offers .article_module_container--item .article-card__wrapper:focus-within .article-card__body {
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   WCAG
   ========================= */
@media (prefers-reduced-motion: reduce) {
  .offers .article_ex_pos_container--item .article-card__image::before,
  .offers .article_ex_pos_container--item .article-card__image::after,
  .offers .article_ex_pos_container--item .article-card__body,
  .offers .article_module_container--item .article-card__image::before,
  .offers .article_module_container--item .article-card__image::after,
  .offers .article_module_container--item .article-card__body {
    transition: none;
  }
  
  .offers .article_ex_pos_container--item .article-card__body, .offers .article_module_container--item .article-card__body {
    position: static;
    transform: none;
  }
}

#content-info  {
  .box__wrapper {
    animation: w-img 20s alternate infinite ease-in;
    }
    @keyframes w-img {
      0%   {transform: scale(1);}
      100% {transform: scale(1.25);}
    }
}

/* OFFERS: zoom zdjęcia w tle podczas hovera (razem z overlay) */

/* ważne: ukrycie "wyjeżdżania" po powiększeniu */
.offers .article-card__image {
  overflow: hidden;
}

/* animujemy obrazek */
.offers .article-card__image img {
  transform: scale(1);
  transition: transform .45s ease;
  will-change: transform;
}

/* hover na wrapper -> zoom obrazka */
.offers .article-card__wrapper:hover .article-card__image img,
.offers .article-card__wrapper:focus-within .article-card__image img {
  transform: scale(1.12);
}

/* WCAG: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .offers .article-card__image img {
    transition: none;
  }
}

.sticky-top {
  top: calc(var(--header-h) - 2rem)!important;
  z-index:1!important;
}
@media (max-width: 768px) {
  .offcanvas, .dropdown-menu  {
    background: var(--pro3w-user-color-1)!important;
    color: var(--pro3w-white)!important;
  }
  .dropdown-item {
    color: var(--pro3w-white)!important;
  }
  .dropdown-item:focus, .dropdown-item:hover {
    ackground: transparent!important;
  }
  .menu__item--title {
    color: var(--pro3w-white)!important;
  }
}

.site-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  
  .logo-color, .logo-white {
    transition: opacity 0.3s ease-in-out;
    max-width: 100%;
    height: auto;
  }

  .logo-white {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
}

body.header-top {
  .logo-color {
    opacity: 1;
  }
  .logo-white {
    opacity: 0;
  }
}

body.header-not-top {
  .logo-color {
    opacity: 0;
  }
  .logo-white {
    opacity: 1;
  }
}
.table.table-blue {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    background-color: #fff;
    border: 1px solid #052c65;
    margin-bottom: 1rem;
}

.table.table-blue thead th {
    background-color: #052c65;
    color: #fff;
    vertical-align: middle;
    padding: .9rem .75rem;
    border-top: 1px solid #052c65;
    border-bottom: 1px solid #052c65;
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    text-align: center;
    font-weight: 700;
}

.table.table-blue thead th:first-child {
    text-align: left;
    border-left-color: #052c65;
}

.table.table-blue thead th:last-child {
    border-right-color: #052c65;
}

.table.table-blue tbody td {
    padding: .9rem .75rem;
    vertical-align: middle;
    border: 1px solid #052c65;
    background-color: #fff;
}

.table.table-blue tbody td:first-child {
    text-align: left;
}

.table.table-blue tbody td:not(:first-child) {
    text-align: center;
}
.article_module_container {
padding: 2rem 0;
}