.oferta {
  background: #fff;
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  max-width: 900px;
  margin: 40px auto;
  font-family: 'Arial', sans-serif;
  color: #333;
}

.gradient-title {
  background: linear-gradient(190deg,#fff8f5 0%, #0e0e0d 50%, #fff8f5 100%);
  color: white !important;
  padding: 18px 0 18px 0;
  border-radius: 16px;
  font-size: 2.5em;
  letter-spacing: 2px;
  box-shadow: 0 4px 24px rgba(184,92,56,0.10);
  margin-bottom: 18px;
  font-size: 2.2em;
}



.oferta-wstep {
  text-align: center;
  font-size: 1.1em;
  margin-bottom: 30px;
  color: #555;
}

.pakiet, .opcje-dodatkowe {
  background: #efefef;
  padding: 25px;
  border-radius: 20px;
  margin-bottom: 20px;
  border: 2px solid #666;
  border-left: 5px solid #666;
}

.pakiet h3, .opcje-dodatkowe h3 {
  color: goldenrod;
  margin-bottom: 15px;
}

ul {
  list-style: none;
  padding-left: 0;
  
}

.pakiet-list li {
  padding: 8px 0;
  font-size: 1em;
  color: black;
  border-radius: 20px;
  padding: 1%;
}

.pakiet-list li:hover {
  border-radius: 20px;
  padding: 1%;
  font-size: 1em;
  color: white;
  background-color: goldenrod;
  transition:  0.3s ease;
}

ul li strong{
  color: black;
}

.oferta-notka em{
  text-align: center;
  font-size: 0.95em;
  color: #777;
  margin-top: 20px;
}

.oferta-download {
  text-align: center;
  margin-top: 25px;
}

.btn-pobierz {
  background: linear-gradient(160deg,#fff8f5 0%, #0e0e0d 50%, #fff8f5 100%);
  color: #fff;
  padding: 12px 25px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s, transform 0.2s;
  
}

.btn-pobierz:hover {
  background: linear-gradient(190deg,#fff8f5 0%, #0e0e0d 50%, #fff8f5 100%);
  transform: translateY(-2px);
}

#kontakt{
  width: 55%;
  padding: 1%;
  margin: auto;
  margin-bottom: 8%;
}


.opisKontaktowy {
  margin-top: 5%;
  width: 65%;
  margin: auto;
}



.opisKontaktowy p, .opisKontaktowy span{
  text-align: center;
  font-size: 1.2vw;
  color: black;
  margin: 0 auto;
  padding: 0;
} 

.nawigacja #linklogo{
  margin: 0;
  padding: 0;
}

 #linklogo:hover{
  background-color: rgba(0,0,0,0);
  margin: 0;
  padding: 0;
}

.blokZdjeciaGaleria{
  width: 90%;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.blokZdjeciaGaleriaOferta
{
  width: 90%;
  margin-left: auto;
  margin-right:auto ;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: end;
}

.sekcjaGleria{
  width: 33%;
  padding: 1%;
  margin: 1%;
  display: flex;
  flex-direction: column;
  justify-content: center;  
  align-items: center;
  border-radius: 10px;
}

.sekcjaGleria img{
  width: 100%;
  border-radius: 10px;
  padding: 3px;
  margin-top: 5%;
  margin-bottom: 2%;
  border: 3px solid goldenrod;

}

.h3Galeria{
  width: 100%;
  color: white;
  height: 42vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5vw;
  background-image: url("pexels-peng-liu-45946-169647.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}



.btn-pobierz:hover {
  background-color: #d0754f;
  transform: translateY(-2px);
}



/* Oferta benefity - responsive */
.oferta-benefity {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 30px 0 40px 0;
  flex-wrap: wrap;
}
.benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.7);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  padding: 18px 24px;
  min-width: 140px;
  max-width: 220px;
  margin: 10px;
  transition: box-shadow 0.3s;
}
.benefit img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 5px;
}
.benefit span {
  color: goldenrod;
  font-weight: 600;
  font-size: 1.1em;
  text-align: center;
}
.benefit:hover {
  box-shadow: 0 6px 24px rgba(184,92,56,0.18);
}

@media (max-width: 900px) {
  .oferta-benefity {
    gap: 20px;
  }
  .benefit {
    min-width: 120px;
    max-width: 180px;
    padding: 14px 12px;
  }
}
@media (max-width: 600px) {
  .oferta-benefity {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .benefit {
    min-width: 90vw;
    max-width: 95vw;
    width: 100%;
    padding: 10px 6vw;
    font-size: 1em;
  }
  .benefit img {
    width: 36px;
    height: 36px;
  }
}




/* Pakiet card - responsive */
.pakiet-card {
  background: rgba(255,255,255,0.95);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(184,92,56,0.10);
  border: 1.5px solid black;
  margin: 0 12px 24px 12px;
  transition: transform 0.25s, box-shadow 0.25s;
  position: relative;
  max-width: 420px;
  width: 100%;
}
.pakiet-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 16px 48px rgba(184,92,56,0.18);
  z-index: 2;
}
.pakiet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.pakiet-cena-badge {
  background: linear-gradient(90deg, #b85c38 60%, #f7c873 100%);
  color: #fff;
  font-weight: bold;
  font-size: 1.3em;
  border-radius: 8px;
  padding: 8px 18px;
  box-shadow: 0 2px 8px rgba(184,92,56,0.10);
  margin-left: 10px;
}
.btn-pobierz-efekt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #b85c38 60%, #f7c873 100%);
  color: #fff;
  font-weight: bold;
  font-size: 1.25em;
  border: none;
  border-radius: 32px;
  padding: 16px 36px;
  box-shadow: 0 4px 18px rgba(184,92,56,0.18);
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  margin-top: 10px;
}
.btn-pobierz-efekt::before {
  content: '\1F4BE'; /* floppy disk emoji as icon */
  font-size: 1.2em;
  margin-right: 6px;
}
.btn-pobierz-efekt:hover {
  background: linear-gradient(90deg, #f7c873 0%, #b85c38 100%);
  color: #fff;
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 8px 32px rgba(184,92,56,0.22);
}

@media (max-width: 900px) {
  .pakiet-card {
    max-width: 90vw;
    margin: 0 4vw 20px 4vw;
  }
}
@media (max-width: 600px) {
  .pakiet-card {
    max-width: 98vw;
    margin: 0 1vw 16px 1vw;
    padding: 0 2vw;
  }
  .btn-pobierz-efekt {
    font-size: 1em;
    padding: 12px 10vw;
  }
}






/* ================================
  DEDUPLICATED CSS STYLES
================================ */

/* Loader */
#loader {
  position: fixed;
  inset: 0;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2vw; /* Zmienione na procentowe */
  color: #555;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1s ease;
}

#loader.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Nawigacja - POPRAWIONA (FIX POSZERZANIA) */
.nawigacja {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100vw; /* FIX: Blokuje rozszerzenie poza viewport */
  height: 10vh;
  display: flex;
  align-items: center;
  justify-content: space-between; /* FIX: Zmienione z space-around - lepiej rozkłada 3 elementy (ul lewo, logo, ul prawo) bez overflow */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* FIX: Zmniejszony cień - mniej "rozmycia" krawędzi, co mogło dawać iluzję poszerzenia */
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  transition: transform 0.4s ease;
  overflow: hidden; /* FIX: Ukrywa ewentualny overflow w nav */
  padding: 0 20px; /* FIX: Wewnętrzny padding nav - zamiast polegać na space-around, co powodowało rozciąganie */
  box-sizing: border-box;
}

/* Ul w nawigacji - FIX: flex i shrink dla lepszego dopasowania */
.nawigacja ul.menu-lewo,
.nawigacja ul.menu-prawo {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 1; /* FIX: Ul (z linkami) się ściska w flex, zamiast overflow */
  min-width: 0; /* FIX: Zapobiega flex item overflow */
}

.nawigacja li {
  margin: 0;
}

.nawigacja a {
  display: block;
  padding: 15px 15px; /* FIX: Zmniejszony z 25px - redukuje sumaryczną szerokość linków, mniej ryzyka poszerzenia */
  text-decoration: none;
  color: white;
  font-weight: bold;
  transition: background 0.3s ease;
  font-size: 1.4vw; /* procentowa czcionka */
  white-space: nowrap; /* FIX: Tekst linków nie łamie się i nie poszerza nav */
  flex-shrink: 1; /* FIX: Pojedyncze linki się ściskają */
}

.nawigacja #linklogo {
  margin: 0;
  padding: 0 10px; /* FIX: Lekki padding wokół logo - zapobiega "przyklejaniu" do krawędzi */
  flex-shrink: 1; /* FIX: Logo (h1) się ściska w flex */
}

.nawigacja #linklogo:hover {
  background-color: rgba(0,0,0,0);
  margin: 0;
  padding: 0;
}

.nawigacja h1.logo-nawigacja {
  font-family: Georgia, serif;
  font-size: 2.5vw; /* procentowo */
  font-weight: 100;
  text-align: center;
  margin: 0; /* FIX: Usuwa default marginesy h1 */
  line-height: 1.2; /* FIX: Kompaktuje <br> w logo - mniej "puchnięcia" */
}

/* Hover dla linków - bez zmian */
.nawigacja a:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1100;
}
.hamburger span {
  display: block;
  width: 28px;
  height: 4px;
  margin: 4px 0;
  background: #fff;
  border-radius: 2px;
  transition: 0.3s;
}

.menu-wrap {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
}


@media (max-width: 900px) {
  .hamburger {
    display: flex;
  }
  .menu-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.97);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    transform: translateY(-100%);
    transition: transform 0.4s ease;
    z-index: 1001;
  }
  .nawigacja {
    justify-content: flex-end;
    height: 60px;
    background: rgba(0,0,0,0.95);
  }
  .menu-lewo, .menu-prawo {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .logo-nawigacja {
    font-size: 5vw;
    margin: 20px 0;
  }
}

@media (max-width: 600px) {
  .nawigacja {
    height: 48px;
    font-size: 4vw;
  }
  .nawigacja a {
    font-size: 4vw;
    padding: 8px 8px;
  }
  .nawigacja h1 {
    font-size: 6vw;
  }
  .menu-wrap {
    gap: 16px;
  }
}

.nawigacjaFooter {
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 100vw; /* FIX: Jak w nawigacji górnej - blokuje rozszerzenie */
  display: flex;
  align-items: center;
  justify-content: space-between; /* FIX: Zmienione z space-around - lepiej bez overflow */
  box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.3); /* FIX: Dostosowany cień (w górę) i zmniejszony */
  background-color: rgba(236, 225, 225, 0.8);
  z-index: 1000;
  transition: transform 0.4s ease;
  overflow: hidden; /* FIX: Ukrywa overflow */
  padding: 0 20px; /* FIX: Wewnętrzny padding */
  box-sizing: border-box;
}

/* Ul w footer - FIX: analogicznie jak w nav */
.nawigacjaFooter ul.menu-lewo,
.nawigacjaFooter ul.menu-prawo {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-shrink: 1; /* FIX: Ściska się */
  min-width: 0; /* FIX: Bez overflow */
}

.nawigacjaFooter li {
  margin: 0;
}

.nawigacjaFooter a {
  display: block;
  padding: 15px 15px; /* FIX: Zmniejszony z 25px */
  text-decoration: none;
  color: black;
  font-weight: bold;
  transition: background 0.3s ease;
  font-size: 1.4vw; /* procentowa czcionka */
  white-space: nowrap; /* FIX: Nie łamie się */
  flex-shrink: 1; /* FIX: Ściska się */
}

.nawigacjaFooter ul li a {
  display: block;
  padding: 15px 15px; /* FIX: Zmniejszony */
}

.nawigacjaFooter #linklogo {
  margin: 0;
  padding: 0 10px; /* FIX: Padding dla logo */
  flex-shrink: 1;
}

.nawigacjaFooter h1.logo-nawigacja {
  font-family: Georgia, serif;
  font-size: 2.5vw; /* procentowo */
  font-weight: 100;
  text-align: center;
  margin: 0;
  color: black;
  line-height: 1.2; /* FIX: Kompaktuje <br> */
}

/* Hover - bez zmian */
.nawigacjaFooter a:hover {
  background-color: rgba(255,255,255,0.12); /* jaśniejszy, lepszy kontrast */
  color: #fff;
  border-radius: 6px;
  transition: background 0.3s, color 0.3s;
}

.nawigacjaFooter.hide {
  transform: translateY(100%); /* FIX: Dla footer - schowa w dół, nie w górę (z -100% na 100%) */
}







/* @media (min-width: 768px) {
  #lewyheader, .lewyMain { width: 50%; }
  #prawyheader, .prawyMain { width: 50%; }
} */





* {
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: white;
}



html, body {
  height: 100%;
}

body {
  background-attachment: scroll;
  min-height: 100vh;
  overflow-x: hidden;
  background-repeat: no-repeat;
}

header {
  display: flex;
  flex-wrap: wrap;
  background-image: url('back.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#lewyheader,
#prawyheader {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Loader */


/* Nawigacja */




.nawigacja h1 {
  font-family: Georgia, serif;
  font-size: 2.5vw;
  font-weight: 100;
  text-align: center;
}



#lewyheader,
#prawyheader {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 10vh;
}

@media (min-width: 768px) {
  #lewyheader, .lewyMain { width: 50%; }
  #prawyheader, .prawyMain { width: 50%; }
}

#logo {
  margin: 0 auto 20px;
  width: 70%;
  text-align: center;
}

#lewyheader h2 {
  max-width: 640px;
  margin: 12px auto;
  font-size: 4vw;
  text-align: left;
  letter-spacing: 0.2cap;
}

#lewyheader p {
  max-width: 640px;
  letter-spacing: 0.3cap;
  text-transform: uppercase;
  margin: 12px auto;
  font-size: 1.5vw;
  text-align: left;
  color: #ddd;
}

/* Animacje wejścia */
.animacja-start {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.animacja-start.widoczny {
  opacity: 1;
  transform: translateY(0);
}

/* Galeria */
.galeria {
  width: 50%;
  border: 7px solid rgba(255, 255, 255, 0.3);
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  filter: brightness(1.2);
  transition: transform 0.3s ease;
}

.galeria:hover {
  transform: scale(1.02);
}

.zdjecieOpis {
  width: 80%;
  margin: auto;
}

/* Sekcja main */
.flexbox {
  background-color: white;
  display: flex;
}

.lewyMain, .prawyMain {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 5%;
}

.lewyMainGaleria, .prawyMainGaleria {
  height: auto;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10%;
  margin-bottom: 5%;
}

















/* Teksty main */
main h2 {
  width: 80%;
  max-width: 640px;
  margin: 0 auto;
  font-family: serif;
  line-height: 1.2em;
  font-size: 4vw;
  font-weight: 600;
  text-align: center;
  color: black;
}



main p {
  width: 70%;
  letter-spacing: 0;
  text-align: center;
  font-weight: 100;
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 2%;
  font-family: sans-serif;
  text-transform: none;
  font-size: 1.5vw;
  line-height: 1.5em;
  color: #666;
}

/* Przyciski */
.lewyMain .poznajMnie {
  display: inline-block;
  color: white;
  background-color: #666;
  padding: 2%;
  margin: 3%;
  font-size: 1.2vw;
  font-weight: 400;
  font-family: Montserrat, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 0 20px #666;
  border-radius: 10px;
  transition: all 0.3s ease;
}
.lewyMain .poznajMnie:hover {
  background-color: whitesmoke;
  color: black;
  border: 1px solid black;
}

/* Animacje scroll */
.animacja-scroll {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 1s ease, transform 1s ease;
}
.animacja-scroll.widoczny {
  opacity: 1;
  transform: translateY(0);
}

/* Tytuły */
.mainTittle {
  margin-top: 3%;
  background-color: white;
  text-align: center;
}
.mainTittle h2 {
  color: #666;
  font-size: 2vw;
  text-transform: uppercase;
  padding-top: 5%;
}
.mainTittle p {
  color: black;
  font-size: 3vw;
  font-family: Cambria, Georgia, serif;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 600;
}

/* Animacje lewo/prawo */
.animacja-lewo, .animacja-prawo {
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
}
.animacja-lewo { transform: translateX(-100px); }
.animacja-prawo { transform: translateX(100px); }
.animacja-lewo.widoczny, .animacja-prawo.widoczny {
  opacity: 1;
  transform: translateX(0);
}

/* Animacja zdjęcia */
.animacja-prawo-foto {
  opacity: 0;
  transform: translateX(120px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.animacja-prawo-foto.widoczny {
  opacity: 1;
  transform: translateX(0);
}

/* Middle title */
.middleTittle {
  margin-top: 10% ;
  background-color: white;
  text-align: center;
  padding: 50px 20px;
}
.middleTittle h3 {
  color: #333;
  font-size: 2.5vw;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Animacja góra */
.animacja-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1s ease;
}
.animacja-up.widoczny {
  opacity: 1;
  transform: translateY(0);
}

/* Galeria zdjęć */
.zdjecieGaleria {
  width: 80%;
  height: auto;
  border-radius: 10px;
}

#zdjecieLewy1 { max-width: 80%; }
#zdjecieLewy2 { max-width: 50%; }
#zdjecieLewy3 { max-width: 80%; }
#zdjeciePrawy1 { margin-top: 15%; max-width: 60%; }
#zdjeciePrawy2 { max-width: 50%; }

/* Opis zdjęć */
.opisZdjec {
  margin-top: 20px;
  padding-bottom: 2px;
  text-decoration: none;
  position: relative;
  text-align: center;
  color: #666;
  font-size: 1.5vw;
  letter-spacing: 4px;
  font-family: 'Times New Roman', serif;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  overflow: hidden;
  transition: color 0.4s ease;
}
.opisZdjec::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 0;
  background-color: goldenrod;
  transition: width 0.4s ease;
}
.opisZdjec:hover {
  color: goldenrod;
}
.opisZdjec:hover::after {
  width: 100%;
}

.opisGalerii {
  margin-top: 3%;
  margin-bottom: 13%;
}

.przerwaObraz {
  width: 100%;
  height: auto;
}

.naglowekKreatywnosc {
  font-size: 4em;
  font-weight: bolder;
}

.opisKreatywnosc p {
  color: black;
}

/* RESPONSYWNOŚĆ */
@media (max-width: 1024px) {
  footer {
    font-size: 2.5vw;
  }
  main h1, main h2, main h3, main h4, main h5, main h6, main li, main p,
  footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, footer li, footer p {
    font-size: 3vw;
  }
  .lewyMainGaleria, .prawyMainGaleria {
    width: 100%;
  }
  /* .flexbox {
    flex-direction: column;
  } */
}

@media (max-width: 768px) {
  footer {
    font-size: 3vw;
  }
  main h1, main h2, main h3, main h4, main h5, main h6, main li, main p,
  footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, footer li, footer p {
    font-size: 4vw;
  }
  .lewyMainGaleria, .prawyMainGaleria {
    display: block;
    margin-top: 10%; 
    margin-bottom: 5%;
    margin-left: auto;
    margin-right: auto;
  }

  .zdjecieGaleria {
    width: 90%;
    max-width: 400px;
    margin: 15px 0;
  }

  .opisZdjec, .opisGalerii {
    text-align: center;
    width: 90%;
    max-width: 400px;
  }

  #lewyheader, #prawyheader {
    padding: 20px;
  }

  #lewyheader h2 {
    font-size: 5vw;
    text-align: center;
  }

  #lewyheader p {
    font-size: 2.5vw;
    text-align: center;
  }

  .nawigacja a {
    font-size: 3vw;
    padding: 10px 15px;
  }

  .nawigacja h1 {
    font-size: 4vw;
  }
}


#logo {
  margin: 0 auto 20px;
  width: 70%;
  text-align: center;
}

#lewyheader h2 {
  max-width: 640px;
  margin: 12px auto;
  font-size: 4vw; /* procentowa czcionka */
  text-align: left;
  letter-spacing: 0.2cap;
}

#lewyheader p {
  max-width: 640px;
  letter-spacing: 0.3cap;
  text-transform: uppercase;
  margin: 12px auto;
  font-size: 1.5vw; /* procentowo */
  text-align: left;
  color: #ddd;
}

/* Animacje wejścia */
.animacja-start {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.animacja-start.widoczny {
  opacity: 1;
  transform: translateY(0);
}

/* Galeria */



.galeria {
  width: 50%;
  border-radius: 10px;
  border: 7px solid rgba(255, 255, 255, 0.3);
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transition: transform 0.3s ease;

}

.galeria:hover {
  transform: scale(1.02);
}

.zdjecieOpis{
  width: 80%;
  margin: auto;
}

/* Sekcja main */
.flexbox {
  background-color: white;
  display: flex;
}

.lewyMain, .prawyMain {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 5%;
}

.lewyMainGaleria, .prawyMainGaleria {
  height: auto;
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10%;
  margin-bottom: 5%;
}

/* Teksty main */
main h2 {
  width: 80%;
  max-width: 640px;
  margin: 0 auto;
  font-family: serif;
  line-height: 1.2em;
  font-size: 4vw; /* procentowo */
  font-weight: 600;
  text-align: center;
  color: black;
}

main h3 {
  width: 65%;
  text-align: center;
  font-weight: 500;
  margin: 4% auto 3%;
  color: black;
  padding-bottom: 2%;
  font-family: serif;
  font-size: 2.5vw; /* procentowo */
}

main p {
  width: 70%;
  letter-spacing: 0;
  text-align: center;
  font-weight: 100;
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 2%;
  font-family: sans-serif;
  text-transform: none;
  font-size: 1.5vw; /* procentowo */
  line-height: 1.5em;
  color: #666;
}

/* Przyciski */
.lewyMain .poznajMnie {
  display: inline-block;
  color: white;
  background-color: #666;
  padding: 2%;
  margin: 3%;
  font-size: 1.2vw; /* procentowo */
  font-weight: 400;
  font-family: Montserrat, sans-serif;
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: 0 0 20px #666;
  border-radius: 10px;
  transition: all 0.3s ease;
}
.lewyMain .poznajMnie:hover {
  background-color: whitesmoke;
  color: black;
  border: 1px solid black;
}

/* Animacje scroll */
.animacja-scroll {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity 1s ease, transform 1s ease;
}
.animacja-scroll.widoczny {
  opacity: 1;
  transform: translateY(0);
}

/* Tytuły */
.mainTittle {
  margin-top: 3%;
  background-color: white;
  text-align: center;
}
.mainTittle h2 {
  color: #666;
  font-size: 2vw;
  text-transform: uppercase;
  padding-top: 5%;
}
.mainTittle p {
  color: black;
  font-size: 3vw;
  font-family: Cambria, Georgia, serif;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 600;
}

/* Animacje lewo/prawo */
.animacja-lewo, .animacja-prawo {
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
}
.animacja-lewo { transform: translateX(-100px); }
.animacja-prawo { transform: translateX(100px); }
.animacja-lewo.widoczny, .animacja-prawo.widoczny {
  opacity: 1;
  transform: translateX(0);
}

/* Animacja zdjęcia */
.animacja-prawo-foto {
  opacity: 0;
  transform: translateX(120px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.animacja-prawo-foto.widoczny {
  opacity: 1;
  transform: translateX(0);
}

/* Middle title */
.middleTittle {
  margin-top: 10% ;
  background-color: white;
  text-align: center;
  padding: 50px 20px;
}
.middleTittle h3 {
  color: #333;
  font-size: 2.5vw;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Animacja góra */
.animacja-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1s ease;
}
.animacja-up.widoczny {
  opacity: 1;
  transform: translateY(0);
}

/* Galeria zdjęć */
.zdjecieGaleria {
  width: 80%;
  height: auto;
  border-radius: 10px;
}

#zdjecieLewy1 { 
  max-width: 80%; 
}

#zdjecieLewy2 { 
  max-width: 50%; 
}

#zdjecieLewy3 { 
  max-width: 80%; 
}

#zdjeciePrawy1 { 
  margin-top: 15%;
  max-width: 60%;
}

#zdjeciePrawy2 { 
  max-width: 50%;
}

/* Opis zdjęć */
.opisZdjec{
  margin-top: 20px;
  padding-bottom: 2px;
  text-decoration: none;
  position: relative;
  text-align: center;
  color: #666;
  font-size: 1.5vw; /* procentowo */
  letter-spacing: 4px;
  font-family: 'Times New Roman', serif;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  overflow: hidden;
  transition: color 0.4s ease;
}
.opisZdjec::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 0;
  background-color: goldenrod;
  transition: width 0.4s ease;
}
.opisZdjec:hover {
  color: goldenrod;
}
.opisZdjec:hover::after {
  width: 100%;
}

.opisGalerii{
  margin-top: 3%;
  margin-bottom: 13%;
}

.przerwaObraz{
  width: 100%;
  height: auto;
  margin-top: 5%;
  margin-bottom: 5%;
}

.naglowekKreatywnosc{
  font-size: 4em;
  font-weight: bolder;
}

.opisKreatywnosc p{
  color: black;
}

.blokWstep{
  background-color: #e0e0e0;
}


/* ---formularz kontaktowy--- */
footer {
  background-color: rgba(40, 40, 40, 0.92); /* taki sam jak nawigacjaFooter */
  color: white;
  font-size: 1.2vw;
}

.stopkaGorna {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 40px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.stopkaSekcja {
  flex: 1;
  min-width: 200px;
  margin: 10px;
}

.stopkaSekcja h2 {
  font-size: 1.5vw;
  margin-bottom: 15px;
  font-family: Georgia, serif;
}

.stopkaSekcja p {
  margin: 5px 0;
}

.stopkaSekcja a {
  color: goldenrod;
  text-decoration: none;
  transition: color 0.3s ease;
}

.stopkaSekcja a:hover {
  color: white;
}

.mediaIkony a {
  margin-right: 10px;
  display: inline-block;
}

.mediaIkony img {
  width: 32px;
  height: 32px;
  transition: filter 0.3s ease;
}

.mediaIkony img:hover {
  filter: brightness(1.3) invert(0);
}

.stopkaDolna {
  text-align: center;
  padding: 15px 0;
  font-size: 1vw;
  color: #ccc;
}

.copy{
  text-align: center;
}


.lewyMainKontaktowy {
  width: 33%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.srodkowyMainKontaktowy {
  width: 33%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.prawyMainKontaktowy {
  width: 33%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 20px;
}

.prawyMainKontaktowy h3 {
  font-size: 2vw;
  text-align: center;
  margin-bottom: 15px;
  color: black;
}

.formularzKontaktowy {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.formularzKontaktowy label {
  font-size: 1.2vw;
  font-weight: bold;
  color: black;
}

.formularzKontaktowy input,
.formularzKontaktowy textarea {
  width: 100%;
  padding: 8px 10px;
  font-size: 1.1vw;
  border: 1px solid #ccc;
  border-radius: 8px;
  resize: none;
  color: black;
}

.formularzKontaktowy button {
  margin-top: 10px;
  padding: 10px;
  font-size: 1.2vw;
  background-color: #666;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.formularzKontaktowy button:hover {
  background-color: goldenrod;
  color: black;
}

/* Responsywność */
@media (max-width: 1024px) {
  .prawyMainKontaktowy {
    width: 100%;
    margin-top: 20px;
  }

  .formularzKontaktowy input,
  .formularzKontaktowy textarea,
  .formularzKontaktowy button {
    font-size: 2.5vw;
  }

  .prawyMainKontaktowy h3 {
    font-size: 3vw;
  }
}


.blokKontaktowy{
  width: 80%;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.podblokKontaktowy{
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 2%;
}

.ikona {
  width: 8%;
  height: auto;        /* zachowuje naturalne proporcje */
  object-fit: contain; /* upewnia się, że grafika nie jest rozciągana */
}


.podblokKontaktowy p{
  color: black;
  font-size: 1.5vw;
  font-weight: bolder;
  width: 40%;
  margin: 0;
}

.podblokKontaktowy p span{
  color: #666;
  font-weight: lighter;
}

.srodkowyMainKontaktowy img{
  width: 100%;
}

/* ============================
   Dodatkowa responsywność
============================ */

/* Tablety i mniejsze ekrany */
@media (max-width: 1024px) {
  .flexbox { flex-direction: column; align-items: center; }
  .flexboxinny { flex-direction: row; align-items: start; }
  .lewyMain, .prawyMain, .lewyMainGaleria, .prawyMainGaleria, .lewyMainKontaktowy, .srodkowyMainKontaktowy, .prawyMainKontaktowy { width: 100%; margin: 0 auto 20px; text-align: center; }
  .zdjecieGaleria, .galeria { width: 90%; max-width: 400px; margin: 10px auto; }
  #lewyheader, #prawyheader { width: 100%; padding: 20px; text-align: center; }
  #lewyheader h2 { font-size: 6vw; }
  #lewyheader p { font-size: 3vw; }
  main h1, main h2, main h3, main h4, main h5, main h6 { font-size: 4vw; }
  main p, main a { font-size: 2.8vw; }
  footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 { font-size: 3vw; }
  footer p, footer a { font-size: 2vw; }
  .nawigacja ul, .nawigacjaFooter ul { flex-direction: column; gap: 10px; }
  .nawigacja a, .nawigacjaFooter a { font-size: 3vw; padding-top:  10px; }
  .nawigacja h1, .nawigacjaFooter h1 { font-size: 4vw; }
  .formularzKontaktowy label { font-size: 2.5vw; }
  .formularzKontaktowy input, .formularzKontaktowy textarea, .formularzKontaktowy button { font-size: 2.5vw; padding: 8px 10px; }
  .prawyMainKontaktowy h3 { font-size: 3vw; }
  .podblokKontaktowy  p { font-size: 2.5vw; width: 60%; }
  .opisZdjec, .opisGalerii { font-size: 2.5vw; }
  .pakiet-list li { font-size: 2vw; }
  .opisKontaktowy p { font-size: 2.5vw; }
  .opisKontaktowy p span { font-size: 2.5vw; font-weight: 800; }
  .naglowekKreatywnosc { font-size: 6vw; }
  header {padding-top: 10vh;}
}

/* Telefony komórkowe */
@media (max-width: 768px) {
  #lewyheader h2 { font-size: 7vw; }
  #lewyheader p { font-size: 4vw; }
  main h1, main h2, main h3, main h4, main h5, main h6 { font-size: 5vw; }
  main p, main a { font-size: 3.5vw; }
  footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 { font-size: 4vw; }
  footer p, footer a { font-size: 3vw; }
  .zdjecieGaleria, .galeria { width: 95%; max-width: 300px; }
  .flexbox { flex-direction: column; }
  .formularzKontaktowy input, .formularzKontaktowy textarea, .formularzKontaktowy button { font-size: 3vw; padding: 10px; }
  .nawigacjaFooter { flex-direction: column; height: auto; padding: 20px 0; }
  .nawigacjaFooter ul { flex-direction: column; gap: 10px; }
}

/* Małe telefony */
@media (max-width: 480px) {
  footer {
    font-size: 4vw;
  }
  main h1, main h2, main h3, main h4, main h5, main h6, main li, main p,
  footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, footer li, footer p {
    font-size: 6vw !important;
  }
  #lewyheader h2 { font-size: 9vw; }
  #lewyheader p { font-size: 5vw; }
  main h1, main h2, main h3, main h4, main h5, main h6, .gradient-title { font-size: 8vw !important; }
  main p, main a, .oferta-wstep, .pakiet-list li, .opisKontaktowy p, .opisKontaktowy, .opisGalerii, .opisZdjec { font-size: 6vw !important; }
  footer h1, footer h2, footer h3, footer h4, footer h5, footer h6 { font-size: 6vw !important; }
  footer p, footer a { font-size: 5vw !important; }
  .btn-pobierz, .btn-pobierz-efekt { font-size: 5vw !important; padding: 10px 6vw; }
  .formularzKontaktowy input, .formularzKontaktowy textarea, .formularzKontaktowy button { font-size: 5vw; padding: 12px 10px; }
  .nawigacja a, .nawigacjaFooter a { font-size: 5vw; }
  .nawigacja h1, .nawigacjaFooter h1 { font-size: 6vw; }
  .pakiet-cena-badge { font-size: 5vw !important; padding: 6px 10vw; }
}

@media (max-width: 600px) {
  html, body {
    font-size: 15px;
  }
  header {
    flex-direction: column;
    padding-top: 48px;
  }
  .pakiet-list li{
    font-size: 3.5vw;
  }
  #lewyheader, #prawyheader {
    padding: 16px 4vw;
    width: 100%;
    text-align: center;
  }
  #lewyheader h2 {
    font-size: 6vw;
    text-align: center;
  }
  #lewyheader p {
    font-size: 3vw;
    text-align: center;
  }
}