* {
  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;
  display: block;
}

/*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;
}

.haslo-h2 .znacznik {
  padding-top: 8dvh;
  display: flex;
}

.haslo-h2 .znacznik a {
  color: #f1f2f3;
  text-transform: uppercase;
  text-decoration: none;
}

.znacznik-bialy {
  padding-left: 10px;
}

/*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;
  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;
}

/*parallax*/

.parallax {
  margin-top: 12dvh;
  background-image: url(image/parallax.jpg);
  height: 100vh;
  background-attachment: fixed;
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
}

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

.zalety {
  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;
}

.zalety2 {
  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;
}

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

.magazyn-img {
  padding-top: 30%;
  padding-left: 60%;
  padding-bottom: 10%;
  width: 80%;
  height: auto;
}
.transport {
  padding-top: 8dvh;
  padding-left: 4dvh;
  border-left: 1px solid #a4a4a4;
  border-right: 1px solid #a4a4a4;
}

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

@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;
  }

  ul .dziecko a {
    left: 10dvh;
    font-weight: 300;
  }
  /*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;
  }

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

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

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

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

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

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

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

@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;
  }
}

/* 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;
  }

  .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;
}

a {
  color: #fff;
  text-decoration: none;
}

.hasla p {
  padding: 6dvh 4dvh;
  text-transform: uppercase;
  padding-bottom: 10dvh;
  color: #fff;
}

.hasla h2 {
  padding: 6dvh 4dvh;
  border-bottom: 0.5px solid #fff;
  padding-bottom: 3dvh;
  color: #fff;
}

.dane {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  color: #fff;
  border-bottom: 0.5px solid #fff;
  padding-left: 6dvh;
}
/*zakres*/

.zakres {
  padding-bottom: 8dvh;
}
.tytul p {
  padding-top: 8dvh;
  text-transform: uppercase;
  padding-bottom: 2dvh;
}

.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;
}

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

.akedo p {
  font-weight: 300;
}

@media screen and (min-width: 320px) and (max-width: 767px) {
  .dane {
    grid-template-columns: 1fr;
  }

  .zakres {
    padding-bottom: 6dvh;
  }

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

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