@media (max-width: 768px) {

  .hero {
    background-image: url("images/40.jpg") !important;
    background-size: contain !important;   /* CAŁE zdjęcie widoczne */
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important; /* wyłączamy parallax */
  }

  /* TEN SAM FILTR CO NA DESKTOPIE */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(245, 245, 245, 0.5); /* IDENTYCZNY jak desktop */
    z-index: 0;
  }

  .hero-content {
    position: relative;
    z-index: 1;
  }

}

/* ===== HEADER ===== */
header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 15px 20px;
  background: #333;
  position: relative;
  z-index: 1000;
}

/* ===== MENU DESKTOP ===== */
nav ul {
  list-style: none;
  display: flex;
  gap: 30px;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-family: 'Cinzel', serif;
  font-weight: 700;
}

/* ===== HAMBURGER ===== */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 20px;
  cursor: pointer;
}

.hamburger span {
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {

  .hamburger {
    display: flex;
  }

  nav ul {
    display: none;
    flex-direction: column;
    gap: 20px;
    background: #333;
    position: absolute;
    top: 60px;
    right: 20px;
    padding: 20px;
    border-radius: 10px;
    width: 200px;
  }

  nav ul.show {
    display: flex;
  }

}

/* ===== ZOOM SECTION ===== */

.zoom-section::after {
  display: none !important;
}

.zoom-section {
  width: 100%;
  display: flex;
  justify-content: center;   /* CENTROWANIE HORYZONTALNE */
  margin: 32px 0;            /* kontrolowany odstęp góra/dół */
}

/* ZDJĘCIE – wspólne */
.zoom-image {
  display: block;
  width: 100%;
  max-width: 1200px;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
}

/* DESKTOP */
@media (min-width: 769px) {
  .zoom-image {
    padding: 0 16px;         /* boczne marginesy */
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .zoom-section {
    margin: 16px 0;          /* MNIEJSZA przerwa góra/dół */
  }

  .zoom-image {
    padding: 0 16px;         /* boczne marginesy */
  }
}

/* FADE GÓRA + DÓŁ */
.zoom-image {
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );

  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
}


.section-title.long-title {
  font-size: 1.57em;
}

@media screen and (max-width: 768px) {

  /* KAŻDY ITEM NA CAŁĄ SZEROKOŚĆ */
  #portfolio-sculptures .portfolio-item {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    display: flex;
    justify-content: center;
  }

  /* WIERSZE JEDEN POD DRUGIM */
  #portfolio-sculptures .portfolio-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px;
  }

  /* DUŻY WRAPPER ZDJĘCIA */
  #portfolio-sculptures .portfolio-img-wrapper,
  #portfolio-sculptures .portfolio-img-wrapper.short {
    width: 90vw !important;      /* 🔥 DUŻE */
    max-width: 420px !important; /* kontrola */
    aspect-ratio: 3 / 4;
    height: auto !important;
    overflow: hidden;
    border-radius: 18px;
    position: relative;
  }

  /* ZDJĘCIE WYPEŁNIA CAŁOŚĆ */
  #portfolio-sculptures img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 18px;
  }

}

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

/* Podstawowe style */
body {
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}

header {
    background: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

nav ul {
    list-style: none;
}

nav ul li {
    display: inline;
    margin: 0 20px;
}

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

.hero {
    text-align: center;
    padding: 50px 0;
}

.hero img {
    width: 80%;
    height: auto;
}

section {
    padding: 40px 20px;
    margin: 20px 0;
}

h2 {
    font-size: 2em;
    margin-bottom: 28px;

}

form {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    margin: 0 auto;
}

form label, form input, form textarea {
    margin-bottom: 10px;
}

form button {
    background: #333;
    color: #fff;
    padding: 10px;
    border: none;
    cursor: pointer;
}

form button:hover {
    background: #555;
}

footer {
    text-align: center;
    padding: 20px;
    background: #333;
    color: #fff;
}

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

footer ul li {
    display: inline;
    margin: 0 10px;
}

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

.icon-instagram i {
    color: #E1306C;
}

.icon-facebook i {
    color: #1877F2;
}

.icon-instagram, .icon-facebook {
    color: black; /* kolor tekstu przy ikonie */
}

.email-link {
  display: inline-flex;       /* ustawia ikonę i tekst obok siebie */
  align-items: center;        /* wyrównuje pionowo do środka */
  color: black;               /* kolor tekstu i ikony */
  text-decoration: none;      /* usuwa podkreślenie */
  gap: 8px;                   /* odstęp między ikoną a tekstem */
  font-family: Arial, sans-serif;
}

.email-link:hover {
  color: gray;               

}

.icon-mail {
  width: 18px;        
  height: 18px;       
  flex-shrink: 0; 
  transition: transform 0,2s;  
}

.email-link:hover .icon-mail {
transform: scale(1.2);

}

.section-title {
  font-weight: 300;
  font-size: 15px;
  letter-spacing: 1.5px;
}

h1, h2, h3 {
  font-weight: 400 !important;
  letter-spacing: 2px;
}

.menu-link {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 2px;
  text-transform: uppercase; /* jeśli chcesz */
}

/* Styl dla nagłówków sekcji */
section h2 {
  text-align: center;        /* wyśrodkowanie */
  position: relative;
  margin: 40px 0 60px 0;     /* odstęp od góry i dołu */
  font-weight: 400;
  letter-spacing: 1px;
  font-size: 25px;
  color: #333;
}

/* Linie po bokach nagłówka */
section h2::before,
section h2::after {
  content: "";
  display: inline-block;
  width: 50px;               /* długość linii */
  height: 1px;               /* grubość linii */
  background-color: #ccc;    /* kolor linii */
  margin: 0 15px;            /* odstęp między linią a tekstem */
  vertical-align: middle;
}

/* Linie oddzielające sekcje */
section {
  position: relative;
  padding: 15px 15px; /* większy odstęp między sekcjami */
}

section::after {
  content: "";
  display: block;
  width: 80%;
  height: 1px;
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0));
  margin: 40px auto 0 auto; /* linia pod sekcją, wyśrodkowana */
}

/* Nagłówek hero w stylu sekcji */
.hero h1 {
  text-align: center;        /* wyśrodkowanie */
  position: relative;
  font-weight: 400;
  font-size: 25px;
  letter-spacing: 1px;
  color: #333;
  margin-bottom: 40px;
}

/* Linie po bokach nagłówka */
.hero h1::before,
.hero h1::after {
  content: "";
  display: inline-block;
  width: 60px;               
  height: 1px;               
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0));
  margin: 0 15px;            
  vertical-align: middle;
}
/* Linie po bokach nagłówków hero i sekcji */
.hero h1::before,
.hero h1::after,
section h2::before,
section h2::after {
  content: "";
  display: inline-block;
  width: 60px;               
  height: 1px;               
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0));
  margin: 0 15px;            
  vertical-align: middle;
}

/* Statyczny ołówek */
.pencil-img {
  display: block !important;          
  margin: 10px auto 0 auto !important; 
  width: 600px !important;            
  height: auto !important;            
  border: none !important;            
  box-shadow: none !important;        
  border-radius: 0 !important;        
  transition: none !important;         
}

/* Wyłączenie globalnego hover dla ołówka */
.pencil-img:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ===== HERO – TŁO + PARALLAX + SUBTELNOŚĆ ===== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  background-image: url("images/40.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  background-attachment: fixed;
  overflow: hidden;
}

/* subtelna mgiełka – nie wybiela zdjęcia */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.12);
  z-index: 0;
}

/* treść nad tłem */
.hero-content {
  position: relative;
  z-index: 1;
  padding: 40px;
}

/* nagłówek */
.hero h1 {
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 3px;
  margin-bottom: 40px;
  color: #333;
}
.hero {
  position: relative;
  min-height: 100vh;
  background-image: url("images/40.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  overflow: hidden;
}

/* TO JEST KLUCZ – KOLOROWA MGIEŁKA */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;

  /* beżowa warstwa jak na screenie */
  background: rgba(245, 245, 245, 0.5);

  z-index: 0;
}

/* tekst nad tłem */
.hero-content {
  position: relative;
  z-index: 1;
  color: #111;
}

body {
  background-color: rgb(245, 242, 238);
}
.hero {
  background-position: center 40%; /* 0% = góra, 100% = dół */
}

.hero-subtitle {
  font-weight: 400;
  letter-spacing: 2px;
  color: #333;
  font-size: 25px;       /* mniejszy niż h2 */
  text-align: center;
  margin: 30px 0;        /* większa przerwa między zdaniami */
  position: relative;
}

/* Linie po bokach jak w h2 */
.hero-subtitle::before,
.hero-subtitle::after {
  content: "";
  display: inline-block;
  width: 60px;
  height: 1px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0,), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
  margin: 0 15px;
  vertical-align: middle;
}

.opinie-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.opinie-slider {
  position: relative;
  width: 100%;
  max-width: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.opinie-container {
  width: 100%;
  overflow: hidden;
}

.opinie-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.opinia {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
}

.opinia img {
  width: 70%;
  max-width: 380px;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.arrow {
  background: none;
  border: none;
  font-size: 25px;
  cursor: pointer;
  color: #333;
  padding: 10px;
}

.dots {
  margin-top: 15px;
}

.dot {
  height: 12px;
  width: 12px;
  margin: 0 5px;
  background-color: #ccc;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}

.dot.active {
  background-color: #333;
}
.arrow {
  background: transparent;
  border: none;
  font-size: 20px;
  color: #3a3a3a;
  cursor: pointer;
  padding: 10px 15px;
  transition: color 0.3s ease, transform 0.3s ease;
}

.arrow:hover {
  color: #000;
  transform: scale(1.15);
}

.arrow.left {
  margin-right: 20px;
}

.arrow.right {
  margin-left: 20px;

}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Globalny font Cinzel */
html, body, h1, h2, h3, h4, h5, h6, p, a, li, span, div {
    font-family: 'Cinzel', serif !important; /* !important wymusza nadpisanie innych reguł */
    color: #1A1A1A;
}

/* Opcjonalnie: różne wagi dla nagłówków i tekstu */
h1, h2, h3 {
    font-weight: 400;
}

p, a, li, span, div {
    font-weight: 400;
}

/* ========================= */
/* Sekcja Kontakt - małe litery i poprawne wyświetlanie */
#contact {
    text-align: center; /* wyśrodkowanie */
}

/* Nagłówek Kontakt */
#contact h2 {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    text-transform: none;  /* usuwa kapitalizację */
    font-variant: normal;  /* normalne litery, brak small caps */
    color: #1A1A1A;
    margin-bottom: 15px;
}

/* E-mail i Instagram - małe litery */
#contact .email-link span,
#contact .icon-instagram {
    font-family: 'Cinzel', serif;
    font-weight: 400;
    text-transform: lowercase;
    font-variant: normal; /* usuwa small caps */
    color: #1A1A1A;
}

/* Facebook - pierwsza litera duża */
#contact .icon-facebook {
    font-family: 'Cinzel', serif;
    font-weight: 400;
    text-transform: capitalize;
    font-variant: normal; /* usuwa small caps */
    color: #1A1A1A;
}

/* Linki w sekcji kontakt - zachowanie ikon i odstępów */
#contact a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
}

#contact a i,
#contact a svg {
    display: inline-block;
    vertical-align: middle;
}
/* --- Globalnie na całą stronę --- */
html, body, h1, h2, h3, h4, h5, h6, p, a, li, span, div {
    font-family: 'Cinzel', serif !important;
    color: #1A1A1A;
}

/* --- Nagłówki --- */
h1, h2, h3 {
    font-weight: 700;
}

/* --- Normalny tekst --- */
p, a, li, span, div {
    font-weight: 400;
}

/* ================= Sekcja Kontakt – wymuszamy Arial ================= */
#contact, 
#contact * {
    font-family: Arial, sans-serif !important;  /* Arial w całej sekcji */
    text-transform: none !important;            /* małe litery */
    text-align: center !important;              /* wyśrodkowanie */
    color: #1A1A1A !important;                 /* kolor taki jak reszta strony */
    font-weight: 400 !important;               /* zwykła waga */
}

/* Linki w kontakcie – Arial + wyśrodkowane */
#contact a {
    font-family: Arial, sans-serif !important;
    text-transform: none !important;
    text-decoration: none !important;
    color: #1A1A1A !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Ikony Instagram i Facebook – zachowujemy kolory */
#contact .icon-instagram i {
    color: #E1306C !important;
}

#contact .icon-facebook i {
    color: #1877F2 !important;
}

/* Hover na linkach */
#contact a:hover {
    color: gray !important;
    transform: scale(1.05);
    transition: all 0.2s ease-in-out;
}

/* E-mail */
#contact .email-link {
    font-family: Arial, sans-serif !important;
    text-transform: none !important;
    text-decoration: none !important;
    color: #1A1A1A !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#contact .email-link:hover .icon-mail {
    transform: scale(1.2) !important;
}
/* ================= Sekcja Kontakt – Arial tylko dla tekstu ================= */
#contact, 
#contact p,
#contact span,
#contact a:not(.fab) {  /* wszystko oprócz ikon Font Awesome */
    font-family: Arial, sans-serif !important;
    text-transform: none !important;    /* małe litery */
    text-align: center !important;
    color: #1A1A1A !important;
    font-weight: 400 !important;
}

/* Linki w kontakcie – Arial dla tekstu, zachowujemy ikonki */
#contact a {
    font-family: Arial, sans-serif !important;
    text-transform: none !important;
    text-decoration: none !important;
    color: #1A1A1A !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Ikony Instagram i Facebook – zostawiamy oryginalne */
#contact a .fab {
    font-family: "Font Awesome 6 Brands" !important; /* zachowanie ikon */
    font-size: 20px; /* lub dowolna wielkość ikony */
}

/* Hover na linkach – tylko skaluje ikonę */
#contact a:hover .fab {
    transform: scale(1.2);
    transition: transform 0.2s ease-in-out;
}

/* E-mail – tekst Arial, ikona pozostaje */
#contact .email-link {
    font-family: Arial, sans-serif !important;
    text-transform: none !important;
    text-decoration: none !important;
    color: #1A1A1A !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#contact .email-link:hover .icon-mail {
    transform: scale(1.2) !important;
}

/* ================= Sekcja Kontakt ================= */

/* Nagłówek sekcji – Cinzel, tak jak reszta strony */
#contact h2 {
    font-family: 'Cinzel', serif !important; /* Cinzel */
    font-weight: 700;
    text-transform: none !important;        /* normalne litery */
    color: #1A1A1A;
    text-align: center;
}

/* Linki z tekstem e-mail, Instagram, Facebook – Arial, małe litery */
#contact a:not(.fab) span,  /* tekst przy ikonach */
#contact .email-link span {
    font-family: Arial, sans-serif !important; /* Arial */
    text-transform: none !important;           /* małe litery */
    color: #1A1A1A !important;
    font-weight: 400 !important;
}

/* Linki ogólnie – wyśrodkowanie, zachowanie ikon */
#contact a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
}

/* Ikony Instagram i Facebook – zachowujemy Font Awesome */
#contact a .fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-size: 20px;
}

/* E-mail – zachowanie ikonki */
#contact .icon-mail {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

#contact .email-link:hover .icon-mail {
    transform: scale(1.2) !important;
}

/* Hover dla linków – lekko powiększa tekst i ikonę */
#contact a:hover {
    transform: scale(1.05);
    transition: all 0.2s ease-in-out;
}
/* ===== PIERWSZA SEKCJA (HERO) ===== */
#hero-section {
  position: relative;
  min-height: 90vh;
  background-image: url("images/40.jpg"); /* to samo tło co wcześniej */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* delikatne przyciemnienie */
#hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(245, 245, 245, 0.45); /* jak w Canvie */
  z-index: 0;
}

/* treść nad tłem */
.hero-content {
  position: relative;
  z-index: 1;
}

/* IMIĘ I NAZWISKO */
.hero-title {
  font-family: "Cinzel", serif;
  font-size: 64px;
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase; /* WIELKIE LITERY */
  color: #1A1A1A;
  margin-bottom: 20px;
}

/* PODTYTUŁ */
.hero-subtitle {
  font-family: "Cinzel", serif;
  font-size: 25px;
  font-weight: 400;
  text-transform: none; /* normalne litery */
  letter-spacing: 1px;
  color: #1A1A1A;
}

/* Sekcja powitalna */
#hero-intro {
  display: flex;
  justify-content: center;   /* poziome wyśrodkowanie */
  align-items: center;       /* pionowe wyśrodkowanie */
  flex-direction: column;    /* jeden element pod drugim */
  text-align: center;        /* tekst w środku */
  padding: 80px 20px;        /* odstępy od góry i dołu */
  background-color: #f5f2ee; /* dopasuj kolor tła jeśli chcesz */
}

/* Imię i nazwisko */
#hero-intro h1 {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  margin: 0;
}

/* Możesz nadać różny rozmiar literom */
#hero-intro .first-name {
  font-size: 60px;
}

#hero-intro .last-name {
  font-size: 50px;
}

/* Podtytuł */
#hero-intro .hero-subtitle {
  font-family: 'Cinzel', serif;
  font-weight: 400;
  font-size: 25px;
  margin-top: 20px;
}

/* ===== Galeria ===== */
#gallery {
  padding: 60px 20px;
  background-color: #f5f2ee;
  text-align: center;
}

#gallery h2 {
  font-family: 'Cinzel', serif;
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 40px;
  position: relative;
  color: #333;
}

#gallery h2::before,
#gallery h2::after {
  content: "";
  display: inline-block;
  width: 60px;
  height: 1px;
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0));
  margin: 0 15px;
  vertical-align: middle;
 
}

/* ===== Sekcja Opinie – zimniejszy cappuccino ===== */
.opinie-section {
  background-color: #BFB1A0; /* zimniejszy, neutralny brąz */
  padding: 15px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Nagłówek sekcji opinii */
.opinie-section h2 {
  color: #3A2F24; /* ciemny brąz dla kontrastu */
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 25px;
  margin-bottom: 40px;
  text-align: center;
}

/* Strzałki */
.arrow {
  color: #3A2F24;
}

.arrow:hover {
  color: #5A4636;
  transform: scale(1.15);
}

/* Kropki (dots) */
.dot {
  background-color: #7A654F;
}

.dot.active {
  background-color: #3A2F24;
}

/* Pojedyncza opinia */
.opinia {
  flex: 0 0 100%;
  display: flex;
  justify-content: center;
}

.opinia img {
  width: 70%;
  max-width: 380px;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}
/* Nagłówki sekcji – ogólnie */
#drawings h2,
#sculptures h2 {
  font-size: 28px; /* domyślny rozmiar na desktop */
  line-height: 1.3;
  text-align: center;
}

/* Responsywnie dla telefonów */
@media (max-width: 768px) {
  #drawings h2,
  #sculptures h2 {
    font-size: 20px; !important; /* zmniejszamy rozmiar czcionki */
    line-height: 1.2; !important; /* dopasowujemy odstęp między wierszami */
    padding: 0 10px; !important; /* trochę przestrzeni po bokach */
  }
}

/* ================= GLOBALNE RESPONSYWNE NAGŁÓWKI ================= */
@media (max-width: 768px) {
   p, h2, h3 {
    font-size: 20px !important;   /* zmniejszamy wszystkie nagłówki */
    line-height: 1.2 !important;  /* dopasowanie odstępu między wierszami */
    text-align: center !important; 
    padding: 0 10px !important;   /* trochę przestrzeni po bokach */
  }
}
/* ================= RESPONSYWNE DANE KONTAKTOWE ================= */
@media (max-width: 768px) {
  #contact a,              /* linki: email, Instagram, Facebook */
  #contact .email-link span,
  #contact .icon-instagram,
  #contact .icon-facebook {
    font-size: 14px !important;  /* zmniejszamy czcionkę */
  }

  #contact a i,             /* ikony Font Awesome */
  #contact .icon-mail {
    width: 16px !important;   /* mniejsze ikonki */
    height: 16px !important;
  }

  #contact a:hover {
    transform: scale(1.05) !important;  /* zachowujemy hover */
  }
}
/* ================= RESPONSYWNE TEKSTY W SEKCJI HOME ================= */
@media (max-width: 768px) {
  #home p,          /* jeśli tekst jest w <p> */
  #home span,        /* jeśli w <span> */
  #home .home-text { /* jeśli używasz klasy */
    font-size: 20px !important;  /* zmniejszamy na telefonie */
    line-height: 1.3 !important;
    text-align: center !important;
  }
}

@media (max-width: 768px) {

  p::before, p::after,
  #home p::before, #home p::after,
  #home span::before, #home span::after,
  h2::before, h2::after {
    display: none !important;  /* linie znikają */
  }
}

@media (max-width: 768px) {
  .pencil-img {
    width: 90%;       /* zajmuje 90% szerokości ekranu */
    max-width: 600px; /* nie większy niż na komputerze */
    height: auto;     /* proporcjonalna wysokość */
    display: block;
    margin: 20px auto; /* wyśrodkowanie i trochę odstępu */
  }
}

@media (max-width: 768px) {
  /* Ołówek w sekcji kontakt */
  .pencil-img {
    width: 90%;       /* dopasowuje się do szerokości ekranu */
    max-width: 100%;  /* nie wychodzi poza sekcję */
    height: auto;     /* proporcjonalna wysokość */
    display: block;
    margin: 20px auto; /* wyśrodkowanie */
  }

  /* Jeśli sekcja ma padding/margin powodujący wychodzenie poza obszar */
  #contact {
    overflow: hidden; /* ogranicza wszystko, co wychodzi poza sekcję */
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* Linie po bokach – tylko na komputerze */
@media (min-width: 769px) {
  #portfolio-sculptures h2::before,
  #portfolio-sculptures h2::after {
    content: "";
    display: inline-block;
    width: 60px;
    height: 1px;
    background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0));
    margin: 0 15px;
    vertical-align: middle;
  }
}

/* Na telefonie – mniejszy font i brak linii */
@media (max-width: 768px) {
  #portfolio-sculptures h2 {
    font-size: 20px;
  }
  #portfolio-sculptures h2::before,
  #portfolio-sculptures h2::after {
    content: none;
  }
}


/* ===== HERO – RESPONSYWNE POD TELEFON ===== */
@media (max-width: 768px) {
  #hero-intro h1.first-name {
    font-size: 30px; /* zamiast 60px */
  }

  #hero-intro h1.last-name {
    font-size: 26px; /* zamiast 50px */
  }

  #hero-intro p.hero-subtitle {
    font-size: 16px; /* możesz dopasować */
  }
}

body, h1, h2, h3, p, span, a , button {
 font-family: "Cinzel", serif !important;

} 

h1, h2 {

font-weight: 700;
letter-spacing: 1px;
line-height: 1.1;

}  


/* ================= FAQ ================= */

/* FAQ */
#faq {
  padding: 15px 20px;
  background-color: #f5f2ee;
  text-align: center;
}

#faq h2 {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 25px;
  margin-bottom: 40px;
  position: relative;
  color: #333;
}

#faq h2::before,
#faq h2::after {
  content: "";
  display: inline-block;
  width: 60px;
  height: 1px;
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.2), rgba(0,0,0,0));
  margin: 0 15px;
  vertical-align: middle;
}

.faq-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.faq-item {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  width: 300px;
  padding: 15px 20px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.faq-item:hover {
  transform: translateY(-5px);
}

.faq-question {
  font-family: 'Cinzel', serif !important;
  font-weight: 400 !important;
  font-size: 18px;
  text-transform: none !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-arrow {
  transition: transform 0.3s ease;
}

.faq-item.active .faq-arrow {
  transform: rotate(90deg);
}

.faq-answer {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  text-transform: lowercase;
  font-variant: normal;
  font-size: 16px;
  line-height: 1.5;
  margin-top: 12px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0;
}

.faq-item.active .faq-answer {
  max-height: 500px;
  padding-top: 10px;
}

.faq-question::after {
  content: "▸";            /* znak strzałki */
  float: right;            /* po prawej stronie pytania */
  transition: transform 0.3s ease, color 0.3s ease;
  font-size: 18px;         /* mniejsza, delikatniejsza */
  color: #666;             /* jasnoszary, delikatny */
}

.faq-item.active .faq-question::after {
  transform: rotate(90deg); /* obrót strzałki po rozwinięciu */
  color: #444;             /* trochę ciemniejsza przy aktywnej */
}

/* RESPONSYWNE */
@media (max-width: 768px) {
  .faq-container {
    flex-direction: column;
    align-items: center;
  }

  .faq-item {
    width: 90%;
  }
}

@media (max-width: 768px) {
 #faq .faq-question {
  font-size: 16px;

}

 #faq .faq-answer {
  font-size: 14px;
}

 #faq .faq-item {
  padding: 14px;

  }
}

.faq-item {
  display: flex;
  flex-direction: column;   /* pytanie nad odpowiedzią */
  justify-content: center;  /* wyśrodkowanie w pionie */
  align-items: center;      /* wyśrodkowanie w poziomie */
  text-align: center;       /* tekst wyśrodkowany */
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  position: relative;
}

.faq-question {
  width: 100%;            /* zajmuje całą szerokość prostokąta */
  text-align: center;      /* wyśrodkowanie tekstu */
  font-size: 20px;
  line-height: 1.3;
  color: #1A1A1A;
}

/* Strzałka */
.faq-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  transition: transform 0.3s ease;
}

/* Mobile - zmniejszamy czcionkę i padding */
@media (max-width: 768px) {
  .faq-item {
    padding: 15px;
  }
  .faq-question {
    font-size: 16px;
  }
  .faq-arrow {
    font-size: 16px;
    right: 15px;
  }
}

/* ===== WSPÓLNY KONTEKST GALERII ===== */
#portfolio,
#portfolio-sculptures {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== RZĘDY ===== */
.portfolio-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

/* ===== ELEMENT ===== */
.portfolio-item {
  width: 100%;
}

/* ===== WRAPPER ZDJĘCIA ===== */
.portfolio-img-wrapper {
  position: relative;
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
}

/* ===== TALL – JEDEN STANDARD DLA RYSUNKÓW I RZEŹB ===== */
.portfolio-item.tall .portfolio-img-wrapper {
  aspect-ratio: 3 / 4;
}

/* ===== WIDE – NIŻSZE, ALE SPÓJNE ===== */
.portfolio-item.wide .portfolio-img-wrapper {
  aspect-ratio: 4 / 3;
}

/* ===== OBRAZ ===== */
.portfolio-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* NIC NIE JEST UCIĘTE */
  display: block;
  transition: transform 0.4s ease;
}

/* ===== HOVER ===== */
.portfolio-img-wrapper:hover img {
  transform: scale(1.15);
}

/* ===== SPRZEDANE ===== */
.sold-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-20deg);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 14px 35px;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 6px;
  border: 2px solid #fff;
  z-index: 5;
  pointer-events: none;
  border-radius: 5px;
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .portfolio-row {
    grid-template-columns: 1fr;
  }
}

/* ===== USUNIĘCIE CZARNYCH TŁA ===== */
.portfolio-img-wrapper {
  background: transparent;
}

/* ===== ZDJĘCIA MAJĄ WYPEŁNIAĆ WRAPPER ===== */
.portfolio-img-wrapper img {
  object-fit: cover; /* wypełnia całość */
}

/* ===== LARGE – WYŚRODKOWANIE ===== */
.portfolio-item.large {
  grid-column: 1 / -1; /* zajmuje całą szerokość rzędu */
  display: flex;
  justify-content: center;
}

.portfolio-item.large .portfolio-img-wrapper {
  max-width: 50%;
}

/* ===== MOBILE – LARGE NORMALNIE ===== */
@media (max-width: 768px) {
  .portfolio-item.large .portfolio-img-wrapper {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  #portfolio {
    padding-left: 45px;
    padding-right: 45px;
  }
}

/* WIDE – powiększenie bez ucinania */
.portfolio-item.wide .portfolio-img-wrapper {
  aspect-ratio: 5 / 4;  /* było 4 / 3 */
}

/* === TALL dalej wypełnia === */
.portfolio-item.tall .portfolio-img-wrapper img {
  object-fit: cover;
}
/* ================= RYSUNKI – POPRAWNE PROPORCJE ================= */

/* rząd rysunków */
#portfolio .portfolio-row {
  display: flex;
  gap: 20px;
  justify-content: center;
}

/* TALL – węższy */
#portfolio .portfolio-item.tall {
  flex: 0 0 45%;
  max-width: 45%;
}

/* WIDE – szerszy */
#portfolio .portfolio-item.wide {
  flex: 0 0 53%;
  max-width: 53%;
}

/* obraz zawsze cały, bez ucinania */
#portfolio .portfolio-img-wrapper {
  border-radius: 20px;
  overflow: hidden;
}

#portfolio img {
  width: 100%;
  height: auto;
  display: block;
}

#portfolio .portfolio-item.wide {
  align-self: center;

}

#portfolio {
  max-width: 900px;
}

/* ===== LARGE – WIĘKSZE NA DESKTOPIE ===== */
@media (min-width: 769px) {
  .portfolio-item.large {
    flex: 0 0 70%;     /* zajmuje 70% szerokości rzędu */
    max-width: 70%;    /* ograniczenie maksymalnej szerokości */
    margin: 0 auto;    /* wyśrodkowanie */
  }
}

/* ===== ANIMACJA SCROLL ===== */
.animate {
  opacity: 0;                /* niewidoczne na start */
  transform: translateY(30px); /* lekki ruch od dołu */
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate.show {
  opacity: 1;
  transform: translateY(0);
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
  .portfolio-row {
    gap: 16px;
  }

  .portfolio-item {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .portfolio-item.large {
    max-width: 100%;
    margin: 0 auto;
  }
}

/* ===== LARGE IMAGE ONLY ===== */
.portfolio-item.large {
  flex: 0 0 70%;       /* większe na desktopie */
  max-width: 70%;      /* ograniczenie szerokości */
  margin: 0 auto;      /* wyśrodkowanie w rzędzie */
}

.portfolio-item.large .portfolio-img-wrapper img {
  width: 100%;
  height: auto;        /* zachowanie proporcji */
  display: block;
  border-radius: 20px; /* zaokrąglone rogi */
  transition: transform 0.4s ease;
}

/* Hover tylko dla large */
@media (hover: hover) {
  .portfolio-item.large .portfolio-img-wrapper:hover img {
    transform: scale(1.15);
  }
}
@media (hover: none) {
  .portfolio-item.large .portfolio-img-wrapper:active img {
    transform: scale(1.15);
  }
}

/* ===== LARGE – DESKTOP ONLY ===== */
@media (min-width: 1024px) {
  .portfolio-item.large {
    width: 70% !important;
    margin: 0 auto !important;
  }
}

/* ===== SCROLL APPEAR ===== */
.animate {
  opacity: 0;
  transform: translateY(50px);
  transition: 0.8s ease;
}

@media (min-width: 1024px) {
  .portfolio-row {
    justify-content: center;
  }

  .portfolio-item.large {
    flex: 0 0 70%;
    max-width: 70%;
  }
}
/* DESKTOP – powiększenie LARGE w rysunkach */
@media (min-width: 1024px) {
  #portfolio .portfolio-item.large {
    flex: 0 0 90%;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

.animate {
  opacity: 0;
  transform: translateY(80px);
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.animate.show {
  opacity: 1;
  transform: translateY(0);
}

.reveal-text {
  opacity: 0;
  transform: translateY(20px);
}

.reveal-text.active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s ease, transform 1s ease;
}

@media (max-width: 768px) {

  /* wszystkie rzędy – kolumna */
  .portfolio-row {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  /* element portfolio */
  .portfolio-item {
    width: 100%;
    max-width: 90%;
  }

  /* wrapper obrazka */
  .portfolio-img-wrapper {
    width: 100%;
  }

  /* obrazki */
  .portfolio-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* WIDE – też jeden pod drugim */
  .portfolio-item.wide {
    width: 100%;
    max-width: 90%;
  }

  /* TALL */
  .portfolio-item.tall {
    width: 100%;
    max-width: 90%;
  }

  /* LARGE – ładnie wyśrodkowane */
  .portfolio-item.large {
    width: 100%;
    max-width: 95%;
    margin: 0 auto;
  }

  /* mniejsze odstępy sekcji */
  #portfolio,
  #portfolio-sculptures {
    padding-left: 16px;
    padding-right: 16px;
  }
}
@media (max-width: 768px) {

  /* RYSUNKI – większe niż rzeźby */
  #portfolio .portfolio-item {
    max-width: 100%;
  }

  /* WIDE w rysunkach – jeszcze większe */
  #portfolio .portfolio-item.wide {
    max-width: 100%;
  }

}

@media (max-width: 768px) {

  /* RYSUNKI – TALL + LARGE większe */
  #portfolio .portfolio-item.tall,
  #portfolio .portfolio-item.large {
    max-width: 95%;
  }

  /* WIDE zostaje jak jest (czyli 100%) */
  #portfolio .portfolio-item.wide {
    max-width: 100%;
  }

}