:root {
  --green-color: #00ff00;
  --black-color: #424242;
  --white-color: #ffffff;
}

body {
  background-color: var(--black-color);
  color: var(--white-color);
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}
header {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: end;
  justify-content: space-around;
}
.logo {
  width: 30%;
}
.logo img {
  width: 100%;
}
.desktop {
  width: 50%;
}
.desktop ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  list-style-type: none;
  display: flex;
  padding: 0;
  margin: 0;
}
.desktop ul li a {
  font-size: 1.3em;
  text-decoration: none;
  color: var(--white-color);
  transition: letter-spacing 0.3s ease;
}
.desktop ul li a:hover {
  letter-spacing: 5px;
}
.desktop ul li::first-letter {
  color: var(--green-color);
}

.social {
  font-size: 1.3em;
  color: var(--green-color);
}
.social ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  flex-direction: row;
}
.social a {
  color: var(--green-color);
}
.hamburger {
  display: none;
}
.hidden {
  display: none;
}
.line {
  margin: 10px auto 30px;
  width: 80%;
  height: 2px;
  background-image: linear-gradient(
    to right,
    var(--green-color),
    var(--white-color),
    var(--green-color)
  );
}
h1 {
  text-align: center;
}
.first-letter {
  color: var(--green-color);
}
.first-word {
  font-size: 140%;
  font-weight: 800;
}
main {
  width: 90%;
  margin: auto;
}
.shortinfo {
  font-size: 130%;
  text-align: center;
  width: 65%;
  min-width: 250px;
  margin: auto;
  padding: 20px 10px;
  border: dashed 1px var(--green-color);
  border-radius: 15px;
}
#home h2 {
  width: 100%;
}
#home {
  display: flex;
  flex-wrap: wrap;
}
#home article {
  width: 50%;
}
#home .photo {
  margin-right: 5%;
  width: 45%;
  border-radius: 5%;
}
.photo img {
  width: 100%;
}
.icon-list {
  list-style: none; /* Usunięcie domyślnego znacznika listy */
  padding-left: 0; /* Usunięcie domyślnego odstępu */
}

.icon-list li {
  position: relative; /* Umożliwia umieszczenie obrazu przed tekstem */
  padding-left: 30px; /* Dodatkowa przestrzeń na obrazek */
  margin-bottom: 15px;
}

.icon-list li::before {
  content: "";
  background-image: url("img/check.png"); /* Ścieżka do twojego obrazka */
  background-size: 20px 20px; /* Dostosowanie rozmiaru obrazka */
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  width: 20px; /* Szerokość obrazka */
  height: 20px; /* Wysokość obrazka */
}
.contact ul {
  padding: 0;
  list-style-type: none;
}
.contact ul li {
  margin-bottom: 15px;
}
.contact a {
  text-decoration: none;
  color: var(--white-color);
}
.contact i {
  color: var(--green-color);
}
.maps {
  width: 90%;
  margin: auto;
}
iframe {
  margin: auto;
  width: 100%;
}
footer {
  margin-top: 20px;
  padding-top: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  border-top: 1px solid var(--green-color);
}
footer a {
  text-decoration: none;
  color: var(--white-color);
}
/* Styl przycisku powrotu do góry strony */
.back-to-top {
  position: fixed;
  bottom: 20px; /* Odległość od dolnej krawędzi */
  right: 20px; /* Odległość od prawej krawędzi */
  width: 30px;
  height: 30px;
  background-color: var(--green-color); /* Zielony kolor tła */
  color: var(--white-color); /* Kolor strzałki */
  border: none;
  border-radius: 50%; /* Okrągły przycisk */
  font-size: 1.4em; /* Wielkość strzałki */
  cursor: pointer;
  display: none; /* Ukryty na starcie */
  transform: rotate(-90deg);
  justify-content: center;
  align-items: center;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  z-index: 100; /* Przycisk zawsze nad innymi elementami */
}

.back-to-top:hover {
  background-color: var(--white-color); /* Zmiana tła na hover */
  color: var(--green-color); /* Zmiana koloru strzałki na hover */
}

.back-to-top.show {
  display: flex; /* Pokaż przycisk */
}
.photo-slider {
  position: relative;
  height: 350px;
  overflow: hidden;
}

.photo-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* transition: transform 1s ease-in-out;*/
  transition:
    transform 1s ease-in-out,
    opacity 1s ease-in-out;
  transform-origin: center bottom;
}

.photo-slider img.active {
  z-index: 2;
  transform: translateY(0);
}

.photo-slider img.next {
  z-index: 1;
  transform: translateY(0);
}

.photo-slider img.hide-down {
  /* transform: translateY(100%);*/
  transform: translateY(100%) scaleY(0.7);
  opacity: 0;
}
/* .photo-slider {
  position: relative;
  width: 100%;
  max-width: 900px;
  height: 400px;
  overflow: hidden;
  border-radius: 10px;
}

.photo-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateY(0);
  transition:
    transform 1s ease,
    opacity 1s ease;
  opacity: 0;
}

.photo-slider img.active {
  opacity: 1;
  transform: translateY(0);
  z-index: 2;
}

.photo-slider img.hide-down {
  transform: translateY(100%);
  opacity: 0;
  z-index: 1;
} */

@media (max-width: 750px) {
  .desktop {
    display: none;
  }
  .hamburger {
    width: 25px; /* Szerokość całego hamburgera */
    height: 20px; /* Wysokość całego hamburgera */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Równomierne rozłożenie linii */
    cursor: pointer; /* Zmienia kursor na wskaźnik (kliknięcie) */
  }

  .ham-line {
    width: 100%;
    height: 4px; /* Grubość linii */
    background-color: var(--green-color); /* Kolor linii */
    border-radius: 2px; /* Lekko zaokrąglone krawędzie */
  }

  .ham-line.line1,
  .ham-line.line2,
  .ham-line.line3 {
    transition:
      transform 0.3s ease,
      opacity 0.3s ease; /* Płynne animacje dla efektów */
  }
  .mobile {
    width: 100%;
    height: 60vh;
  }

  .mobile ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    height: 100%;
  }
  .mobile ul li {
    height: 33%;
    border-bottom: 1px solid var(--green-color);
  }
  .mobile ul li a {
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Link zajmuje całą szerokość */
    height: 100%; /* Link zajmuje całą wysokość */
    text-align: center; /* Tekst w linku wyśrodkowany */
    color: var(--white-color); /* Kolor tekstu linku */
    text-decoration: none; /* Usuń podkreślenie */
  }
  #home .photo {
    width: 100%;
    margin: 0;
  }
  #home article {
    width: 100%;
  }
}