/* Sekcja realizacji */
.projects-section {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
  }
  
  .projects-title {
    font-size: 2.5rem;
    color: #222;
    margin-bottom: 30px;
  }
  
  .projects-intro {
    font-size: 1.2rem;
    margin-bottom: 40px;
    color: #444;
  }
  
  /* Styl dla poszczególnych realizacji */
  .project-item {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* Wyrównanie wysokości obrazka i opisu */
    justify-content: flex-start;
    margin-bottom: 40px;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(255, 204, 0, 0.7);
    min-height: 500px; /* Zwiększenie minimalnej wysokości kontenera */
  }
  
  .project-image {
    width: 60%; /* Zwiększenie szerokości zdjęcia */
    height: auto; /* Automatyczna wysokość */
    margin-right: 30px; /* Większa przestrzeń między obrazkiem a opisem */
    border-radius: 10px;
    object-fit: cover; /* Dopasowanie obrazu do kontenera */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
  .project-description {
    max-width: 35%; /* Zmniejszenie szerokości opisu */
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Wyrównanie opisu w pionie */
  }
  
  .project-title {
    font-size: 1.8rem;
    color: #333;
    margin-bottom: 10px;
    text-align: center; /* Wyrównanie tekstu do środka */
  }
  
  .project-text {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: #444;
    text-align: center;
  }
  
  .view-gallery {
    padding: 10px 20px;
    background-color: #FFCC00;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s;
  }
  
  .view-gallery:hover {
    background-color: #e42929;
    color: white;
  }

/* Styl dla modala */
.gallery-modal {
  display: none; /* Modal jest domyślnie ukryty */
  position: fixed; /* Ustawiamy modal w pozycji stałej na ekranie */
  z-index: 1000; /* Ustawiamy modal na wierzchu innych elementów */
  left: 0; /* Pozycjonowanie od lewej krawędzi */
  top: 0; /* Pozycjonowanie od górnej krawędzi */
  width: 100%; /* Modal zajmuje całą szerokość ekranu */
  height: 100%; /* Modal zajmuje całą wysokość ekranu */
  background-color: rgba(0, 0, 0, 0.8); /* Przezroczyste ciemne tło dla modala */
  justify-content: center; /* Wyrównanie zawartości w poziomie */
  align-items: center; /* Wyrównanie zawartości w pionie */
}

.gallery-content {
  position: relative; /* Pozycjonowanie względne dla zawartości modala */
  background-color: #fff; /* Białe tło dla zawartości modala */
  padding: 20px; /* Padding wewnętrzny dla zawartości */
  border-radius: 10px; /* Zaokrąglone rogi */
  max-width: 90%; /* Maksymalna szerokość kontenera (90% ekranu) */
  max-height: 90%; /* Maksymalna wysokość kontenera (90% ekranu) */
  display: flex; /* Flexbox do wyśrodkowania obrazka */
  justify-content: center; /* Wyśrodkowanie zawartości w poziomie */
  align-items: center; /* Wyśrodkowanie zawartości w pionie */
}

#gallery-image {
  max-width: 100%; /* Obrazek nie może przekroczyć szerokości kontenera */
  max-height: 70vh; /* Obrazek nie może przekroczyć 70% wysokości ekranu */
  display: block; /* Wyświetlanie obrazka jako blok */
}

/* Styl dla nawigacji strzałek */
.gallery-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0; /* Pełna szerokość kontenera */
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%); /* Wyśrodkowanie w pionie */
  padding: 0 20px; /* Odstępy po bokach */
}


.gallery-prev,
.gallery-next {
  background-color: rgba(0, 0, 0, 0.5); /* Ciemne tło dla przycisków strzałek */
  color: white; /* Biały kolor strzałek */
  font-size: 30px; /* Duży rozmiar czcionki strzałek */
  border: none; /* Brak obramowania dla przycisków */
  cursor: pointer; /* Kursor w postaci ręki podczas najeżdżania */
  padding: 10px; /* Padding dla przycisków */
  border-radius: 5px; /* Zaokrąglone rogi przycisków */
}



/* Styl po najechaniu na strzałki */
.gallery-prev:hover,
.gallery-next:hover {
  background-color: rgba(0, 0, 0, 0.7); /* Ciemniejsze tło przycisków podczas najeżdżania */
}

/* Styl dla przycisku zamknięcia */
.close-gallery {
  position: absolute; /* Pozycjonowanie przycisku zamknięcia względem kontenera modala */
  top: 0px; /* Odstęp od góry */
  right: 10px; /* Odstęp od prawej krawędzi */
  color: black; /* Kolor dla przycisku zamknięcia */
  font-size: 50px; /* Duży rozmiar czcionki */
  cursor: pointer; /* Kursor w postaci ręki podczas najeżdżania */
}

/* Styl po najechaniu na przycisk zamknięcia */
.close-gallery:hover {
  color: red; /* Zmiana koloru na czerwony podczas najeżdżania */
}



  
  /* Responsywność */
  @media (max-width: 768px) {
    .project-item {
      flex-direction: column;
      text-align: center;
    }
  
    .project-image {
      width: 100%; /* Ustawienie pełnej szerokości zdjęcia na mniejszych ekranach */
      height: auto; /* Dostosowanie wysokości w zależności od proporcji zdjęcia */
      margin-right: 0;
      margin-bottom: 20px;
    }
  
    .project-description {
      max-width: 100%; /* Zwiększenie szerokości opisu w wersji mobilnej */
    }
  }