@font-face {
  font-family: 'Bangers';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/dist/font/Bangers-Regular.woff2') format('woff2');
}



h3, li, #inne {
  font-family: 'Andika';
  font-size: clamp(22px, 4.3vw, 44px);
  line-height: clamp(20px, 4.1vw, 40px);
}

h3 {
  text-align: center;
}

li, #inne {
  text-align: left;
  font-weight: bold;
}
  
/* Main content */


.content.produkty {
  display: flex;
  max-height: 700px;
  min-height: 350px;
  height: 70vh;
  justify-content: space-between;
  padding-top: 30svh;
  align-items: start;
}

.content.Gdzie_kupic {
  justify-content: space-between;
  padding-top: 4svh;
  align-items: start;
}

.content.zniknij {
  display: none;
}

.content.pokaz {
  display: flex;
}


.text-white {
  text-transform: uppercase;
  color: white;
  text-align: center;
  font-family: 'Amatic SC';
    font-size: 6vw;
    line-height: 1;
  font-weight: 700;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

.text-white-left {
  text-transform: uppercase;
  color: white;
  text-align: left;
  font-family: 'Amatic SC';
  font-size: clamp(27px, 5.625vw, 54px);
  max-width: 100%;
  min-width: 50%;
  width: 100vw;
  float: left;
  line-height: clamp(27px, 5.625vw, 54px);
  font-weight: 700;
  margin-bottom: 0;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
}

.text-white-big {
  text-transform: uppercase;
  color: white;
  text-align: left;
  font-family: 'Amatic SC';
  font-size: clamp(50px, 10.42vw, 100px);
  max-width: 100%;
  min-width: 50%;
  width: auto;
  float: left;
  line-height: clamp(40px, 8.33vw, 80px);
  font-weight: 700;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  margin-top: 30px;
}





.text-white-nagroda {
  text-transform: uppercase;
  color: white;
  text-align: center;
  font-family: 'Amatic SC';
  font-size: clamp(50px, 10vw, 100px);
  line-height: clamp(45px, 9vw, 90px);
  font-weight: 700;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
  margin: 0;
}

.header-black {
  color: black;
  font-family: 'Amatic SC';
  font-size: clamp(50px, 10vw, 100px);
  text-align: left;
  max-width: 100%;
  min-width: 320px;
  width: 100vw;
  line-height: clamp(45px, 9vw, 90px);
  font-weight: 600;
}




.header-black-nomargin {
  margin: 0;
  color: black;
  font-family: 'Amatic SC';
  font-size: clamp(50px, 10vw, 100px);
  text-align: left;
  max-width: 100%;
  min-width: 320px;
  width: 100vw;
  line-height: clamp(45px, 9vw, 90px);
  font-weight: 600;
}


#Zwyciezca {
  background-image: url("/dist/img/front/4/pomarancz.webp");
  background-size: contain;
  background-repeat: no-repeat;
  padding: clamp(50px, 10vw, 100px);
  padding-left: clamp(75px, 15vw, 150px);
  padding-top: clamp(65px, 13vw, 130px);
  text-align: left;
}

#change>button {
  background-color: transparent;
  border: none;
  color: #fff800;
  font-size: clamp(30px, 6vw, 60px);
  cursor: pointer;
  -webkit-text-stroke: clamp(4.5px, 0.9vw, 9px) black;
  paint-order: stroke fill;
}

#change>p {
  margin: 0 clamp(25px, 5vw, 50px);
}

/* Winner Styles */
.Zwyciezcy {
  background-image: url("/dist/img/front/4/splash_small.webp");
  background-size: contain;
  background-repeat: no-repeat;
  padding-left: clamp(25px, 5vw, 50px);
  padding-top: clamp(7px, 1.5vw, 15px);
  padding-bottom: clamp(5px, 1vw, 10px);
  max-width: 200px;
  min-width: 100px;
  width: 20vw;
  color: black;
  font-family: 'Amatic SC';
  font-size: clamp(17.5px, 3.5vw, 35px);
  text-align: left;
  font-weight: 700;
}

/* Contest Section */
.ktowygral {
  max-width: 80%;
  min-width: 40%;
  width: 80vw;
}

.ktowygral>.black-small {
  text-align: right;
  float: right;
  margin-top: clamp(-40px, -8vw, -80px);
}

.black-small {
  color: black;
  font-family: 'Amatic SC';
  font-size: clamp(17.5px, 3.5vw, 35px);
  font-weight: 700;
}


.winner_kom {
  font-size: clamp(15px, 3vw, 30px);
  max-width: 100%;
  min-width: 300px;
  width: 100%;
  max-height: 120px;
  min-height: 60px;
  height: 12vh;
  pointer-events: none;
  margin: 0;
}

.black-small-page {
  max-width: 15px;
  min-width: 7.5px;
  width: 1.5vw;
  max-height: 20px;
  min-height: 10px;
  height: 2vh;
  border-radius: 25px;
  color: black;
  padding: clamp(2.5px, 0.5vw, 5px) clamp(7.5px, 1.5vw, 15px) clamp(7.5px, 1.5vw, 15px) clamp(7.5px, 1.5vw, 15px);
  font-weight: bold;
  font-size: clamp(10px, 2vw, 20px);
}

.black-small-page.first {
  background-color: white;
}

.black-small-page.second {
  background-color: #fff800;
}

.ktowygral_strona, 
.dwa-zdj {
  max-width: 50px;
  min-width: 25px;
  width: 5vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ktowygral_strona {
  max-width: 150px;
  min-width: 75px;
  width: 15vw;
  justify-content: space-between;
}

.dwa-zdj {
  max-width: 100%;
  min-width: 320px;
  width: 100vw;
  height: auto;
  margin-top: clamp(75px, 15vh, 150px);
}

.dwa-zdj>img {
  height: 50%;
}

#pytanka {
  max-width: 60%;
  min-width: 30%;
  width: 60vw;
  margin-top: clamp(75px, 15vh, 150px);
}

#faq {
  max-width: 40%;
  min-width: 20%;
  width: 40vw;
}

.header-black.hasla {
  margin-left: clamp(10%, 20%, 20%);
  margin-bottom: clamp(50px, 10vh, 100px);
  margin-top: clamp(50px, 10vh, 100px);
}

#ankieta {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: clamp(10%, 20%, 20%);
  max-width: 100%;
  min-width: 320px;
  width: 100vw;
  margin: 0;
}

#ankieta>button {
  background-color: transparent;
  border: none;
  color: #fff800;
  font-size: clamp(30px, 6vw, 60px);
  cursor: pointer;
  -webkit-text-stroke: clamp(4.5px, 0.9vw, 9px) black;
  paint-order: stroke fill;
}

#ankieta>img {
  max-width: 500px;
  min-width: 250px;
  width: 50vw;
}

#newsletter {
  display: flex;
  justify-content: right;
  align-items: center;
  margin-top: 0;
  max-height: 500px;
  min-height: 250px;
  height: 50vw;
  margin-bottom: clamp(50px, 10vh, 100px);
}

#newsletter>div {
  margin-top: clamp(75px, 15vh, 150px);
  margin-bottom: clamp(15px, 3vh, 30px);
}

#newsletter>div>h3 {
  text-align: left;
  margin-top: clamp(40px, 8vh, 80px);
  padding-top: clamp(50px, 10vh, 100px);
}

#splash_napis {
  max-width: 40%;
  min-width: 20%;
  width: 40vw;
}




#newsletter_email {
  max-width: 400px;
  min-width: 200px;
  width: 40vw;
  justify-self: right;
}

#organizator {
  margin: clamp(25px, 5vh, 50px) 0 0 0;
}

#dolacz {
  max-width: 250px;
  min-width: 125px;
  width: 25vw;
  max-height: 55px;
  min-height: 27.5px;
  height: 5.5vv ;
}

#footer {
  display: flex;
  justify-content: space-between;
  max-width: 100%;
  min-width: 320px;
  width: 100vw;
  max-height: 150px;
  min-height: 75px;
  height: 15vh;
  align-items: end;
  margin-top: clamp(10px, 2vh, 20px);
}

#cepelin {
  display: flex;
  justify-content: right;
  margin-top: clamp(35px, 7vh, 70px);
}

#footer>img {
  margin-top: clamp(25px, 5vh, 50px);
  max-height: 100px;
  min-height: 50px;
  height: 10vh;
}

#cepelin>img {
  max-height: 80px;
  min-height: 40px;
  height: 8vh;
}

#produkty {
  margin-top: clamp(60px, 12vh, 120px);
  max-height: 34svh;
  min-height: 17svh;
  height: 34svh;
}

#footer-produkty {
  max-height: 20svh;
  min-height: 10svh;
  height: 20svh;
}

#produkty>img, 
#gdzie>img {
  max-width: 40%;
  min-width: 20%;
  width: 40vw;
}

button {
  cursor: pointer;
}

#wymienna_grafika {
  max-width: 100%;
  min-width: 320px;
  width: 100vw;
  max-height: 400px;
  min-height: 200px;
  height: 40vh;
  background-color: #f23a3a;
  border-radius: clamp(15px, 3vw, 30px);
  display: flex;
  align-items: center;
}

#wymienna_grafika>p {
  max-width: 100%;
  min-width: 320px;
  width: 100vw;
  text-align: center;
  font-size: clamp(30px, 6vw, 60px);
  font-family: "Andika";
  line-height: clamp(30px, 6vw, 60px);
  font-weight: 700;
}

#twoje_zgloszenie {
  max-width: 600px;
  min-width: 300px;
  width: 60vw;
  height: auto;
}

#zamykanie {
  cursor: pointer;
}

#zrobprezent {
  max-height: 150px;
  min-height: 75px;
  height: 15vh;
  width: auto;
}

.text-yellow {
  color: #fff800;
  font-family: 'Bangers';
  -webkit-text-stroke: clamp(4.5px, 0.9vw, 9px) black;
  paint-order: stroke fill;
  font-size: 7vw;
}

.yellow-button, 
#dolacz {
   background-color: yellow;
      width: fit-content;
      border: none;
      border-radius: 13px;
      padding-inline: 3.5%;
      padding-block: 0.5%;
      cursor: pointer;
      text-decoration: none;
      color: black;
      font-family: 'Amatic SC';
      text-align: center;
      letter-spacing: 0.15rem;
      font-weight: 700;
      text-shadow: 0px 1px, 1px 0px, 1px 1px;
}



#dolacz {
  max-width: 350px;
  min-width: 175px;
  width: 35vw;
  font-size: clamp(22.5px, 4.5vw, 45px);
}

.yellow-button.zglaszam {
  max-width: 450px;
  min-width: 225px;
  width: 45vw;
  margin-top: clamp(40px, 8vh, 80px);
}


#strzalka-teksty {
  display: flex;
  max-width: 100%;
  min-width: 320px;
  width: 100vw;
  justify-content: center;
  align-items: center;
}





#miesiac-text, 
#paragon {
  display: flex;
  justify-content: left;
  max-width: 100%;
  min-width: 320px;
  width: 100vw;
  align-items: start;
}
#paragon>h3{
  width: 20 vw;
  max-width: 500px;
  min-width: 200px;
}


#miesiac-text>img {
  max-width: 90px;
  min-width: 75px;
  width: 8vw;
  height: auto;
  margin-top: clamp(20px, 4vw, 0px);
}


#miesiac-text>p {
  margin-top: clamp(5px, 1vh, 10px);

  margin-bottom: clamp(10px, 2vh, 20px);
}




#change>p {
  text-align: center;
}


#biezaco {
  font-family: 'Amatic SC';
  font-weight: bold;
  font-size: clamp(30px, 6vw, 60px);
  line-height: clamp(27.5px, 5.5vw, 55px);
}


#last-text {
  text-align: center;
  margin-top: 0;
  font-weight: bold;
}



#haslo {
  margin-top: clamp(-70px, -7vh, -35px);
  margin-right: clamp(10px, 2vw, 20px);
  margin-bottom: clamp(40px, 8vh, 80px);
  font-weight: bold;
  font-size: clamp(15px, 2vw, 20px);
}


.file-description {
  font-weight: bold;
  color: black;
  font-family: 'Andika';
  font-size: clamp(12px, 1.5vw, 15px);
  margin-right: clamp(30px, 6vw, 60px);
}



#nasze-produkty {
  display: flex;
  justify-content: left;
  max-width: 100%;
  min-width: 320px;
  width: 100vw;
}


.text-splash {
  background-repeat: no-repeat;
  color: black;
  text-align: center;
  font-family: 'Amatic SC';
  font-size: clamp(50px, 10vw, 100px);
  max-width: 100%;
  min-width: 320px;
  width: 100vw;
  height: fit-content;
  line-height: clamp(55px, 9vw, 90px);
  background-size: contain;
  margin: 0;
}






.text-splash.orange {
  background-image: url('/dist/img/front/4/pomarancz.webp');
  background-size: contain;
}

.text-splash.purple {
  background-image: url('/dist/img/front/4/fiolet.webp');
  max-height: 400px;
  min-height: 200px;
  height: 40vw;
  max-width: 400px;
  min-width: 200px;
  width: 40vw;

}


#purple_div {
  display: flex;
  justify-content: center;
  max-width: 80%;
  min-width: 40%;
  width: 80vw;
  margin-left: clamp(-10%, -20%, -20%);
  margin-bottom: clamp(100px, 30vw, 370px);
  height: 12vw;
  max-height: 300px;
  min-height: 200px;
}

#purple_div>img {
  max-height: 100px;
  min-height: 50px;
  height: 10vw;
  margin-top: clamp(75px, 17vw, 180px);
  margin-left: clamp(-30px, -6vw, -60px);
}

#pula {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-height: 1000px;
  min-height: 500px;
  height: 100vw;
  margin-top: clamp(75px, 17vw, 180px);
}

#pula>img {
  max-width: 100%;
  min-width: 320px;
  width: 100vw;

  margin-bottom: clamp(200px, 30vw, 300px);
}

#pula>p {
  text-align: center;
  display: block;
  position: static;
}

/* Awards Section */
.nagroda {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
  max-width: 100%;
  min-width: 320px;
  width: 100vw;
}

.nagroda>h3 {
  margin-left: clamp(20px, 4vw, 40px);
}

#glowna {
  margin-left: 0;
  margin-right: clamp(20px, 4vw, 40px);
}

#komunikacja {
  margin: 0;
  margin-bottom: clamp(-15px, -3vh, -30px);
}

.zaskocz {
  
  width: 40vw;
  max-width: 800px;
  min-width: 150px;
}

#jak {
  max-width: 300px;
  min-width: 150px;
  width: 30vw;
  margin-left: clamp(-200px, -25vw, -100px);
  margin-top: clamp(90px, 15vw, 250px);
  font-size: clamp(20px, 5vw, 50px);  
}

#objete {
  text-wrap: nowrap;
  margin-top: clamp(-150px, -30vh, -300px);
  margin-right: clamp(-50px, -10vw, -100px);
  margin-bottom: clamp(-50px, -10vh, -100px);
}

#znajdziesz {
  text-wrap: nowrap;
}

/* List Styles */
#listaa {
  padding-left: clamp(25px, 5vw, 50px);
}

#gdzie-lista {
  margin-top: clamp(-60px, -12vh, -120px);
  padding-left: clamp(30px, 6vw, 60px);
}

#inne {
  margin-top: 0;
  padding-left: clamp(10px, 2vw, 20px);
}

/* Fiolecik Section */
#fiolecik {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
}

#fiolecik>p {
  margin-right: clamp(-25px, -5vw, -50px);
  margin-top: clamp(5px, 1vh, 10px);
}
/* Tensam Section */
#tensam {
  margin: 0;
  margin-top: clamp(-50px, -10vh, -100px);
}

/* Navigation Arrows */
#next_img, 
#prev_img {
  cursor: pointer;
  width: 40px;
  transition: transform 0.3s ease;
}

#next_img:hover,
#prev_img:hover {
  transform: scale(1.1);
}

/* Ordered List */
ol {
  max-width: 95%;
  min-width: 50%;
  width: 95vw;
  padding-left: clamp(20px, 4vw, 40px);
  margin: 0 auto;
}

ol li {
  margin-bottom: clamp(10px, 2vh, 20px);
      font-size: 1.5rem; 
  line-height: 1;
}
#pula>p {
  margin: 0;
}

#miesiacem {
  margin: 0;
  padding: 0;
  width: 20vw;
  max-width: 400px;
  min-width: 100px;
  text-wrap: nowrap;
  margin-right: 30px;
}
#nowrap{
  text-wrap: nowrap;
}
#sprawdz{
  width: 20vw;
  max-width: 300px;
  min-width: 100px;
}
#sprawdz>img{
  width: 30vw;
  max-width: 400px;
  min-width: 200px;
}
#komunikacja{
  width: 40vw;
  height: auto;
  margin:0;
}