html {
  scroll-behavior: smooth;
}

.section {
  margin-bottom: 40px;
}

body {
  background-color: #f7f4ed;font-family: "new-spirit", serif;
font-weight: 700;
font-style: normal;
}

.main {
  margin-top: 40px;
  margin-bottom: 90px;
  display: flex;          /* włącza flexbox */
  gap: 20px;
  justify-content: center;
  align-items: center; 
}
@media (max-width: 768px) {
  .main {
    flex-direction: column;
  }
}

.enrollment.button {
    text-decoration: none;
}

.offer-button {
  text-align: center;
    text-decoration: none;
}

.main .panel {
  flex: 1;
  max-width: 300px;
}

.parallel-panels {
  display: flex;          /* włącza flexbox */
  gap: 20px;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .parallel-panels {
    flex-direction: column;
  }
}
.about-us .panel {
  flex: 1;
  width: 50%;
}
@media (max-width: 768px) {
  .about-us .panel {
    width: 100%;
  }
}

.button {
  font-family: inherit;
  background-color: #aac1ff;   
  color: #f7f4ed;                
  padding: 10px 20px;          
  border: none;                
  border-radius: 22px;         
  cursor: pointer;
  display: inline-flex;
  align-items: center;       
  font-size: 16px;
  gap: 12px;
  margin-top: 20px;
}

.arrow {
  display: flex;
  align-items: center;
  transition: transform 0.25s ease;
}

/* LINIA */
.shaft {
  position: relative;
  width: 18px;
  height: 2px;
  background: white;
}

/* GROT – sklejony z linią */
.shaft::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: center;
}

.button:hover {
  background: #6366f1;
}

.button:hover .arrow {
  transform: translateX(6px);
}

.button:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #3730a3;
  background: #4338ca;
}

.description {
  font-family: "new-spirit", serif;
  font-weight: 700;
  font-style: normal;
  margin-top: 20px;
  color: #f77865
}

.logo {
  max-width: 300px;
  width: 100%;
  height: auto;
  display: block;
}

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

.logo-big {
  max-width: 380px;
  width: 100%;
  height: auto;
  display: block;
  margin-top: auto;
}

.logo-big img {
  width: 100%;
  height: auto;
}

.box{
  margin-top: 50px;
}

.social-preview {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}
@media (max-width: 768px) {  /* mobile */
  .social-item.fb {
    display: none;  /* ukrywa diva */
  }
}
.desktop-text { display: block; }
.mobile-text { display: none; }

/* Mobile: zamień widoczność */
@media (max-width: 768px) {
  .desktop-text { display: none; }
  .mobile-text { display: block; }
}

/* dzieci flexa */
.social-item {
  min-width: 0;
  flex: 0 0 auto;
}

/* FB lubi mieć overflow visible */
.social-item.fb {
  overflow: visible;
}

/* iframe */
.social-preview iframe {
  max-width: 100%;
}

.images.panel {
  max-width: 380px;
  width: 100%;
}

/* DESKTOP */
@media (min-width: 769px) {
  .images.panel {
    min-width: 350px;
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .social-preview {
    flex-direction: column;
  }

  .images.panel {
    max-width: 100%;
    min-width: 0;   /* 🔥 TO JEST KLUCZ */
  }
}

.cutout {
  display: inline-block;
  background: transparent;
}
.cutout {
  overflow: hidden;    /* potrzebne do zaokrąglenia rogów */
  border-radius: 30px; /* stopień zaokrąglenia */
  background: transparent;
}

.cutout img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* zachowuje proporcje i wypełnia wrapper */
  display: block;
}

.our-mission .images {
  display: flex;
  margin-top: 30px;
  gap: 24px;
  align-items: stretch; /* dopasowuje wrappery do tej samej wysokości */
}

.our-mission .images .cutout#first {
  flex: 2 1 auto; /* zajmuje więcej miejsca */
}
.our-mission .images .cutout#second {
  flex: 1 1 auto; /* zajmuje mniej miejsca */
}


/* MOBILE */
@media (max-width: 768px) {
  .our-mission .images {
    flex-direction: column;
  }
}

.photo-circle img {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.photo-circle-small img {
  width: 230px;
  height: 230px;
  border-radius: 50%;
  overflow: hidden;
}

#first-circle img{
  margin-right: auto;
}

#second-circle img{
  margin-left: auto;
}

.photo-box {
  display: flex;
}

.about-us h1 {
  color: #f77865;
}
.contact h1 {
  color: #f77865;
}
.dlaczego-warto h1 {
  color: #f77865;
}
.offer h1, .price-list h1 {
  color: #f77865;
}
.about-us h2 {
  color: #f77865;
}

.container {
  max-width: 900px;   /* szerokość layoutu */
  margin: 20px auto 0;
  padding: 0 24px; 
}


.normal-text {
  font-size: medium;
  color: #737373;
  font-family: "filson-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.header {
  position: sticky;       /* 💥 zostaje przy scrollu */
  top: 16px;              /* odstęp od góry */
  z-index: 1000;
  backdrop-filter: blur(8px);
  font-family: "filson-pro", sans-serif;
  font-weight: 700;
  font-style: normal;
  width: fit-content;    
  margin: 0 auto;
  background: #efdeb5;
  border-radius: 999px; /* 💥 magiczne zaokrąglenie */
  padding: 14px 28px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.nav {
  display: flex;
  align-items: center;
  position: relative; /* potrzebne do absolutnego pozycjonowania */
  gap:34px;
}
.nav-social {
  display: flex;
  gap: 10px; /* 👈 mniejszy odstęp tylko dla ikon */
}

.social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #737373;
}

.social-small {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: #f77865;
  text-decoration: none; /* usuwa podkreślenie linka */
}

.social-small i {
  line-height: 1;  /* usuwa dodatkową przestrzeń pod ikoną */
}

.social:hover {
  color: #000;
}

.nav a {
  text-decoration: none;
  color: #737373;
  font-weight: 500;
  /* padding: 4px 8px; */
  border-radius: 999px;
  transition: background 0.25s, color 0.25s;
}

.nav a:hover {
  color: #000;
}

.section {
  scroll-margin-top: 80px; /* wysokość navbaru + luz */
}
#about-us {
  scroll-margin-top: 80px; /* więcej luzu dla sekcji o nas */
}
#contact {
  scroll-margin-top: 100px; /* więcej luzu dla sekcji o nas */
}

#offer, .offer-big, #dlaczego-warto, #opinions {
  scroll-margin-top: 90px; /* więcej luzu dla sekcji oferta */
}

#galeria{
scroll-margin-top: 100px;
}
.who-we-are {
  text-align: center;
  margin-bottom: 100px;
}

.who-we-are h1 {
  color: #aac1ff
}
.offer-big h1 {
  color: #aac1ff
}

.hero {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 32px;
}

.hero .normal-text{
  text-align: left;
   max-width: 100%;
    min-width: 0;
    line-height: 1.6;
}

.hero .photo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
     flex: 0 0 220px; /* stała kolumna na zdjęcie */
    min-width: 220px; /* opcjonalnie – żeby tekst nie wciskał się pod zdjęcie */
}

@media (max-width: 768px) {
    .hero {
        flex-direction: column;
    }

    .photo-section {
        align-items: center;
    }
}

.name-title{
  margin-top: 15px;
  font-size: 20px;
  color: #f77865;
}

.hero-name{
  font-size: 24px;
  margin-bottom: 10px;
  color: #f77865;
}

#team{
  margin-top: 100px;
}


.offer-item {
  background-image: url("assets/images/nuty_tło.png");
  background-size: cover;        /* wypełnia całego diva */
  background-position: center;   /* wyśrodkowany */
  background-repeat: no-repeat;  /* bez powielania */
  font-family: "filson-pro", sans-serif;
  font-weight: 700;
  font-style: normal;
  background-color: #f4e1c1;
  border-radius: 49px;
  border: 2px solid #ffffff;
  padding: 20px;
  box-sizing: border-box;

  aspect-ratio: 1 / 1;
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center; /* rozpycha zawartość */
  align-items: center;
  gap: 12px;

  min-height: 0; /* ważne przy gridzie */
}

.offer-title {
    background-color: #aac1ff;
    color: #f7f4ed;
    border: 2px solid #f7f4ed;
    padding: 10px;
    font-weight: bold;
    text-align: center;
    width: 90%;
}

.offer-item button {
    font-family: "filson-pro", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    border-radius: 35px;
    transition: background-color 0.2s, transform 0.1s;
}

.offer-button {
    background-color: #f77865;
    color: #f7f4ed;
    border: none;
    border: 2px solid #f7f4ed;
    padding: 12px;
    cursor: pointer;
}

.know-more-button {
    background-color: #f7f4ed;
    color: #737373;
    border: 2px solid #dddddd;
    padding: 12px;
    cursor: pointer;
}

.know-more-button:hover {
    background-color: #e0e0e0;
}

.offer-button:hover {
    background-color: #d85748;
}

/* efekt kliknięcia - jeszcze ciemniejsze + lekkie wciśnięcie */
.offer-button:active {
    background-color: #db3d2b;
    transform: scale(0.97);
}

.know-more-button:active {
    background-color: #cfcfcf;
    transform: scale(0.97);
}

.offer-button,
.know-more-button {
    width: 90%;
    margin: 0 auto;
}

.offer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 50px;
    margin-bottom: 60px;
}

/* MOBILE */
@media (max-width: 900px) {
  .offer-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 30px; /* opcjonalnie mniejszy odstęp na małych ekranach */
  }
}

.offer-big {
    text-align: center;
    margin-top: 160px;
  margin-top: 20px;
  margin-bottom: 150px;
}

.blue-box {
  background-color: #aac1ff;
  border-radius: 35px;
  font-family: "filson-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #737373;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  text-align: left; 
  padding-left: 30px;
  padding-right: 30px;
}

#warsztaty-offer .main-list,
#specjalne-offer .main-list
{
    padding-top: 0px;
}

.main-list {
    list-style-type: disc; /* styl punktów */
    padding-top: 20px;
  }

.main-list li {
  margin-bottom: 12px; /* odstęp między punktami */
}


.offer-big a{
  text-decoration: none;
  color: inherit;
}

.offer-big a:hover{
  text-decoration: underline;
}

.offer-big a:active{
  color: inherit;
}

.offer-big a:visited{
  color: inherit;
}

.offer-big h3{
  margin-bottom: 0px;
}

.minor-list {
    padding-top: 0px;
    margin-top: 0px;
}

.orange-text{
  color: #d85d4d;
}


.contact-card {
  flex: 1;                  /* wypełnia dostępną wysokość left-section */
  font-size: 18px;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}

#contact .contact-card {
  text-align: left;
}

.left-section {
  width: 50%;               /* zajmuje połowę szerokości */
  display: flex;
  flex-direction: column;
  gap: 70px;                /* odstęp między blue-box a małym obrazkiem */
  box-sizing: border-box;
}

.img-small {
  width: 100%;           
  overflow: hidden;
  border-radius: 35px;
}

.img-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;     
  object-position: center top; 
  display: block;
  border-radius: 8px;    
}

.bottom-section {
  margin-top: 40px;
  display: flex;            /* dwie kolumny obok siebie */
  gap: 60px;                /* odstęp między lewą a prawą kolumną */
  align-items: stretch;     /* kolumny będą tej samej wysokości */
}

.right-section {
  width: 50%;       
  display: flex;
  justify-content: flex-end; /* obrazek przy prawej krawędzi */
  align-items: stretch;      /* wypełnia całą wysokość bottom-section */
}

#warsztaty-offer .img-big{
  margin-top: 30px;
}

.img-big {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 35px;
}

.img-big img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* wypełnia prostokąt, proporcje zachowane */
  object-position: center;  /* można zmienić np. center top, jeśli chcesz przyciąć górę */
  display: block;
}

#bawialnie-offer .minor-list{
  padding-bottom: 30px;
}
#warsztaty-offer .blue-box{
  padding-bottom: 20px;
  padding-top: 20px;
}
#specjalne-offer .blue-box{
  padding-bottom: 20px;
  padding-top: 20px;
}

#firmy-offer .main-list{
  padding-bottom: 20px;
}

#firmy-offer .contact-card{
}

#firmy-offer h3{
  padding-top: 0px;
  margin-top: 0px;
}

.price-list{
  position: relative;
  padding-top: 40px;
  padding-bottom: 40px;
  z-index: 1;
}

.price-list::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: #aac1ff; /* kolor tła */
  z-index: -1;
}

.price-list .blue-box{
  background-color: #f7f4ed;
  color: #737373;
}

.price-list .main-list li{
  margin-bottom: 0px;
  margin-top: 15px;
}

.price-list-details{
  padding-bottom: 30px;
  margin-bottom: 30px;
}

.important-note{
  text-align: center;
  font-size: 14px;
  padding: 10px;
  padding-left: 13px;
  padding-right: 13px;
}

.price-list h1{
  margin-top: 0px;
}



.columns {
  display: flex;
  gap: 30px; /* odstęp między kolumnami */
  margin-top: 40px;
}

.column {
  flex: 1; /* każda kolumna zajmuje tyle samo miejsca */
  background: #f5f5f5;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.column-image {
  width: 100%;          /* szerokość = szerokość kolumny */
  aspect-ratio: 1 / 1;  /* wymusza kwadrat */
  object-fit: cover;    /* wypełnia bez rozciągania */
  border-radius: 20px;  /* zaokrąglone rogi */
  display: block;
  margin-bottom: 15px;
}

.column-icon {
    width: 120px; /* Ustaw dowolną wielkość, np. 40px, 80px */
    height: auto; /* To gwarantuje zachowanie proporcji */
    display: block; /* Eliminuje zbędne odstępy pod obrazkiem */
    margin: 0 auto 15px; /* Centruje ikonę i dodaje odstęp od tekstu */
}

.warto-box{
  text-align: left;
}

.opinions{
  position: relative;
  padding-top: 40px;
  padding-bottom: 40px;
  z-index: 1;
}

.opinions::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: #aac1ff; /* kolor tła */
  z-index: -1;
}

.opinions h1{
  color: #f7f4ed;
  margin-bottom: 0px;
}
.opinions h3{
  margin-top: 2px;
  font-family: "filson-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #f7f4ed;
}

.opinions-buttons {
    display: flex;
    flex-direction: column;
    align-items: center; /* wyśrodkowanie w poziomie */
    text-align: center;
}

.opinions-buttons a {
    background: transparent;      /* puste w środku */
    border: 6px solid #f7f4ed;       /* obramowanie */
    padding: 12px 24px;
    margin: 8px 0;                /* odstęp góra–dół zamiast na boki */
    font-size: 16px;
    cursor: pointer;
    border-radius: 222px;
    width: 220px;                 /* opcjonalnie – równa szerokość */
    transition: 0.2s; 
    font-family: "filson-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #f7f4ed;   display: flex;
  justify-content: center;
  align-items: center;
    text-decoration: none;      /* kluczowe */
  display: flex;       /* żeby zachowywało się jak button */
} 

.opinions-buttons a:hover {
    background: #f7f4ed;
    color: #aac1ff;
}

#galeria h1{
  color: #f77865;
}
#galeria h2{
  color: #737373;
  margin-bottom: 0px;
}
#galeria h3{
  margin-top: 4px;
  font-family: "filson-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #737373;
}
.left-side h1{
  font-family: "new-spirit", serif;
  font-weight: 700;
  font-style: normal;
  color: #f77865;
} 

.nav-social i {
  font-size: 24px; /* zmień np. na 24 / 32 / 36 */
}

#galeria .social {
    font-size: 40px;      /* WIELKOŚĆ IKONY */
    color: #ff7a00;       /* pomarańcz */
    margin-right: 12px;
    margin-bottom: 50px;
    transition: 0.2s;
    display: inline-flex;   /* albo inline-block */
    text-decoration: none;
    border: none;
}

#galeria .social:hover {
    color: #f77865;       /* ciemniejszy pomarańcz po najechaniu */
    transform: scale(1.1);
}


.zobacz-tekst{
  text-align: center;
}

.instagram-box{
  padding-top: 0px;
  padding-bottom: 20px;
  display: flex;
  gap: 30px;              /* odstęp między okienkami */
  justify-content: center;
  flex-wrap: wrap;
}

.instagram-box .social-item.ig {
    flex: 1 1 300px;        /* mogą rosnąć i maleć */
    max-width: 400px;       /* żeby nie były gigantyczne */
}

.instagram-box .social-item.ig .instagram-media {
    min-width: 0 !important;     /* łamiemy ograniczenie Instagrama */
    width: 100% !important;      /* dopasuj do rodzica */
    max-width: 100% !important;
}

.gallery-box{
  margin-top: 40px;
  padding: 30px;
}

.gallery {
  display: grid;
  grid-template-columns: 1fr 2fr; /* 1/3 + 2/3 */
  grid-template-rows: auto auto;  /* 2 rzędy */
  gap: 16px; /* odstępy między zdjęciami */
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* żeby ładnie wypełniały kafelki */
  display: block;
  border-radius: 12px; /* opcjonalnie, żeby było bardziej sexy */
}

@media (max-width: 768px) {
  .gallery {
    grid-template-columns: 1fr;
  }
}

.contact-text{
  margin-top:30px;
  margin-bottom: 30px;
}

.left-side, .left-side .contact-card {
  font-size:medium;
}

.left-side {
  display: flex;
  flex-direction: column;
}

.contact-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px;
  border-radius: 16px;
  border: #aac1ff 2px solid;
  background: transparent;
  font-family: "filson-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #3f75a7;
}

.contact-form h2 {
  margin-top: 0px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
}

.form-group label,
.label-title {
  margin-bottom: 6px;
  font-weight: 600;
}

input,
textarea {
  padding: 12px;
  border-radius: 6px;
  border: 2px solid #aac1ff;
  font-size: 16px;
  transition: border 0.2s, box-shadow 0.2s;
  background: transparent;
}

input:focus,
textarea:focus {
  border-color: #888;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

/* kafelki wyboru */
.options {
  display: flex;
  flex-direction: column; /* 👈 jeden pod drugim */
}

.option-tile {
  position: relative;
  cursor: pointer;
}

.option-tile input {
  position: absolute;
  opacity: 0;
}

.option-tile span {
  display: flex;
  align-items: center;
  justify-content: left;
  padding:10px;
  border-radius: 6px;
  background: #dce0ec;
  font-size: small;
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.option-tile:hover span {
  background-color: #aac1ff;
}

.option-tile input:checked + span {
  border-color: #000;
  background: #8ea5e3;
  font-weight: 600;
}

/* przycisk */
.submit-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 22px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  background: #8ea5e3;
  color: #3f75a7;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.submit-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

.contact-view{
  display: flex;
  gap: 0px; /* odstęp między kolumnami */
}

.contact-view > div {
  flex: 1; /* każdy zajmuje po 50% */
}

.contact{
  margin-top: 100px;
}

.form-message{
  margin-top: 14px;
}


@media (max-width: 900px) {
  .header {
    width: 100%;              /* pełna szerokość ekranu */
    display: none;
    justify-content: center;  /* kapsułka w środku */
    position: relative;       /* punkt odniesienia dla hamburgera */
  }

  .nav {
    display: flex;
    gap: 34px;
    position: relative;
  }


  .nav > a {
    display: none;
  }

  
  .header .nav-social{
    display: none;
  }

  .nav.open {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 60px;
    gap: 16px;
  }
}

.mobile-header{
  display: none;
}

.mobile-only{
  display: none;
}

.offer-text {
  position: relative;
}

@media (max-width: 900px) {

  .mobile-header{
    display: block;
  }
  .desktop-header{
    display: none;
  }

  .mobile-only{
    display: block;
  }
  .desktop-only{
    display: none;
  }

  .hero {
      display: block;
      grid-template-columns: 1fr; /* jedna kolumna */
      gap: 32px;
  }

  .hero .photo-section {
      margin-bottom: 30px;
  }

  .columns {
    display: block;
  }
  .mobile-grid {
    display: grid; /* 🔥 zmiana z flex na grid */
    grid-template-columns: repeat(2, 1fr); /* 2 kolumny */
    gap: 10px;
  }
  .mobile-grid .column {
    padding: 8px;          /* 🔥 MNIEJ paddingu = WIĘCEJ obrazka */
  }

  .mobile-grid .column-image {
    border-radius: 16px;
  }

  .column-image {
    border-radius: 16px;
  }

  .warto-box h3 {
    font-size: 14px; /* mniejszy tekst pod obrazkiem */
  }
  .contact-view {
    flex-direction: column; /* ustawia jeden pod drugim */
  }

  .left-side {
    order: 2; /* 🔥 idzie na dół */
  }

  .right-side {
    order: 1; /* 🔥 idzie na górę */
  }

  .contact-text{
    margin-top:15px;
    margin-bottom: 15px;
  }

  .contact .logo-big {
    margin-top: 30px;
    margin-bottom: 30px;
}

  .contact > .contact-view .social-small {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-right: 35px;
    margin-left: 10px;
}
  .contact > .contact-view .social-small i {
    font-size: 45px;
}

  .section {
    scroll-margin-top: 20px; /* wysokość navbaru + luz */
  }
  #about-us {
    scroll-margin-top: 20px; /* więcej luzu dla sekcji o nas */
  }
  #contact {
    scroll-margin-top: 20px; /* więcej luzu dla sekcji o nas */
  }

  #offer, .offer-big, #dlaczego-warto, #opinions {
    scroll-margin-top: 20px; /* więcej luzu dla sekcji oferta */
  }

  #galeria{
  scroll-margin-top: 20px;
  }

  .offer-big > .blue-box{
    padding-left: 0px;
    padding-right: 0px;
  }

  .offer-text::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: #aac1ff; /* kolor tła */
    z-index: -1;
  }

  .bottom-section{
    position: relative;
  }

  .bottom-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: #aac1ff; /* kolor tła */
    z-index: -1;
  }


.left-section {
  width: 100%;               /* zajmuje połowę szerokości */
  display: block;
}

.price-list-details{
  padding-left: 0px;
  padding-right: 0px;
}
}

.mobile-only-header {
  display: none; /* na wszelki wypadek */
}

@media (max-width: 900px) {
.option-tile:hover span {
  background-color: #dce0ec;
}

  .mobile-only-header {
    display: flex;
    justify-content: flex-end; /* 🔥 na maxa w prawo */
    align-items: center;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
  }

  body {
    padding-top: 72px; /* żeby treść nie wchodziła pod pasek */
  }

  .parallel-panels{
    gap: 25px;
  }

  .main-list li {
    margin-bottom: 0px; /* odstęp między punktami */
  }
}

.hamburger {
  width: 55px;
  height: 55px;
  position: relative;
  background: #f77865;
  border: none;
  border-radius: 50%;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  justify-content: center; /* centrowanie pionowe */
  align-items: center;     /* centrowanie poziome */

  margin: 30px;
  padding: 0;
  z-index: 10001;
  transition: background 0.3s;
}

.hamburger span {
  display: block;
  width: 26px; /* 🔹 trochę szersze, żeby X się zmieściło */
  height: 3px;
  background: #fff;
  border-radius: 2px;
  margin: 4px 0; /* równe odstępy */
  transition: 0.3s;
  transform-origin: center;
}

/* Animacja w X */
.hamburger.active span:nth-child(1) {
  transform: translateY(11px) rotate(45deg);  /* przesuwa w dół i obraca */
}

.hamburger.active span:nth-child(2) {
  opacity: 0;  /* środkowa linia znika */
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-11px) rotate(-45deg); /* przesuwa w górę i obraca */
}

.mobile-nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100px;
  height: 100vh;
  background: #f7f4ed;
  box-shadow: -8px 0 24px rgba(0,0,0,0.15);

  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 100px 24px 40px;

  transition: right 0.35s ease;
  z-index: 9999;
}

.mobile-nav.open {
  right: 0;
}

.mobile-nav a {
  text-decoration: none;
  color: #333;
  font-size: 18px;
}


.photo-cuatro-circle {
  position: relative;
  width: 260px;   /* kontroluje całą szerokość układu */
  height: 360px;  /* wysokość „zygzakowania” */
}

.photo-cuatro-circle img {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
}

/* 1 */
.photo-cuatro-circle img:nth-child(1) {
  top: 0;
  left: 0;
  z-index: 1;
}

/* 2 – przykrywa 1 z prawej-dolnej */
.photo-cuatro-circle img:nth-child(2) {
  top: 60px;
  left: 90px;
  z-index: 2;
}

/* 3 – przykrywa 2 z lewej-dolnej */
.photo-cuatro-circle img:nth-child(3) {
  top: 130px;
  left: 0;
  z-index: 3;
}

/* 4 – znowu prawa-dół */
.photo-cuatro-circle img:nth-child(4) {
  top: 190px;
  left: 90px;
  z-index: 4;
}

.who-we-are > .hero > .normal-text > h1 {
  font-family: "new-spirit", serif;
  font-weight: 700;
  font-style: normal;
}

.contact{
  margin-bottom: 60px;
}