/* Główny nagłówek strony z tłem gradientowym */
.pkp_structure_head {
  background: linear-gradient(to right, #4a86e8, #172b4d);
}

/* Wyśrodkowanie kontenera logo */
.pkp_site_name {
  text-align: center;
  width: 140px;
  margin: 0 auto;
}

/* Powiększenie i wyśrodkowanie samego obrazu logo */
.pkp_site_name .is_img img {
  transform: scale(2.5);
  margin: 0 auto;
  display: block;
  padding: 5px 0;
}

/* Usunięcie linii generowanej przez ::after dla .pkp_structure_main */
.pkp_structure_main::after {
  left: 0px;
  display: none !important;
}

/* Główna nawigacja - struktura i układ */
#navigationPrimary {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 0;
  margin: 15px auto;
  list-style: none;
  width: 100%;
  max-width: 800px;
}

/* Elementy głównej nawigacji */
#navigationPrimary > li {
  text-align: center;
  flex-basis: auto;
  flex-grow: 0;
  position: relative;
}

/* Elementy od 5. elementu w głównej nawigacji - inna szerokość */
#navigationPrimary > li:nth-child(n+5) {
  flex-basis: calc(33.33% - 14px);
}

/* Stylizacja linków w głównej nawigacji */
#navigationPrimary > li > a {
  font-family: 'Avenir', 'lato', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #e2cdb0; /* Piaskowy kolor tekstu */
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  white-space: pre-line; /* Pozwala na łamanie tekstu */
  line-height: 1.2;
}

/* Efekt hover dla linków w głównej nawigacji */
#navigationPrimary > li > a:hover {
  color: #FFD700; /* Złoty kolor przy najechaniu */
  transform: scale(3.0); /* Powiększenie x3 */
  z-index: 100; /* Aby powiększony element był nad innymi */
}

/* Responsywność dla mniejszych ekranów */
@media (max-width: 768px) {
  #navigationPrimary {
    flex-wrap: wrap;
  }

  #navigationPrimary > li {
    flex-basis: calc(33% - 15px);
    margin-bottom: 10px;
  }
}