@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap');








body {
    background-color: #1A1A1A;
    color: white;
    /* font-family poprzednie usunięte */ font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

nav {
    margin-top: 20px; /* Obniżenie menu nawigacyjnego */
    background-color: black;
    padding: 20px 0;
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center;
    z-index: 1000; /* Czarny pasek nawigacyjny zawsze nad białą belką */
}

main {
    padding-top: 80px; /* Przesunięcie głównej treści w dół */
    flex: 1;
   
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: 600; /* Tekst zawsze pogrubiony */
    transition: color 0.3s ease-in-out;
}

nav ul li a:hover {
    color: #257c94;
} /* Usunięcie efektu pogrubienia przy hoverze */

footer {
    margin-bottom: 20px; /* Podniesienie stopki */
    background-color: #1A1A1A;
    padding: 10px 0;
    text-align: center;
    position: relative;
    width: 100%;
    bottom: 0;
}

/* RESPONSYWNOŚĆ */
@media screen and (max-width: 768px) {
    nav ul {
        flex-direction: column;
        align-items: center;
    }

    nav ul li {
        display: block;
        text-align: center;
        padding: 10px 0;
    }

    main {
        padding-top: 210px;
    }

    .container {
        width: 90%;
        margin: 0 auto;
    }

    .main-content {
        flex-direction: column;
        gap: 10px;
    }

    .main-content .section {
        width: 100%;
    }
}
.black-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px; /* Możesz dostosować wysokość */
    background-color: black;
    z-index: 1000; /* Upewnia się, że jest nad wszystkim */
}

html {
    overflow-y: scroll;
}

body {
    position: relative;
}


/* Stylizacja hamburger menu */
.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 1100;
    position: fixed;
    top: 15px;
    right: 25px;
    width: 30px;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 5px;
}

.menu-toggle .bar {
    background-color: white;
    height: 3px;
    width: 22px;
    margin: 1px 0;
    border-radius: 3px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    position: absolute;
}


/* Animacja zmiany hamburgera w 'X' */
.menu-toggle .bar:nth-child(1) {
    transform: translateY(-7px);
}

.menu-toggle .bar:nth-child(3) {
    transform: translateY(7px);
}

.menu-toggle.active .bar:nth-child(1) {
    transform: translateY(0) rotate(45deg);
}

.menu-toggle.active .bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active .bar:nth-child(3) {
    transform: translateY(0) rotate(-45deg);
}
/* Ukrywanie standardowego menu na małych ekranach */
@media screen and (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.95);
        text-align: center;
        justify-content: center;
        align-items: center;
        transition: opacity 0.3s ease-in-out;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        margin: 15px 0;
    }

    .nav-links li a {
        font-size: 22px;
        padding: 15px;
        display: block;
        color: white;
        text-decoration: none;
        font-weight: bold;
        transition: color 0.3s ease-in-out;
    }

    .nav-links li a:hover {
        color: #d21111;
    }
}

.menu-toggle {
    display: none; /* Ukrywamy domyślnie */
}

/* Pokaż hamburgera tylko na ekranach do 768px */
@media screen and (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }
}

@media screen and (max-width: 768px) {
    .main-content { 
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 80vh; /* Ustawiamy wysokość sekcji na 80% ekranu */
        padding-top: 50px; /* Dodajemy odstęp od góry */
    }

    .footer {
        position: relative;
        bottom: 0;
        width: 100%;
    }
}

/* RESPONSYWNOŚĆ */
@media screen and (max-width: 768px) {
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    main {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Ustawienie tak jak w portfolio */
        align-items: center;
        padding-top: 80px; /* Ustawienie wysokości jak w portfolio */
    }

    footer {
        margin-top: auto;
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .nav-links {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 60px; /* Menu zaczyna się dokładnie pod paskiem nawigacyjnym */
        left: 0;
        width: 100%;
        height: calc(100% - 60px); /* Pełna wysokość ekranu minus pasek */
        background-color: #1a1a1a; /* Pełne szare tło */
        text-align: center;
        justify-content: center;
        align-items: center;
        padding: 20px 0;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: transform 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s;
    }

    .nav-links.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-links li {
        margin: 15px 0;
    }

    .nav-links li a {
        font-size: 22px;
        padding: 15px;
        display: block;
        color: white;
        text-decoration: none;
        font-weight: bold;
    }

    .nav-links li a:hover {
        color: #0e3a48;
    }
}

.page-title {
    font-size: 20px;
    font-weight: bold;
    color: white;
    position: absolute;
    left: 20px; /* Dostosuj w razie potrzeby */
    top: 50%;
    transform: translateY(-50%);
    display: none; /* Domyślnie ukryte na komputerach */
}

/* Pokaż tytuł tylko na urządzeniach mobilnych */
@media screen and (max-width: 768px) {
    .page-title {
        display: block;
    }
}

@media screen and (max-width: 768px) {
    .nav-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        height: 50px;
        position: fixed;
        top: 0;
        width: 100%;
        background: black;
        z-index: 1000;
    }

    .page-title {
        display: block;
        font-size: 18px;
        font-weight: bold;
        color: white;
        margin-left: 10px; /* Odsunięcie od lewej krawędzi */
    }

    .menu-toggle {
        position: absolute;
        right: 35px; /* Zapewnienie, że ikona hamburgera pozostaje po prawej */
        top: 50%;
        transform: translateY(-50%);
    }
}


@media screen and (max-width: 768px) {
    .nav-links {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 60px; /* Podniesienie menu wyżej */
        left: 0;
        width: 100%;
        height: calc(100% - 50px);
        background-color: #1a1a1a;
        text-align: center;
        justify-content: flex-start; /* Ustawienie treści wyżej */
        padding-top: 100px; /* Mniejszy odstęp od góry */
    }

    .nav-links li {
        margin: 5px 0; /* Zmniejszenie odstępu między elementami */
    }

    .nav-links li a {
        font-size: 18px; /* Możesz dostosować */
        padding: 5px; /* Mniejszy padding, by były bliżej siebie */
    }
}


.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    max-width: 3400px;
    margin: auto;
}

.gallery a {
    display: block;
    width: calc(33% - 10px); /* 3 kolumny na dużych ekranach */
}

.gallery-item {
    width: 100%;
    height: auto;
    
}



/* 🌍 RESPONSYWNOŚĆ */
@media (max-width: 2560px) {
    .gallery a {
        width: calc(33% - 10px); /* 2 kolumny na tabletach */
    }
}



@media (max-width: 1700px) {
    .gallery a {
        width: calc(50% - 10px); /* 2 kolumny na tabletach */
    }
}

@media (max-width: 1200px) {
    .gallery a {
        width: 100%; /* 1 kolumna na telefonach */
    }
}


@media (max-width: 1200px) {
    .gallery {
        padding: 0 10px; /* Zmniejsza boczne marginesy */
    }
}


@media screen and (max-width: 555px) {
    footer {
        text-align: center;
        font-size: 14px; /* Mozesz dostosowac rozmiar */
        line-height: 1.4; /* Poprawia czytelnosc */
        white-space: pre-line; /* Pozwala na lamanie tekstu */
    }
}

@media screen and (max-width: 430px) {
    footer {
        text-align: center;
        font-size: 12px; /* Mozesz dostosowac rozmiar */
        line-height: 1.4; /* Poprawia czytelnosc */
        white-space: pre-line; /* Pozwala na lamanie tekstu */
    }
}

@media screen and (max-width: 1200px) and (min-width: 555px) {
    footer {
        margin-top: 40px; /* Przesuwa footer nizej */
       
    }
}


nav {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Cienka, lekko przezroczysta kreska */
}

nav {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Cien pod menu */
}

.gallery a {
    position: relative;
    display: block;
    overflow: hidden;
}

.gallery-item {
    width: 100%;
    height: auto;
    display: block;
    transition: filter 0.4s ease-in-out; /* Plynna animacja */
}

/* Przyciemnienie zdjecia po najechaniu */
.gallery a:hover .gallery-item {
    filter: brightness(45%);
	 transition-delay: 0.07s; /* Opoznienie efektu */
}

/* Tekst na srodku zdjecia */
.gallery a .overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 18px;
    font-weight: normal; /* Usuwamy pogrubienie */
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    pointer-events: none;
}

/* Efekt hovera � pokazanie napisu */
.gallery a:hover .overlay-text {
    opacity: 1;
}

.gallery a {
    position: relative;
    display: block;
    overflow: hidden;
}

/* Efekt przyciemnienia zdjecia */
.gallery a img {
    width: 100%;
    height: auto;
    display: block;
    transition: filter 0.1s ease-in-out;
}

.gallery a:hover img {
    filter: brightness(45%);
}

/* Stylizacja napisu */
.gallery a .overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8); /* Domyslnie lekko pomniejszony */
    color: white;
    font-size: 28px;
    font-weight: normal; /* Brak pogrubienia */
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Plynna animacja */
    pointer-events: none;
}

/* Efekt hovera � plynne przyciemnienie zdjecia + napis */
.gallery a:hover img {
    filter: brightness(45%);
}

.gallery a:hover .overlay-text {
    opacity: 1; /* Napis plynnie sie pojawia */
    transform: translate(-50%, -50%) scale(1); /* Plynne powiekszenie napisu */
	/* Pojawianie sie napisu dopiero po zatrzymaniu kursora */
    transition-delay: 0.07s; /* Opoznienie efektu */

}


a {
    color: inherit; /* Linki beda mialy taki sam kolor jak reszta tekstu */
    text-decoration: none; /* Usuwa podkreslenie */
}

a:hover {
    opacity: 0.8; /* Lekki efekt po najechaniu */
}


.full-image {
    display: block;
    max-width: 65vw; /* Zdjecie bedzie miec maksymalnie szerokosc ekranu */
    height: auto; /* Zachowanie proporcji */
    margin: 0 auto; /* Wycentrowanie */
    object-fit: cover; /* Dopasowanie bez znieksztalcenia */
}

main {
    margin-top: 20px; /* Dodaje odstep od nawigacji */
}

.full-image {
    display: block;
    width: 1200px; /* Domyslny rozmiar dla duzych ekranow */
    max-width: 100%; /* Zapobiega wychodzeniu poza ekran */
    height: auto; /* Zachowuje proporcje */
    margin: 0 auto; /* Wycentrowanie */
}

nav a {
  color: white;
  text-decoration: none;
}

nav a:hover {
  color: #19a2d0; /* blekitny */
}

nav a.active {
  color: #19a2d0; /* aktywny link */
}



/* KONTENER Z MAKSYMALNA SZEROKOSCIA DO 2560px */
.media-wrapper {
  max-width: 2560px;
  margin: 0 auto;
  padding: 0 60px; /* odstep od lewej i prawej kraw?dzi */
  box-sizing: border-box;
}

/* SEKCJA Z PLAYEREM I ZDJECIAMI */
.media-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 200px; /* odstep miedzy playerem a zdjeciami */
  margin-top: 40px;
}

/* PLAYER */
#player-container {
  flex: 1;
  aspect-ratio: 16 / 9;
  position: relative;
}

#player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 30px;
}

/* ZDJECIA */
.photo-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-end;
}

.side-photo {
  width: 74%;
  max-width: 900px; /* Większe zdjęcia na ekranach 4K */
  object-fit: cover;
  transition: max-width 0.5s ease, margin-right 0.5s ease; /* Płynna zmiana rozmiaru i marginesów */
}

.photo-top {
  margin-right: 35px;
}

.photo-bottom {
  margin-right: 90px;
}


/* TABLETY I TELEFONY */
@media (max-width: 1024px) {
  .media-section {
    flex-direction: column;
    align-items: center;
    gap: 80px;
    
  }

  #player-container,
  .photo-column {
    width: 100%;
    max-width: 100%;
  }

  .photo-column {
    align-items: center;
  }

  .side-photo {
    max-width: 90%;
    margin-right: 0 !important;
  }
}

/* TELEFONY */
@media (max-width: 768px) {
  .media-wrapper {
    padding: 0 0px;
  }

  .side-photo {
    max-width: 100%;
  }
}

@media (min-width: 1600px) {
  .photo-top {
    margin-right: calc(35px + (150 - 50) * ((100vw - 1600px) / (2560 - 1600)));
  }

  .photo-bottom {
    margin-right: calc(90px + (300 - 150) * ((100vw - 1600px) / (2560 - 1600)));
  }
}


@media (min-width: 1024px) {
  .media-wrapper {
    margin-bottom: 60px;
  }
}

@media (min-width: 1600px) {
  .media-wrapper {
    margin-bottom: 100px;
  }
}


/* Dropdown Menu */
.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 20px);
  left: 0;
  background-color: white;
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 350px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  z-index: 999; /* Ustaw niższy z-index niż czarne menu */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  z-index: 999; /* Widoczna nad innymi elementami */
}

.dropdown-menu.hide {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px); /* Przesunięcie w dół podczas znikania */
  z-index: 998; /* Chowa się pod czarnym menu */
}

.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu li a {
  display: block;
  padding: 10px 15px;
  color: black;
  text-decoration: none;
}

.dropdown-menu li a:hover {
  background-color: #f0f0f0;
}



@media (max-width: 768px) {
  .dropdown {
    position: relative;
  }

  .dropdown-menu {
    position: static;
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px); /* Startowe przesunięcie w górę */
    transition: opacity 0.3s ease, transform 0.3s ease;
    background-color: #fff;
    padding-left: 15px;
  }

  .dropdown.open .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Płynne przesunięcie na miejsce */
  }

  .dropdown.close .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px); /* Płynne przesunięcie w górę przy zamykaniu */
  }

  .dropdown-menu li a {
    padding: 10px 0;
  }
}

@media (max-width: 768px) {
  .dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}


 /* Stylizacja dla ekranów 4K */
@media (min-width: 2850px) {
    .media-wrapper {
      max-width: 90%; /* Zmniejszenie szerokości kontenera, aby nie zajmował całego ekranu */
      margin: 0 auto;
    }
  
    .media-section {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 200px; /* Większy odstęp między odtwarzaczem a zdjęciami */
    }
  
    #player-container {
      flex: 1;
      aspect-ratio: 16 / 9;
      max-width: 1440px; /* Ograniczenie maksymalnej szerokości odtwarzacza */
      margin: 0 auto;
      margin-top: 120px;
    }
  
    .photo-column {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 50px; /* Większy odstęp między zdjęciami */
      align-items: flex-end;
    }
  
    .side-photo {
      width: 100%;
      max-width: 1000px; /* Większe zdjęcia na ekranach 4K */
      object-fit: cover;
      transition: max-width 0.5s ease, margin-right 0.5s ease; /* Płynna zmiana rozmiaru i marginesów */
    }
  
    .photo-top {
      margin-right: 300px; /* Większy odstęp od prawej krawędzi */
      margin-top: 80px;
    }
  
    .photo-bottom {
      margin-right: 400px; /* Większy odstęp od prawej krawędzi */
    }
  }


 /* Dla ekranów o szerokości poniżej 768px */
@media (max-width: 768px) {
  .media-section {
    flex-direction: column; /* Układ pionowy */
    align-items: center;
    gap: 20px; /* Odstęp między elementami */
  }

  #player-container {
    width: 100%; /* Player zajmuje całą szerokość */
    max-width: 100%; /* Zapobiega wychodzeniu poza ekran */
  }

  .photo-column {
    width: 100%; /* Zdjęcia zajmują całą szerokość */
    align-items: center; /* Wyśrodkowanie zdjęć */
  }

  .side-photo {
    width: 100%; /* Zdjęcia dopasowują się do szerokości playera */
    max-width: 100%; /* Zapobiega wychodzeniu poza ekran */
    margin-right: 0; /* Usunięcie marginesów */
  }
}


/* Dla ekranów o szerokości poniżej 1024px */
@media (max-width: 1024px) {
  .media-section {
    flex-direction: column; /* Układ pionowy */
    align-items: center;
    gap: 40px; /* Odstęp między elementami */
  }

  #player-container {
    width: 100%; /* Player zajmuje całą szerokość */
    max-width: 90%; /* Zapobiega wychodzeniu poza ekran */
  }

  .photo-column {
    width: 100%; /* Zdjęcia zajmują całą szerokość */
    align-items: center; /* Wyśrodkowanie zdjęć */
  }

  .side-photo {
    width: 100%; /* Zdjęcia dopasowują się do szerokości playera */
    max-width: 90%; /* Zapobiega wychodzeniu poza ekran */
    margin-right: 0; /* Usunięcie marginesów */
  }
}


@media (min-width: 2850px) {
  .media-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 300px; /* Większy odstęp między odtwarzaczem a zdjęciami */
    margin-top: 40px;
  }

  #player-container {
    flex: 1;
    aspect-ratio: 16 / 9;
    max-width: 1800px; /* Większy odtwarzacz */
    margin: 0 auto;
    margin-top: 150px;
  }

  .photo-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 50px; /* Odstęp między zdjęciami */
    align-items: flex-end;
  }

  .side-photo {
    width: 100%;
    max-width: 900px; /* Większe zdjęcia */
    object-fit: cover;
    transition: max-width 0.5s ease, margin-right 0.5s ease;
  }

  .photo-top {
    margin-right: 150px; /* Minimalny odstęp od prawej krawędzi */
    margin-top: 80px;
  }

  .photo-bottom {
    margin-right: 200px; /* Minimalny odstęp od prawej krawędzi */
  }
}

@media (min-width: 3325px) {
  .side-photo {
    max-width: 1100px; /* Większe zdjęcia */
    transition: max-width 0.5s ease, margin-right 0.5s ease; /* Płynna zmiana rozmiaru */
  }

  .photo-top {
    margin-right: 200px; /* Większy odstęp od prawej krawędzi */
    margin-top: 100px; /* Większy odstęp od góry */
  }

  .photo-bottom {
    margin-right: 250px; /* Większy odstęp od prawej krawędzi */
  }

  #player-container {
    max-width: 2000px; /* Powiększenie odtwarzacza */
  }

  .media-section {
    gap: 350px; /* Większy odstęp między odtwarzaczem a zdjęciami */
  }
}


@media (max-width: 768px) {
  .photo-column {
    gap: 20px; /* Ustawienie odstępu między zdjęciami */
  }

  .photo-top {
    margin-bottom: 20px; /* Taki sam odstęp jak między playerem a pierwszym zdjęciem */
  }
}

@media (max-width: 768px) {
  .media-section {
    flex-direction: column; /* Układ pionowy */
    align-items: center;
    gap: 20px; /* Odstęp między playerem a pierwszym zdjęciem */
  }

  .photo-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* Taki sam odstęp między zdjęciami */
  }

  .photo-top {
    margin-bottom: 0; /* Usunięcie dodatkowych marginesów */
  }

  .side-photo {
    width: 100%; /* Zdjęcia zajmują całą szerokość */
    max-width: 100%; /* Zapobiega wychodzeniu poza ekran */
    margin-right: 0; /* Usunięcie marginesów */
  }
}


@media (max-width: 768px) {
  /* Dostosowanie padding-top tylko dla wybranych stron */
  body.home-page main,
  body.portfolio-page main,
  body.portfolio-videos-page main,
  body.about-page main,
  body.services-page main,
  body.contact-page main {
      padding-top: 30px; /* Zmniejszenie odstępu od góry */
  }
}


@media (max-width: 768px) {
  /* Ukrycie menu rozwijanego na początku */
  .dropdown-menu {
    position: static;
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px); /* Startowe przesunięcie w górę */
    transition: opacity 0.3s ease, transform 0.3s ease;
    background-color: #fff;
    padding-left: 15px;
  }

  /* Pokazanie menu z animacją */
  .dropdown.open .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Płynne przesunięcie na miejsce */
  }

  /* Ukrycie menu przy zamykaniu */
  .dropdown.close .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px); /* Płynne przesunięcie w górę przy zamykaniu */
  }

  .dropdown-menu li a {
    padding: 10px 0;
  }
}

@media (max-width: 768px) {
  body.project-page nav {
    padding: 2px 0 !important;
    height: 28px !important;
    min-height: 0 !important;
  }
  body.project-page nav .back-button {
    font-size: 13px;
    padding: 3px 10px;
    line-height: 1;
  }
}

@media (max-width: 768px) {
  body.home-page h1 {
    margin-bottom: 8px;
  }
  body.home-page p {
    margin-top: 0;
  }
}