/* Domyślne style miniatur */
#thumbnail-slider .splide__slide {
  opacity: 0.7;
  border: none;
  transition: opacity 0.3s;
  margin-top: 15px;
  border-radius: 20px;
  overflow: hidden; /* Zapewnia, że zawartość też przyjmie zaokrąglone rogi */
  text-align: center;
}

#thumbnail-slider .splide__slide img {
margin-bottom: 20px;
}

/* Aktywna miniatura */
#thumbnail-slider .splide__slide.is-active {
  opacity: 1;
}

#thumbnail-slider  .splide__slide {
    background-size: cover; /* Obrazek wypełnia cały slajd */
    background-position: center; /* Obrazek jest wyśrodkowany */
    width: 32% !important;
    height: 120px !important; /* Możesz dostosować wysokość slajdu */
}


/* Zaokrąglenie rogów głównych slajdów */
#main-slider .splide__slide,
#main-slider .splide__slide img {
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 20px;
}

.gallery-container{
    padding:30px;
}

/* Upewnij się, że główny kontener slidera ma relative */
#main-slider {
  position: relative;
}

#main-slider .splide__slide{ 
  text-align: center;
}

#main-slider .splide__slide img {
margin: 50px;
}

#main-slider  .splide__slide {
    background-size: cover; /* Obrazek wypełnia cały slajd */
    background-position: center; /* Obrazek jest wyśrodkowany */
    width: 100% !important;
    height: 400px !important; /* Możesz dostosować wysokość slajdu */
}

/* Ogólne style dla niestandardowych przycisków */
.custom-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent; /* brak tła */
  border: none;
  cursor: pointer;
  outline: none;
  /* Zapobieganie efektom :hover, :focus oraz :active */
}

.custom-arrow:hover,
.custom-arrow:focus,
.custom-arrow:active {
  background: transparent;
}

/* Pozycjonowanie przycisku Prev: wysunięty na zewnątrz od lewej */
.custom-prev {
  left: -50px; /* ujemna wartość – dostosuj wg potrzeb */
}

/* Pozycjonowanie przycisku Next: wysunięty na zewnątrz od prawej */
.custom-next {
  right: -50px; /* ujemna wartość – dostosuj wg potrzeb */
}

/* Dodatkowe style – opcjonalne: wielkość przycisków, marginesy */
.custom-arrow svg {
  display: block;
}