<style>

  /* Styl dla kontenera głównej zawartości */
  .content {
    display: flex;
    align-items: flex-start;
    margin-top: 120px;
  }

  /* Styl dla tekstowej części w kontenerze */
  .text-content {
    margin-left: 20px;
  }

  /* Styl dla sekcji kontaktowej */
  .contact {
    text-align: center;
    margin-top: 50px;
    padding: 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
  }

  .contact a {
    color: #007bff;
    text-decoration: none;
  }

  .contact a:hover {
    text-decoration: underline;
  }

  /* Styl dla navbar */
  .navbar {
    position: relative !important;
    z-index: 1000 !important;
    color: white;
  }

  /* Styl dla menu rozwijanego */
  .dropdown-menu {
    position: absolute !important;
    z-index: 1050 !important;
    color: white;
  }

  .dropdown-item {
    color: white;
  }
  .nav-link{
    color: white;
  }
  .nav-link active{
    color: white;
  }
  .offcanvas-title{
    color: yellow;
  }

  /* Tło dla całego ciała strony */
  body { 
    background-color: rgb(37, 37, 37); 
    color: white;
    font-size: 18px;
  }

  /* Styl dla miniatur w karuzeli */
  .thumbnail-carousel {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
  }

  /* Styl dla kontenera galerii */
  .gallery-container {
    height: 50vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* Styl dla pełnego obrazu w modalu */
  .full-image {
    width: 100%;
    height: 100vh;
    object-fit: contain;
  }

  /* Styl dla modalu */
  .modal-fullscreen {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.9);
  }


/* Kontener dla obrazu powitalnego */
.responsive-img-container {
  width: 100%;
  height: 60vh; /* Ustalamy wysokość kontenera na 50% wysokości ekranu */
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;

}

/* Obraz powitalny */
.responsive-img-container img {
  width: 100%;
  height: 100%; /* Ustalamy wysokość na 100% kontenera */
  object-fit: cover; /* Dopasowanie obrazu do kontenera bez zniekształcania */
  opacity: 0.5; /* <= przezroczystość, zmień np. na 0.6 dla większego efektu */
}

  /* Styl dla nagłówka powitalnego */
  .welcome-header {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
    text-align: center;
  }
  /* Na mniejszych ekranach (telefony) zmniejszamy czcionkę i padding */
@media (max-width: 576px) {
  .welcome-header {
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
  }
}

  /* Styl dla cytatu */
  .welcome-quote {
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
    text-align: center;
  }

  .welcome-quote p {
    font-family: 'Georgia', serif;
    font-size: 0.9rem;
    font-style: italic;
    color: white;
    margin: 0;
  }

  /* Tekst powitalny */
  .welcome-text {
    position: absolute;
    color: white;
    font-size: 2em;
    text-align: center;
    z-index: 1;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  }

  .additional-info {
  display: flex;
  justify-content: center; /* wyśrodkowanie w poziomie */
  align-items: center;     /* wyśrodkowanie w pionie, jeśli jest potrzeba */
  gap: 50px;               /* równe odstępy między ikonami */
  width: 100%;
  color: yellow;
  margin-top: 20px;
  margin-bottom: 20px;
}

.additional-info .info-item {
  display: flex;
  gap: 50px; /* odstęp między linkami */
}
.info-title{
  margin-top: 30px;
   color: yellow;
}

.additional-info .info-item a {
  font-size: 30px;        /* rozmiar ikon */
  text-decoration: none;
  transition: transform 0.3s ease, color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.additional-info .info-item a:hover {
  color: #ffd700;        /* jaśniejszy żółty na hover */
  transform: scale(1.2);
}

  /* Linki w sekcji */
  .additional-info a {
    color: white;
    text-decoration: none;
    font-weight: bold;
  }

  .additional-info a:hover {
    text-decoration: underline;
  }
      /* Styl dla komunikatu o cookies */
    #cookie-banner {
      display: none; /* Domyślnie ukryte */
      position: fixed;
      bottom: 0;
      width: 100%;
      background-color: #333;
      color: white;
      text-align: center;
      padding: 15px;
      font-size: 14px;
    }
    #cookie-banner button {
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
      margin-left: 15px;
    }

            .custom-hover:hover {
              background-color: #ffc107 !important;
              /* Bootstrapowa żółć */
              color: #000 !important;
            }
      
            .custom-hover:hover i {
              color: #000 !important;
              /* Ikona też na czarno */
            }
  .custom-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center; /* Wyśrodkowanie w poziomie */
  padding: 10px;
}

.gallery-item {
  flex: 0 1 auto;
  position: relative;
}

.img-thumb {
  height: 180px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.3s, opacity 0.3s;
}

.gallery-item:nth-child(n+2):not(:last-child) .img-thumb {
  opacity: 0.7;
  transform: scale(0.95);
}

.gallery-item:hover .img-thumb {
  transform: scale(1.05);
  opacity: 1;
}

/* 📱 Responsywność dla telefonów */
@media (max-width: 768px) {
  .img-thumb {
    height: auto;
    width: 90vw; /* prawie cała szerokość ekranu */
  }
}
</style>
