.cmp-icon-title-desc {
    text-decoration: none;
    color: var(--bs-body-color);
    padding: .5rem;
}

.cmp-icon-title-desc:hover {
    background-color: var(--bs-secondary-bg);
    border-radius: .5rem;
}

.cmp-icon-title-desc .icon {
    aspect-ratio: 1/1;
    height: 3rem;
    background-color: var(--bs-primary);
    border-radius: .5rem;
}

.cmp-icon-title-desc .icon svg path {
    fill: white;
}















/* kontener karuzeli */
.cmp-carousel {
  position: relative;
  overflow: hidden;
}

/* slajdy */
.cmp-carousel-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
}

/* aktywny slajd: robi się "normalny", żeby kontener miał wysokość treści */
.cmp-carousel-item.is-active {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

/* indicators (kropki) */
.cmp-carousel-indicators[data-cmp-carousel] {
  display: flex;
  gap: .5rem;
  align-items: center;
}

.cmp-carousel-indicator {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  cursor: pointer;
  background-color: hsla(var(--text-c-muted-2) / .35);
  border: 1px solid hsla(var(--border-c-1) / .85);
}

.cmp-carousel-indicator.is-active {
  background-color: hsla(var(--text-c-emphasis) / .65);
  border-color: hsla(var(--border-c-2) / .9);
}

.cmp-carousel-controls {
  background: transparent;
  border: 1px solid hsla(var(--border-c-1) / .85);
  color: hsla(var(--border-c-1) / .85);
  height: 30px;
  width: 30px;
  border-radius: 50px;
  padding: 0px;

}

@media (max-width: 992px) {

.cmp-main-page-hero {
  padding-top: 96px;
}

}


.cmp-section {
  padding-block: 144px;
}

.cmp-first-section {
  padding-top: 192px;
}

@media (max-width: 992px) {
  .cmp-section {
    padding-block: 48px;
  }

  .cmp-first-section {
    padding-top: 128px;
  }
}





.cmp-width-1 {
  width: 1rem;
}

.cmp-width-2 {
  width: 2rem;
}

.cmp-width-3 {
  width: 3rem;
}





.cmp-table thead tr th:nth-child(2){
  border-inline: 2px solid hsl(var(--primary-500));
  border-top: 2px solid hsl(var(--primary-500));
}

.cmp-table tbody tr td:nth-child(2){
  border-inline: 2px solid hsl(var(--primary-500));
}

.cmp-table tbody tr:last-child td:nth-child(2){
  border-inline: 2px solid hsl(var(--primary-500));
  border-bottom: 2px solid hsl(var(--primary-500));
  border-radius: 20px !important;
}







.cmp-icon {
  width: 3rem;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cmp-icon svg{
  width: 50% !important;
  height: 50% !important;
}

.cmp-icon svg path{
  fill: hsl(var(--primary-500));
}

.fill-primary {
  fill: hsl(var(--primary-500));
}

.fajna-ikonka {
  fill: hsl(var(--primary-200));
}





.cmp-link-span span{
  display: inline-block;
  transition: transform .25s ease;
}

.cmp-link-span:hover span {
  transform: translateX(6px);
}










.cmp-hero {
  position: relative;
  overflow: hidden;
}

.cmp-hero .cmp-image {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cmp-hero .cmp-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.cmp-hero .cmp-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0,0,0,0.88);
}

.cmp-hero .cmp-content {
  position: relative;
  z-index: 3;
}

.cmp-hero-hover .cmp-overlay {
 background: rgba(0,0,0,0.0);
 transition: .5s;
}

.cmp-hero-hover .cmp-content {
  opacity: 0;
  transition: .5s;
}

.cmp-hero-hover:hover .cmp-overlay {
  background: rgba(0,0,0,0.8);
}

.cmp-hero-hover:hover .cmp-content {
  opacity: 1;
}





.cmp-ratio-16-9 {
  aspect-ratio: 16/9;
}



.cmp-bg-gradient {
  background-image: linear-gradient(90deg, 
  hsla(var(--primary-500) / 0.7) 0%,
  hsla(var(--primary-700) / 0.7) 50%,
  hsla(var(--primary-100) / 0.7) 100%);
  background-repeat: no-repeat;
}

.cmp-bg-gradient-2 {
background: radial-gradient(100% 225% at 100% 0%, #FF0000 0%, #000000 100%), linear-gradient(236deg, #00C2FF 0%, #000000 100%), linear-gradient(135deg, #CDFFEB 0%, #CDFFEB 36%, #009F9D 36%, #009F9D 60%, #07456F 60%, #07456F 67%, #0F0A3C 67%, #0F0A3C 100%);
background-blend-mode: overlay, hard-light, normal;
}






.cmp-main-page-h1 {
  padding-top: 150px;
}

@media (max-width: 992px) {
  .cmp-main-page-h1 {
  padding-top: 120px;
}
}




/* =========================
   UNIVERSAL KEN BURNS (10s)
   ========================= */

/* 1) Klasa na WRAPPER (zalecane)
   - ucina zoom (overflow)
   - ustawia kontekst pozycjonowania dla tła/obrazka */
.cmp-kenburns {
  position: relative;
  overflow: hidden;
}

/* Jeśli wrapper ma nie mieć wysokości (np. samo <img>),
   to ustawiasz wysokość po stronie layoutu (np. ratio/height). */

/* 2) Jeśli wewnątrz jest <img> lub <picture><img> */
.cmp-kenburns > img,
.cmp-kenburns picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translate3d(0,0,0) scale(1);
  will-change: transform;
  animation: cmpKenBurns 10s ease-in-out both;
}

/* 3) Jeśli chcesz tło na divie: daj dziecku klasę cmp-kenburns-bg */
.cmp-kenburns .cmp-kenburns-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: translate3d(0,0,0) scale(1);
  will-change: transform;
  animation: cmpKenBurns 10s ease-in-out both;
}

/* 4) Jeśli dasz klasę bezpośrednio na IMG (bez wrappera)
   - będzie zoom/pan, ale bez "ucinania" (bo img nie ucina siebie) */
img.cmp-kenburns {
  transform: translate3d(0,0,0) scale(1);
  will-change: transform;
  animation: cmpKenBurns 10s ease-in-out both;
}

/* Animacja */
@keyframes cmpKenBurns {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-2.5%, -2%, 0) scale(1.12); }
}

/* Dostępność */
@media (prefers-reduced-motion: reduce) {
  .cmp-kenburns > img,
  .cmp-kenburns picture > img,
  .cmp-kenburns .cmp-kenburns-bg,
  img.cmp-kenburns {
    animation: none !important;
    transform: none !important;
  }
}