* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

html {
  max-width: 1920px;
  background-color: #f1f2f3;
}

/*wielkość fontu*/

h1 {
  font-size: clamp(2.5rem, 1.375rem + 5.625vw, 8.125rem);
  color: #222;
  line-height: 100%;
}

h2 {
  font-size: clamp(2.25rem, 1.7rem + 2.75vw, 5rem);
  font-weight: normal;
  line-height: 100%;
}
h3 {
  font-size: clamp(1.875rem, 1.45rem + 2.125vw, 4rem);
  font-weight: normal;
}

h4 {
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
  font-weight: normal;
}

p {
  font-size: clamp(1.125rem, 1.1125rem + 0.0625vw, 1.1875rem);
  font-weight: normal;
  line-height: 180%;
}

a {
  font-size: clamp(1.0625rem, 1.05rem + 0.0625vw, 1.125rem);
  font-weight: normal;
}

/*header*/
header {
  position: fixed;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 0.5px solid #a4a4a4;
  padding-bottom: 15px;
  top: 0;
  padding-top: 4dvh;
  padding-left: 4dvh;
  padding-right: 4dvh;
  background: #f1f2f3;
}

/*logo*/

header .logo {
  width: 100%;
  height: auto;
}

/*menu*/

header ul {
  position: relative;
}

header ul li {
  position: relative;
  list-style: none;
  float: left;
}

header ul li a {
  color: #222;
  padding: 20px 20px;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
}

header ul li a:hover {
  text-decoration: underline;
  text-underline-offset: 8px; /* Odsuwa linię o 5 pikseli w dół */
}

header ul li ul {
  position: absolute;
  left: 0;
  width: 100dvi;
  height: 20dvh;
  display: none;
}

header ul li:hover ul {
  display: block;
  background: #222;
}

ul .dziecko a {
  position: relative;
  color: #f1f2f3;
  display: block;
  background: #222;
  left: 0;
}

/* Kontener trzymający elementy w jednej linii */
.lang-switcher {
  padding-top: 5px;
  display: inline-flex; /* Układa elementy obok siebie w linii */
  align-items: center; /* Wyrównuje elementy idealnie w pionie */
  gap: 0px; /* Tworzy stały odstęp między PL a EN */
}

.lang-switcher a,
.lang-switcher span {
  text-decoration: none;
  color: #222;
  width: 50px; /* Stała szerokość dla idealnego koła */
  height: 50px; /* Stała wysokość dla idealnego koła */
  display: flex; /* Pozwala wyśrodkować tekst w kółku */
  justify-content: center; /* Środkuje tekst w poziomie */
  align-items: center; /* Środkuje tekst w pionie */
}

/* Styl dla kółka wokół aktywnego języka */
.lang-switcher .active {
  background-color: #222;
  color: white;
  border-radius: 50%; /* Tworzy idealne koło dzięki równej szerokości i wysokości */
}
/*haslo-h1*/

.haslo-h1 {
  padding-top: 28dvh;
  padding-left: 4dvh;
  padding-right: 4dvh;
}

/*haslo-h2*/
.haslo-h2 {
  margin-top: 8dvh;
  padding-top: 12dvh;
  padding-bottom: 12dvh;
  padding-left: 25%;
  background-color: #222;
  padding-right: 4dvh;
}

.haslo-h2 h2 {
  color: #f1f2f3;
}

/*produkty*/
.produkty {
  padding-top: 10dvh;
  padding-left: 4dvh;
  padding-right: 4dvh;
}
/*gwozdzie*/
.gwozdzie {
  border-top: 1px solid #a4a4a4;
}

/*nagolwek-grupa"*/
.nagolwek-grupa {
  padding-top: 10dvh;
  padding-left: 4dvh;
  display: flex;
  align-items: flex-start; /* Wyrównuje tekst nagłówków do tej samej linii bazowej */

  padding-bottom: 8dvh;
}

/*nagolwek-grupa"*/
.nagolwek-grupa a {
  color: #222;
  font-size: clamp(2.25rem, 1.7rem + 2.75vw, 5rem);
  font-weight: normal;
  display: inline-flex; /* Układa tekst i obrazek obok siebie */
  align-items: center; /* Wyrównuje tekst i obrazek idealnie w pionie */
  justify-content: space-between;
  width: 90%;
  padding-left: 2%;
}

/*nagolwek-grupa"*/
.nagolwek-grupa2 {
  padding-left: 4dvh;
  margin-top: 6dvh;
  padding-top: 6dvh;
  padding-bottom: 8dvh;
  margin-bottom: 10%;
  border-bottom: 1px solid #a4a4a4;
  display: flex;
  align-items: flex-start; /* Wyrównuje tekst nagłówków do tej samej linii bazowej */
}

/*nagolwek-grupa"*/
.nagolwek-grupa2 a {
  color: #222;
  font-size: clamp(2.25rem, 1.7rem + 2.75vw, 5rem);
  font-weight: normal;
  display: inline-flex; /* Układa tekst i obrazek obok siebie */
  align-items: center; /* Wyrównuje tekst i obrazek idealnie w pionie */
  justify-content: space-between;
  width: 90%;
  padding-left: 2%;
}

/*rodzaje-gw*/
.rodzaje-gw {
  margin-left: 25%;
  padding-top: 4dvh;
}

/*rodzaje-gw*/
.gw-papier {
  border-top: 1px solid #a4a4a4;
  padding-bottom: 6dvh;
  padding-top: 6dvh;
}
.rodzaje-gw a {
  display: inline-flex; /* Układa tekst i obrazek obok siebie */
  align-items: center; /* Wyrównuje tekst i obrazek idealnie w pionie */
  justify-content: space-between;
  width: 90%;
}

.gw-papier a {
  font-size: clamp(1.25rem, 0.9rem + 1.75vw, 3rem);
  font-weight: normal;
  text-decoration: none;
  color: #222;
}

/*gw-plastik*/
.gw-plastik {
  border-top: 1px solid #a4a4a4;
  padding-bottom: 6dvh;
  padding-top: 6dvh;
}

.gw-plastik a {
  font-size: clamp(1.25rem, 0.9rem + 1.75vw, 3rem);
  font-weight: normal;
  text-decoration: none;
  color: #222;
}

/*gw-drut*/
.gw-drut {
  border-top: 1px solid #a4a4a4;
  padding-bottom: 6dvh;
  padding-top: 6dvh;
}

.gw-drut a {
  font-size: clamp(1.25rem, 0.9rem + 1.75vw, 3rem);
  font-weight: normal;
  text-decoration: none;
  color: #222;
}

/*gw-luz*/
.gw-luz {
  border-top: 1px solid #a4a4a4;
  padding-bottom: 6dvh;
  padding-top: 6dvh;
}

.gw-luz a {
  font-size: clamp(1.25rem, 0.9rem + 1.75vw, 3rem);
  font-weight: normal;
  text-decoration: none;
  color: #222;
}

.rodzaje {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid #a4a4a4;
  border-left: 1px solid #a4a4a4;
  border-right: 1px solid #a4a4a4;
  border-bottom: 1px solid #a4a4a4;
  margin-top: 8dvh;
}

.rodzaje2 {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-left: 1px solid #a4a4a4;
  border-right: 1px solid #a4a4a4;
  border-bottom: 1px solid #a4a4a4;
}

.gwozdzie-papier {
  padding-top: 8dvh;
  padding-left: 4dvh;
}

.gwozdzie-papier a {
  color: #222;
}

.gwozdzie-papier img {
  padding-top: 15%;
  padding-bottom: 15%;
  width: 80%;
  height: auto;
}
.gwozdzie-plastik {
  padding-top: 8dvh;
  padding-left: 4dvh;
  border-left: 1px solid #a4a4a4;
  border-right: 1px solid #a4a4a4;
}

.gwozdzie-plastik a {
  color: #222;
}

.gwozdzie-plastik img {
  padding-top: 15%;
  padding-bottom: 15%;
  width: 80%;
  height: auto;
}

.gwozdzie-plastik2 {
  padding-top: 8dvh;
  padding-left: 4dvh;
  border-left: 1px solid #a4a4a4;
  border-right: 1px solid #a4a4a4;
}

.gwozdzie-papier .img-papier {
  padding-top: 8%;
  padding-bottom: 8%;
}

/*gwozdzie*/
.gwozdzie2 {
  padding-top: 10dvh;
  padding-left: 4dvh;
  padding-right: 4dvh;
  padding-bottom: 10dvh;
  background: #fff;
}

.rodzaje3 {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid #a4a4a4;
  border-left: 1px solid #a4a4a4;
  border-right: 1px solid #a4a4a4;
  border-bottom: 1px solid #a4a4a4;
}

/*gw-papierem*/

/*gwozdzie*/
.gw-papierowe {
  padding-top: 10dvh;
  padding-left: 4dvh;
  padding-right: 4dvh;
  padding-bottom: 10dvh;
  background: #fff;
}

.gw-papierowe-calosc {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid #a4a4a4;
  border-left: 1px solid #a4a4a4;
  border-right: 1px solid #a4a4a4;
  border-bottom: 1px solid #a4a4a4;
}

.gw-papierowe-img img {
  width: 100%;
  height: auto;
  padding: 8%;
}

.gw-papierowe-szkic {
  border-left: 1px solid #a4a4a4;
  border-right: 1px solid #a4a4a4;
}

.gw-papierowe-szkic img {
  width: 100%;
  height: auto;
  padding: 8%;
}

.gw-papierowe-img,
.gw-papierowe-szkic {
  display: flex;
  justify-content: center;
}

/*gwozdzie - papier - dane techniczne*/
.dane-techniczne {
  padding-top: 4%;
  padding-left: 4dvh;
  padding-right: 4dvh;
  padding-bottom: 10dvh;
  background: #fff;
}

.dane-techniczne p {
  color: #222;
}

.dane-techniczne p span {
  color: #666;
}

.dane-techniczne .tytul {
  padding-left: 25%;
}

.dane-techniczne .dane {
  padding-top: 5%;
  padding-left: 25%;
  display: block;
}

/* Tradycyjne i najpewniejsze podejście z użyciem szerokości dla tekstu: */
.dane p {
  display: flex;
}

.dane p {
  display: flex; /* Ustawia etykietę i span w jednej linii */
}

/* Styl dla tekstu etykiety (wszystko przed span) */
.dane p {
  /* Definiujemy stałą szerokość dla tekstu przed span, dzięki czemu każdy span zacznie się w tym samym miejscu */
  grid-template-columns: 30% 1fr;
  display: grid;
  gap: 20%;
}

.dane > div {
  padding: 4dvh 4dvh; /* Odstęp nad i pod poziomą linią */
  border-bottom: 1px solid #ccc; /* Pozioma linia pod każdym elementem */
}

/*początek*/
.poczatek {
  padding-top: 4%;
  padding-left: 4dvh;
  padding-right: 4dvh;
  padding-bottom: 10dvh;
  background: #fff;
}
.poczatek p {
  padding-top: 5%;
  padding-left: 25%;
}
/*zastosowanie*/

.zastosowanie {
  padding-top: 4%;
  padding-left: 4dvh;
  padding-right: 4dvh;
  padding-bottom: 10dvh;
  background: #fff;
}

.zastosowanie .tytul {
  padding-left: 25%;
}

.zastosowanie-dane {
  padding-top: 5%;
  padding-left: 25%;
}

/*zastosowanie*/

.karta-techniczna {
  padding-top: 4%;
  padding-left: 4dvh;
  padding-right: 4dvh;
  padding-bottom: 10dvh;
  background: #fff;
  padding-left: 25%;
}

.karta-techniczna .tytul {
  padding-bottom: 4dvh;
}

.pdf-button {
  font-size: 18px;
  background-color: #fff;
  color: #222; /* Biały kolor tekstu */
  padding: 14px 28px; /* Odstępy wewnątrz przycisku (góra/dół, lewo/prawo) */
  border: 1px solid #222; /* Usunięcie domyślnej ramki */
  border-radius: 25px; /* Zaokrąglenie rogów */
  cursor: pointer; /* Zmiana kursora na "rączkę" po najechaniu */
  transition: all 0.3s ease; /* Płynne przejście animacji */
}

.pdf-button:hover {
  background-color: #222;
  color: #f1f2f3; /* Biały kolor tekstu */
}

.pomoc {
  padding-left: 4dvh;
  padding-right: 4dvh;
  padding-bottom: 10dvh;
  background: #fff;

  margin-top: -5%;
}

.telefon a {
  color: #222;
  font-size: clamp(2.25rem, 1.7rem + 2.75vw, 5rem);
  font-weight: normal;
  line-height: 100%;
  padding-left: 25%;
}

.telefon a:hover {
  text-decoration: underline;
  text-underline-offset: 8px; /* Odsuwa linię o 5 pikseli w dół */
}

.telefon .mail {
  padding-top: 2%;
}

.zastosowanie-3 {
  margin-top: -5%;
  padding-left: 4dvh;
  padding-right: 4dvh;
  padding-bottom: 10dvh;
  background: #fff;
}

.zastosowanie .tytul {
  padding-left: 25%;
}

.img-magazyn {
  background: #fff;
  padding-left: 26%;
  padding-right: 10dvh;
  padding-bottom: 10%;
}

.img-magazyn img {
  width: 80%;
  height: auto;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
  /* Kontener trzymający elementy w jednej linii */
  .lang-switcher {
    padding-left: 15%;
    padding-bottom: 6dvh;
    gap: 15px; /* Tworzy stały odstęp między PL a EN */
  }

  .lang-switcher a,
  .lang-switcher span {
    text-decoration: none;
    color: #fff;
  }

  /* Styl dla kółka wokół aktywnego języka */
  .lang-switcher .active {
    background-color: #fff;
    color: #222;
  }
  /*haslo-h2*/
  .haslo-h2 {
    padding-left: 10%;
  }
  /*rodzaje-gw*/
  .rodzaje-gw {
    margin-left: 0;
    padding-top: 6dvh;
  }

  /* button - img*/

  .gw-papier img {
    padding-right: 0;
  }

  .gw-plastik img {
    padding-right: 0;
  }

  .gw-drut img {
    padding-right: 0;
  }

  .gw-luz img {
    padding-right: 0;
  }

  .dane {
    grid-template-columns: 1fr;
  }

  .zakres {
    padding-bottom: 6dvh;
  }

  .tytul p {
    padding-top: 6dvh;
  }

  .zakres4 {
    padding-bottom: 6dvh;
    padding-left: 0dvh;
    border-left: none;
  }

  .rodzaje {
    grid-template-columns: 1fr;
  }
  /*telefon*/
  .telefon a {
    padding-left: 0;
  }

  .rodzaje2 {
    grid-template-columns: 1fr;
  }

  .gwozdzie-plastik {
    border-top: 1px solid #a4a4a4;
    border-bottom: 1px solid #a4a4a4;
    border-left: none;
    border-right: none;
  }

  .gwozdzie-plastik2 {
    border-left: none;
    border-right: none;
  }

  .gwozdzie-papier .img-papier {
    padding-top: 15%;
    padding-bottom: 0;
    width: 80%;
    height: auto;
  }

  /*nagolwek-grupa"*/
  .nagolwek-grupa {
    padding-left: 0;
  }

  .nagolwek-grupa2 {
    padding-left: 0;
  }
  .nagolwek-grupa img {
    padding-right: 0;
  }

  .nagolwek-grupa2 img {
    padding-right: 0;
  }

  .gw-papierowe-calosc {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
  }

  .gw-papierowe-szkic {
    border-left: none;
    border-right: none;
    border-top: 1px solid #a4a4a4;
    border-bottom: 1px solid #a4a4a4;
  }

  /*poczatek*/
  .poczatek p {
    padding-left: 0%;
  }

  /*dane techniczne*/
  .dane-techniczne .tytul {
    padding-left: 0%;
  }

  .dane-techniczne .dane {
    padding-left: 0%;
  }

  /*zastosowanie*/

  .zastosowanie .tytul {
    padding-left: 0%;
  }

  .zastosowanie-dane {
    padding-left: 0%;
  }

  .karta-techniczna {
    padding-left: 4dvh;
  }

  .img-magazyn {
    margin-top: -5%;
    padding-left: 4dvh;
    padding-right: 4dvh;
  }
}

/* zamiana menu*/
@media (max-width: 1279px) {
  header {
    position: absolute;
  }

  header .menu {
    position: absolute;
    width: 100%;
    top: 110px;
    left: 0;
    background: #222;
    display: none;
    padding-top: 4dvh;
  }

  header ul li ul {
    position: absolute;
    left: 0;
    width: 100dvi;
    height: 20dvh;
  }

  header.active .menu {
    display: initial;
  }

  header nav ul li {
    width: 100%;
  }

  header nav ul li ul {
    position: relative;
    width: 100%;
  }

  header.active nav {
    display: initial;
  }

  header ul li a {
    color: #fff;
    font-size: 25px;
    padding-left: 15%;
    padding-bottom: 25px;
  }

  .jezyki {
    margin-left: 15%;
    background-color: #fff;
    margin-bottom: 10%;
  }

  nav ul .jezyki a {
    color: #222;
  }

  .menuToggle {
    position: relative;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .menuToggle::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background: #222;
    transform: translateY(-12px);
    box-shadow: 0 12px #222;
  }

  .menuToggle::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    background: #222;
    transform: translateY(12px);
  }

  header.active .menuToggle::before {
    transform: rotate(45deg);
    box-shadow: 0 0 #222;
  }

  header.active .menuToggle::after {
    transform: rotate(315deg);
  }
}

/*footer*/
.footer {
  background-color: #222;
}

.footer .haslo p {
  color: #fff;
  text-transform: uppercase;
  padding: 6dvh 4dvh;
  padding-bottom: 10dvh;
}
.footer .haslo h2 {
  color: #fff;
  border-bottom: 0.5px solid #fff;
  padding: 6dvh 4dvh;
  padding-bottom: 3dvh;
}

.fakty {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  color: #fff;
  padding-left: 6dvh;
}

/*zakres*/

.fakty .zakres {
  padding-bottom: 8dvh;
}

.tytul p {
  padding-top: 8dvh;
  text-transform: uppercase;
  padding-bottom: 2dvh;
}
a {
  color: #fff;
  text-decoration: none;
}
.tresc a {
  font-weight: normal;
  line-height: 180%;
}

.zakres2 .tytul p {
  padding-top: 10dvh;
}

.zakres4 {
  padding-top: 8dvh;
  display: flex; /* Ustawia obrazki w jednej linii */
  gap: 10%; /* Odstęp pomiędzy obrazkami */
  justify-content: left; /* Centruje obrazki na środku strony/kontenera */
  padding-left: 4dvh;
  border-left: 0.5px solid #fff;
}

/*akedo*/

.akedo {
  padding-top: 2dvh;
  padding-left: 6dvh;
  padding-bottom: 3dvh;
  color: #a4a4a4;
  border-top: 0.5px solid #ccc;
}

.akedo a {
  font-weight: 300;
  color: #a4a4a4;
}

.akedo p {
  font-weight: 300;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
  .fakty {
    grid-template-columns: 1fr;
  }
  .zakres {
    padding-bottom: 6dvh;
  }

  .tytul p {
    padding-top: 6dvh;
  }

  .zakres4 {
    padding-bottom: 6dvh;
    padding-left: 0dvh;
    border-left: none;
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  /* Kontener trzymający elementy w jednej linii */
  .lang-switcher {
    padding-left: 15%;
    padding-bottom: 6dvh;
    gap: 15px; /* Tworzy stały odstęp między PL a EN */
  }

  .lang-switcher a,
  .lang-switcher span {
    text-decoration: none;
    color: #fff;
  }

  /* Styl dla kółka wokół aktywnego języka */
  .lang-switcher .active {
    background-color: #fff;
    color: #222;
  }
}