.elementor-300 .elementor-element.elementor-element-7bf5000 > .elementor-container{max-width:1200px;}/* Start custom CSS for html, class: .elementor-element-585086f *//* --- O MNIE I O BLOGU: ULTRA-MINIMALIZM --- */
.about-minimal-section {
  padding: 60px 0; 
  background-color: #ffffff;
  font-family: 'Montserrat', sans-serif;
}

.section-container {
  max-width: 1100px; 
  margin: 0 auto;
  padding: 0 20px; 
}

/* Układ pionowy sekcji (odstęp między O MNIE a O BLOGU) */
.about-stack {
  display: flex;
  flex-direction: column;
  gap: 70px; 
}

/* Kontener dla bloków */
.about-section-block {
  width: 100%;
}

/* Nagłówki sekcji */
.section-title {
  text-align: left;
  font-size: 15px; 
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #888888;
  margin-bottom: 30px;
}

/* Układ Flexbox: Zdjęcie + Tekst obok */
.about-intro-wrapper {
  display: flex;
  gap: 30px; /* Odstęp między zdjęciem a tekstem */
  align-items: flex-start;
  margin-bottom: 25px; /* Odstęp przed ostatnim akapitem */
}

/* ZMINIMALIZOWANE ZAOKRĄGLENIE ZDJĘCIA AWARATA */
.avatar-plain {
    border-radius: 8px !important;
  width: 220px; /* Szerokość dostosowana do proporcji ze zrzutu */
  height: auto;
  object-fit: cover;
  flex-shrink: 0; 
  border-radius: 4px; /* DODANO: Zminimalizowane zaokrąglenie tutaj */
}

/* Tekst po prawej stronie zdjęcia */
.about-intro-text {
  flex: 1; 
}

/* Wspólne style dla akapitów */
.about-section-block p, 
.about-intro-text p {
  color: #555555;
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.7; 
  font-weight: 400;
}

/* Odstępy dla akapitu poniżej bloku ze zdjęciem */
.full-width-text {
  margin-top: 10px;
}

.about-section-block p strong, 
.about-intro-text p strong {
  color: #222222;
  font-weight: 600;
}

/* Ogólny styl dla wyróżnionych bloków */
.minimal-highlight {
  font-size: 16px;
  color: #3f6b5c; /* Zmieniony kolor zielony */
  margin-top: 25px;
  margin-bottom: 25px; 
  font-weight: 500;
  padding-left: 15px;
  line-height: 1.5;
}

/* Miedziana linia po lewej stronie */
.copper-line {
  border-left: 2px solid #c87a54; 
}

/* Wyróżnienie z zielonym tekstem */
.green-highlight {
  color: #3f6b5c; /* Zmieniony kolor zielony */
}

/* --- ZDJĘCIE NA DOLE --- */
.about-bottom-image {
  width: 100%;
  margin-top: 10px;
}

.bottom-full-image {
  width: 100%;
  height: auto;
   border-radius: 10px !important;
  object-fit: cover;
  display: block;
  border-radius: 8px; /* Zaokrąglenie rogów zmienione na 8px */
}

/* --- RESPONSIVE (Telefony i tablety) --- */
@media (max-width: 768px) {
  .about-intro-wrapper {
    flex-direction: column; /* Na telefonach zdjęcie wędruje nad tekst */
    align-items: flex-start; 
    gap: 20px;
  }
  .avatar-plain {
    width: 180px; /* Nieco mniejsze zdjęcie na telefonie */
  }
  .about-bottom-image {
    margin-top: 0;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3ab8648 *//* --- GŁÓWNY KONTENER HERO --- */
.custom-hero-section {
  position: relative;
  width: 100%;
  height: 70vh; /* Zmień wysokość według preferencji, np. 500px, 80vh, 100vh */
  
  /* TUTAJ WKLEJ LINK DO SWOJEGO ZDJĘCIA */
  background-image: url('http://wlasnymtempem.pl/wp-content/uploads/2026/04/hero-2-1.png'); 
  
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* Ustawienia Flexbox do wyśrodkowania ewentualnego tekstu */
  display: flex;
  align-items: center; 
  justify-content: center;
  overflow: hidden; /* Zapobiega wychodzeniu fali poza kontener */
}

/* --- USTAWIENIA KONTENERA FALI --- */
.hero-top-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  pointer-events: none; /* Kliknięcia przechodzą przez falę do tła */
}

/* --- STYLIZACJA SAMEGO KODU SVG (FALI) --- */
.hero-top-wave svg {
  display: block;
  width: calc(100% + 1.3px); /* Unika mikroskopijnych szpar na niektórych ekranach */
  height: 40px; /* Określa, jak wysoka/głęboka ma być fala */
}

/* --- KOLOR FALI --- */
.hero-top-wave .shape-fill {
  fill: #ffffff; /* Biały kolor fali - upewnij się, że sekcja nad Hero ma ten sam kolor */
}

/* --- STYLIZACJA ZAWARTOŚCI (opcjonalnie) --- */
.hero-content {
  position: relative;
  z-index: 1; /* Upewnia się, że tekst jest nad falą i tłem */
  text-align: center;
  color: #ffffff;
}

/* Responsywność dla telefonów (opcjonalnie spłyca falę na mniejszych ekranach) */
@media (max-width: 768px) {
  .hero-top-wave svg {
    height: 20px;
  }
}/* End custom CSS */