/* =========================
   THEME / TOKENS
   ========================= */
:root {
  /* colors */
  --brand-blue: #1b406b;
  --brand-red: #A8372B;
  --brand-red-700: #b91b1c;
  --accent: #facd48;
  --surface: #ffffff;
  --ink: #333333;
  --muted: #f1f3f5;
  --dark: #000;
  /* radii, spacing, sizes */
  --r-xxl: 25px;
  --r-md: 10px;
  --space-1: 6px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 15px;
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .12);

  /* carousel defaults */
  --gap: 16px;
  --size: clamp(88px, 9vw, 108px);
  --label: 13px;
  --dur: 420ms;
  --easing: cubic-bezier(.22, .61, .36, 1);
  --tail: 0%;
}

body {
  font-family: 'Nunito Sans', sans-serif !important;
}


/* =========================
   GLOBAL UTILS
   ========================= */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

p {
  letter-spacing: 0 !important;
  margin: 0;
  font-size: 14px !important;
  line-height: 22px !important;
  color: var(--brand-blue);
}

/* =========================
   CAROUSEL
   ========================= */
.carousel-root {
  position: relative;
  width: 100%;
  overflow: hidden;
  touch-action: pan-x;
  user-select: none;}

.cat2 {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.cat2-container {
  margin-top: 70px;
  padding: 0 1%;
}

.cat2-viewport {
    margin-left: 5% !important;
    margin-right: 5% !important;  overflow: hidden;
  padding: 0;
  margin: 0;
  margin-bottom: 1%;
}

.cat2-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--gap);
  will-change: transform;
  touch-action: pan-x;
  transform: translate3d(0, 0, 0);
}


.cat2-item {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  margin-right: 0px !important;
}

.cat2-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
 position: relative; /* Dodaj to */
    z-index: 10;  
}

.cat2-icon {
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.cat2-icon img {
  max-width: 70%;
  max-height: 70%;
}

.cat2-label {
  font-size: var(--label);
  line-height: 1.15;
  white-space: nowrap;
  text-align: center;
  margin-top: -15%;
}

.cat2-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding: 0 8px;
}

.cat2-nav {
 /* width: 63px;*/
  height: 36px;
  border: 0;
  background-color: #fff;
  /* border-radius: 50%; */
  color: var(--brand-blue);
  display: grid;
  /* place-items: center; */
  cursor: pointer;
  font-size: 60px;
  line-height: 36px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  pointer-events: auto;
  /* box-shadow: 0 2px 6px rgba(0, 0, 0, .25); */

}

.cat2-prev {
  left: 6px;
}

.cat2-next {
  right: 6px;
}

/* ≥768px: 6 items + bigger icons at ≥992px */
@media (min-width:768px) {
  .cat2 .cat2-item {
    flex: 0 0 auto;
  display: flex;
  justify-content: center;    
  }
}

@media (min-width:992px) {
  .cat2 {
    --size: clamp(86px, 8.2vw, 118px);
    --label: 14px;
  }
}

/* hide carousel nav & desktop banner on mobile */
@media (max-width:767px) {
  .cat2-nav {
    display: none;
  }
}

/* =========================
   BANNERS
   ========================= */
.banner-desktop {
  width: 100%;
  margin: 0;
  padding: 0;
}

.banner-desktop img {
  margin-top: 2%;
}

.desktop-only {
  display: flex;
  gap: 10px;
  margin: 10px 0;
}

.desktop-only .banner-item {
  flex: 1;
}

.desktop-only .banner-item img {
  width: 100%;
}

.three-banners-mobile {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 4px 0;
}

.three-banners-mobile .banner-item img {
  width: 100%;
}

/* shared three-banners grid */
.three-banners {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.three-banners>div,
.three-banners>a {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.stick-bottom {
  margin-top: auto;
}

.stick-bottom-center {
  margin-top: auto;
  margin-bottom: auto;
}

.stick-top {
  padding-top: 20px;
  font-weight: semi-bold;
}

/* responsive visibility */
@media (max-width:767px) {

  .banner-desktop,
  .desktop-only {
    display: none !important;
  }
}

@media (min-width:768px) {
  .mobile-only {
    display: none;
  }
}

/* =========================
   DECORATIVE
   ========================= */
.red-line {
  width: 70%;
  height: 4px;
  background-color: var(--brand-red-700);
  margin: 0% auto 5% auto;
  border-radius: 2px;
}

/* Instagram embed cleanup */
.eapps-instagram-feed-title {
  padding-top: 0 !important;
  display: none !important;
}

/* =========================
   SOCIAL
   ========================= */
.social-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-bottom: 4%;
}

.social-top img {
  max-width: 60px;
  max-height: 60px;
  width: 100%;
}

.social-bottom {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.social-bottom img {
  max-width: 50px !important;
  max-height: 50px;
  width: 100%;
}

/* =========================
   CARDS / BUTTONS
   ========================= */
.card {
  background-color: var(--brand-blue);
}

.card p {
  color: var(--surface);
  padding: 0%;
  /* font-weight: 800; */
}

/* unified buttons */
.btn {
  background-color: transparent;
  color: var(--surface);
  border: 2px solid var(--accent);
  padding: 6px 14px;
  border-radius: var(--r-xxl);
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .3s, color .3s, border-color .3s;
}

.btn:hover {
  background-color: var(--surface);
  color: var(--brand-blue);
}

.btn--solid {
  background-color: var(--brand-red);
  border-color: var(--brand-red);
}

.btn--solid:hover {
  background-color: var(--surface);
  color: var(--brand-red);
}

/* button groups */
.card-buttons {
  /* margin-top:var(--space-3); */
  display: flex;
  /* gap:10px; */
  justify-content: flex-end;
  margin-right: 15px;
  margin-bottom: 15px;
}

/* backwards compatibility for existing markup */
.btn-info,
.btn-red {
  all: unset;
}

.btn-info,
.btn-red {
  display: inline-block;
}

.btn-info {
  background-color: transparent !important;
  /* przezroczyste tło */
  /* color: white; */
  /* biały tekst */
  border: 2px solid var(--accent) !important;
  /* białe obramowanie */
  padding: 6px 14px;
  cursor: pointer;
  border-radius: 25px;
  /* mocno zaokrąglone */
  /* font-weight: bold; */
  text-decoration: none;
  /* usunięcie podkreślenia w linku */
  transition: background-color 0.3s, color 0.3s;
}

/* no-op trick to avoid breaking cascades */
.btn-info.btn,
.btn-red.btn {}

/* keep selector weight if you add both classes */

/* =========================
   POPUP / OVERLAY
   ========================= */
.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--brand-blue);
  color: var(--surface);
  padding: 30px;
  border-radius: 0;
  border: 3px solid var(--surface);
  width: 90%;
  max-width: 400px;
  box-sizing: border-box;
  z-index: 1000;
  box-shadow: var(--shadow-md);
}

.popup .close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  cursor: pointer;
  color: var(--surface);
  opacity: 1;
}

.popup p {
  color: var(--surface) !important;
}

.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 900;
}

/* Base button (już masz) */
.btn {
  margin: 8% 25%;
  display: inline-block !important;
  /* padding: 6px 12px; */
  margin-bottom: 8% !important;
  font-size: 14px !important;
  font-weight: normal !important;
  line-height: 1.42857143 !important;
  text-align: center !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  -ms-touch-action: manipulation !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  background-image: none !important;
  border: 1px solid #000 !important;
  border-radius: 0px !important;
}

/* Czerwony wariant (pełny) */
.btn--red {
  margin: 5% 30% 5% 30% !important;
  background-color: var(--brand-red) !important;
  border-color: var(--dark) !important;
  color: var(--surface) !important;
}

.btn--red:hover {
  background-color: var(--surface) !important;
  color: var(--brand-red) !important;
}

/* Section */
.why-us {
  background: var(--brand-red);
  /* czerwone tło sekcji */
  padding: 24px 0;
}

.why-us__container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

.why-us__title {
  color: var(--surface);
  font-weight: 500;
  font-size: 20px;
  margin: 0 0 12px 0;
  line-height: 30px;
  padding: 0% 5% 4% 0%;
}

/* Speech bubble card */
.speech-card {
  position: relative;
  background: var(--surface);
  ;
  color: var(--dark);
  border-radius: 0px;
  padding: 16px 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  max-width: 580px;
  /* na mobile i tak 100% */
}

/* trójkąt (dymek) – nad kartą */
.speech-card::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 38px;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 37px solid var(--surface);
}

/* Lista */
.speech-card__list {
  margin: 0;
  padding-left: 20px;
  line-height: 1.5;
  font-size: 15px;
  list-style: none;
  /* wyłączamy domyślne markery */
  padding-left: 10px;
}

.speech-card__list li {
  margin: 6px 0;
}

.speech-card__list li::before {
  content: "+";
  color: var(--brand-blue);
  font-weight: bold;
  display: inline-block;
  width: 16px;
  /* szerokość miejsca na znak */
  margin-right: 6px;
  /* odstęp od tekstu */
}

/* kolor punktorów */

@media (min-width:768px) {
  .why-us {
    padding: 36px 0;
  }

  .why-us__title {
    font-size: 22px;
    margin-bottom: 16px;
  }

  .speech-card {
    padding: 20px 22px;
  }
}

/* Card */
.info-card {
  background: var(--brand-blue, #1f416e);
  color: var(--surface);
  border-radius: 8px;
  padding: 22px 22px 26px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}



.info-card__subtitle {
  margin: 1% 0 5% 7%;
  opacity: .9;
  font-size: clamp(14px, 2.4vw, 16px);
  color: #AFAFAF;
}

.info-card__text {
  font-size: clamp(14px, 2.6vw, 16px);
  font-weight: 100 !important;
  padding: 0px 7% !important;
  line-height: 1.6;
}

/* Button (korzysta z Twojej bazy .btn – tu tworzę wariant „ghost”) */
.btn {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  font-weight: 700;
  border-radius: 999px;
  transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}

/* small size */
.btn--sm {
  padding: 6px 14px;
  font-size: 14px;
}

/* ghost on dark background */
.btn--ghost {
  color: var(--surface);
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}

.btn--ghost:hover {
  border-color: var(--surface);
  box-shadow: inset 0 0 0 1px var(--surface), 0 2px 10px rgba(0, 0, 0, .2);
}

/* opcjonalnie: wyrównanie przycisku do prawej jak na screenie */
.info-card .btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.info-card h3 {
  margin: 0 0 6px 0;
  font-weight: 800;
  font-size: clamp(18px, 2.8vw, 22px);
  line-height: 1.2;
  color: var(--surface);
  /* jasny, żeby był widoczny na niebieskim tle */
}

/* Global font – upewnij się, że plik fontu jest załadowany w <head> */
body {
  font-family: 'Nunito Sans', sans-serif !important;
}

/* Card */
.info-card {
  background: var(--brand-blue, #1f416e);
  color: var(--surface);
  border-radius: 8px;
  padding: 22px 22px 26px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
}

/* Title */
.info-card__title {
  padding: 9% 8% 0% 7% !important;
  margin: 0 0 6px 0;
  /* font-weight: 800; */
  font-size: clamp(18px, 2.8vw, 22px);
  line-height: 1.2;
  color: var(--surface);
}

/* Subtitle */



/* Tło sekcji */
.offer-box {
  background: var(--accent);
  /* żółte */
  padding: 24px 18px;
  /* border-radius: 4px; */
}



/* Dymek */
.speech-bubble {
  position: relative;
  border: 2px solid var(--brand-blue, #1f416e);
  border-radius: 4px;
  padding: 16px 18px 50px;
  /* miejsce na guzik na dole */
  background: var(--surface);
  color: var(--brand-blue, #1f416e);
  max-width: 100%;
}

/* „Ogonek” po prawej */
.speech-bubble::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: 28px;
  border-width: 12px;
  border-style: solid;
  border-color: transparent transparent transparent var(--brand-blue, #1f416e);
}

/* Tekst */
.speech-bubble p {
  margin: 0 0 14px 0;
  line-height: 1.5;
  font-size: 15px;
}

/* Guzik */
.speech-bubble .btn {
  display: inline-block;
  margin-top: auto;
}

/* Ghost button – jeśli nie masz jeszcze */
.btn {
  display: inline-block;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s;
}

.btn--ghost {
  color: var(--brand-blue, #1f416e);
  ;
  border: 1.5px solid var(--brand-blue, #1f416e);
  background: transparent;
}

.btn--ghost:hover {
  background: var(--brand-blue, #1f416e);
  color: var(--surface);
}

/* OFFER BOX (zostaje bez zmian) */
.offer-box {
  background: var(--accent);
  padding: 24px 18px;
  /* border-radius:4px; */
}

.offer-box__title {
  font-size: 15px !important;
  text-align: center;
  padding: 0px !important;
  font-weight: 700;
  font-size: clamp(14px, 2.6vw, 18px);
  color: var(--brand-blue) !important;
  text-transform: uppercase;
}

/* --- SPEECH BUBBLE (nowa, dopracowana wersja) --- */
.offer-box .speech-bubble {
  margin: 0% 5%;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 180px;
  /* opcjonalnie */
  /* gap:14px; */
  background: #fff;
  color: var(--brand-blue, #1f416e);
  border-radius: 0px !important;
  padding: 10px 7px 0px 7px;
  border-width: 4px;
}

/* ogonek: romb obrócony o 45deg – perfekcyjnie zlewa się z obramowaniem */
.offer-box .speech-bubble::after {
  content: "";
  position: absolute;
  right: -20px;
  /* wysunięcie ogonka */
  top: 50%;
  width: 37px;
  /* wielkość ogonka */
  height: 37px;
  transform: translateY(50%) rotate(-45deg);
  background: var(--surface);
  /* wypełnienie = kolor tła dymka */
  border: 4px solid var(--brand-blue, #1f416e);
  /* obrys = kolor ramki */
  box-shadow: 0 0 0 0 var(--surface);
  /* brak podwójnych krawędzi */
  border-left: none;
  /* zlewamy z ramką prawej krawędzi */
  border-top: none;
}

/* tekst wewnątrz – wymuszamy czytelność i brak „obcych” stylów */
.offer-box .speech-bubble p {
  margin: 19px 0px 0px 20px;
  padding: 11%;
  /* line-height:1.6; */
  font-size: 13px;
  color: var(--brand-blue, #1f416e);
  text-decoration: none;
  padding: 0 !important;
}

/* przycisk w prawym-dolnym rogu */
.offer-box .speech-bubble .btn {
  align-self: flex-end;
  /* dół-prawa w kolumnie */
  margin-top: auto;
  /* dopycha na dół */
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 999px;
  background: transparent;
  color: var(--brand-blue, #1f416e);
  border: 1.5px solid var(--brand-blue, #1f416e);
  text-decoration: none;
  transition: background-color .25s, color .25s, border-color .25s, box-shadow .25s;
}

.offer-box .speech-bubble .btn:hover {
  background: var(--brand-blue, #1f416e);
  color: var(--surface);
}

.red-but {
  color: var(--surface) !important;
  border: 2px solid var(--brand-red) !important;
  margin-top: 3%;
}

.color-but {
  color: var(--brand-blue, #1f416e) !important;
  margin-top: 5% !important;
}

.top-header .mobile-logos {
  margin: 1% 0% 0% 6%;
}

/* Overlay: pełnoekranowe wyszarzenie z fade i opcjonalnym blur */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, .6);
  /* ciemne wyszarzenie */
  -webkit-backdrop-filter: blur(2px);
  /* opcjonalny blur (Safari) */
  backdrop-filter: blur(2px);
  /* opcjonalny blur */
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 9998;
}

/* pokazany overlay */
.overlay.is-open {
  opacity: 1;
  pointer-events: auto;
  position: fixed;
  background: rgb(17 24 39 / 91%);
}

/* popup nad overlayem */
.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--brand-blue);
  color: var(--surface);
  padding: 30px;
  border: 3px solid var(--surface);
  width: 90%;
  max-width: 400px;
  box-sizing: border-box;
  z-index: 9999;
  box-shadow: var(--shadow-md);
}

.popup .close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  cursor: pointer;
}

.popup-card {
  padding: 5% 5%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin: 0px 0;
  overflow: hidden;
}

.popup-card-te {
  padding: 0% 2%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin: 0px 0;
  overflow: hidden;
}


.popup-card__img {
  width: 100%;
  /* border-radius: 8px 8px 0 0; */
  display: block;
}

.popup-card__content {
  padding: 10% 6%;
  font-size: 14px;
  color: #333;
}

.popup-card__content p {
  margin: 10px 0 10px;
  line-height: 1.4;
}

.card-buttons {
  text-align: right;
}

.btn-info {
  padding: 0px 16px;
  border: 1px solid var(--brand-blue, #1f416e);
  background: transparent;
  color: var(--brand-blue, #1f416e);
  border-radius: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.btn-info:hover {
  background: var(--brand-blue, #1f416e);
  color: #fff;
}


@media (max-width: 767px) {
  .cat2-viewport {
    margin-left: 0% !important;
    margin-right: 0% !important;  overflow: hidden;
  }

  .ontainer-st {
    padding: 0 20px;
  }


  .speech-bubble__text {
    padding: 4% !important;
  }

  .show-general-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* odstęp między kropkami */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
  }

  .show-general-nav .line {
    margin-bottom: 5% !important;
    width: 6px !important;
    /* szerokość kropki */
    height: 6px !important;
    /* wysokość kropki */
    border-radius: 50%;
    /* robi z kwadratu kółko */
    background-color: #333;
    /* kolor kropek */
  }

  .top-right-nav {
    margin-right: 6% !important;
  }

  .show-general-nav.active .line {
    margin: 0% !important;
    width: 30px !important;
    height: 3px !important;
    border-radius: 0%;
  }

  .active {
    display: block !important;
    padding-top: 50% !important;
  }

  .top-header .show-general-nav.active .line:nth-child(1) {
    transform: translateY(-8px) rotate(45deg) !important;
  }

  .top-header .show-general-nav.active .line:nth-child(3) {
    transform: translateY(-14px) rotate(-45deg) !important;
  }
}

details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

#blok {

  padding: 5%;
}

.toggle-btn {
  display: block;
  margin-left: auto;
  width: fit-content;
  cursor: pointer;
}

.about-page {
  margin-top: 71px;
}

.banner-text-blok {
  margin: 0px 8% 4% 8%;
}

.banner-text {
  font-size: 22px;
  color: var(--brand-red);
  margin-bottom: 7%;
  margin-top: 10%;
}

.about-page p {
  font-size: 16px;
  color: var(--brand-blue);
}

.tex-blue {
  color: var(--brand-blue);
  font-weight: 700;
}

.red-color-st {
  color: var(--brand-red);
  font-weight: 400;
}

.h3-size {
  margin-top: 7%;
  font-size: 18px;
  font-weight: 400;
  line-height: normal !important;
}

.img-center {
  margin: 10% auto;
}

.margin-nav {
  margin-top: 73px;
}

@media (min-width: 767px) {

.cte {
    margin-left: 70% !important;
    margin-right: 0% !important; 
    width: 30% !important;
    margin-bottom: 0% !important;

}

  .banner-text-blok {
    margin: 10px 10% 10% 10%;
  }

  .site-info p {
    font-size: 20px !important;
    line-height: 2 !important;
  }

  .site-info .banner-text {

    font-size: 28px;
  }

  .site-info .desktop-only {
    display: block;
  }

  .container-st {
    margin: 0 auto;
    max-width: 1140px;
    padding: 0;
  }

  .site-index .popup-card__content {
    padding: 3% 6%;
  }

  .card-buttons-center {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 20px auto;
    width: 100%;
  }

  .card-buttons-center::before,
  .card-buttons-center::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40%;
    /* długość linii */
    height: 2px;
    background: var(--brand-red);
  }

  .card-buttons-center::before {
    left: 0;
  }

  .card-buttons-center::after {
    right: 0;
  }

  .why-us {
    padding-left: 4%;
  }

  .video-box {
    flex: 1;
    min-width: 300px;
  }

  .video-box iframe {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
    /* automatyczne proporcje */
    border-radius: 8px;
  }

  .content-box {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 300px;
  }

  .banner-text-blok-my {
    width: 100%;
  }

  .banner-text-blok-my .speech-card {
    max-width: 505px;
  }

  .banner-item-t3 {
    flex: 1;
    /* wszystkie mają równą szerokość */
    display: flex;
    /* żeby treść wewnątrz była dobrze układana */
    flex-direction: column;
  }

  .banner-box-t3 {
    display: flex;
    gap: 10px;
    /* odstęp między elementami */
    align-items: stretch;
  }

  .img-mex {
    height: 100%;
  }

  .f-text {
    padding: 0% 17%;
    text-align: center;
    font-weight: 500;
    font-size: 22px !important;
  }

  .stick-bottom-fb {
    margin-top: 0%;
  }

  .stick-top-fb {
    padding: 7% 0% 7% 0% !important;
  }

  .bacground-fb {
    background: #D9D9D9;
    padding: 5% 0%;
  }

  .stick-bottom-fb .social-container {
    gap: 0px !important;
  }

  .img-dla {
    height: 100%;
  }

}

/* Dodane style do poprawy obsługi swipe na mobilu */

.cat2-viewport {
  overflow: hidden;
  touch-action: pan-x;
  /* pozwala na poziome gesty */
}

.cat2-track {
  touch-action: pan-x;
  /* już masz – zostaw */
  user-select: none;
  /* blokuje zaznaczanie */
  -webkit-user-drag: none;
  /* blokuje przeciąganie obrazków */
  -webkit-touch-callout: none;
  /* blokuje menu po przytrzymaniu na iOS */
  pointer-events: all;
  /* upewniamy się, że zdarzenia pointer są łapane */
}

#cat2 [data-track] {
  direction: ltr;
}

b, strong {
font-family: 'Nunito Sans', sans-serif !important;
}
.title b{
     font-weight: 100;
}
.cte{
    margin-left: 40% !important;
    margin-right: 10% !important;
    width: 50% !important;
    margin-bottom: 4%;
}
@media (min-width: 767px) {

.cte {
    margin-left: 70% !important;
    margin-right: 0% !important; 
    width: 30% !important;
    margin-bottom: 0% !important;

}

}