@font-face {
  font-family: 'HeaderFont';
  src: url('assets/fonts/NewSpiritBold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'NormalTextFont';
  src: url('assets/fonts/FilsonProRegular.otf') format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'NormalTextBoldFont';
  src: url('assets/fonts/FilsonProBold.otf') format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'MediumFont';
  src: url('assets/fonts/fonnts.com-New-Spirit-Semi-Bold.otf') format('opentype');
  font-display: swap;
}


html {
  scroll-behavior: smooth;
}

.section {
  margin-bottom: 40px;
}

body {
  background-color: #f7f4ed;
  font-family: 'HeaderFont', sans-serif;
}

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

.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: white;                
  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: MediumFont, sans-serif;
  margin-top: 20px;
  color: #f77865
}

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

.logo 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;
}
.offer 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: 'NormalTextFont', sans-serif;
}

.header {
  position: sticky;       /* 💥 zostaje przy scrollu */
  top: 16px;              /* odstęp od góry */
  z-index: 1000;
  backdrop-filter: blur(8px);

  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;
  gap:34px;
}
.nav-social {
  display: flex;
  gap: 2px; /* 👈 mniejszy odstęp tylko dla ikon */
}

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

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

#offer {
  scroll-margin-top: 80px; /* więcej luzu dla sekcji oferta */
}

.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 {
    font-family: 'NormalTextBoldFont', sans-serif;
    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: 'NormalTextBoldFont', sans-serif;
    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;
}

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

.blue-box {
  background-color: #aac1ff;
  border-radius: 35px;
  font-family: 'NormalTextFont', sans-serif;
  color: #737373;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  text-align: left; 
  padding-left: 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%;
}

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

.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{
  padding-left: 20px;
  padding-top: 14px;
}

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