html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: Arial, sans-serif;
  color:black;
  display: flex;
 flex-direction: column;
   background: linear-gradient(to right, #0cc0df, #ffd54f);
}
h1 {
  text-align: center;
}

.content {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}
.color{
  background: linear-gradient(to right, #0cc0df, #ffd54f);
}
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: linear-gradient(to right, #0cc0df, #ffd54f);
    color: white;
  /*  padding: 10px 20px;*/
}

.logo-container {
    flex: 1; /* Logo zajmuje około 1/3 szerokości */
    max-width: 33.333%; /* Ogranicza szerokość do 1/3 kontenera */
}

.menu-container {
    flex: 2; /* Menu zajmuje pozostałe 2/3 szerokości */
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.menu {
    display: flex;
    width: 100%; /* Rozciąga menu na całą dostępną szerokość */
    justify-content: space-around; /* Rozkłada elementy menu równomiernie */
    list-style-type: none; /* Usuwa punktory */
    padding: 0; /* Usuwa domyślne paddingi */
    margin: 0; /* Usuwa domyślne marginesy */
    font-size: 25px;
}

.menu li {
    flex-grow: 1; /* Sprawia, że wszystkie elementy li rozciągają się, aby wypełnić dostępną przestrzeń */
    text-align: center; /* Centruje tekst w li */
}

.menu li a {
    color: white; /* Ustawia kolor tekstu menu na biały */
    font-weight: bold; /* Pogrubia tekst */
    padding: 10px 0; /* Dodaje odstępy dookoła linków */
    text-decoration: none; /* Usuwa podkreślenia z linków */
    display: block; /* Rozciąga linki, aby wypełniły całe li */
}

/* Media query dla mniejszych ekranów, aby menu było nadal widoczne */
@media (max-width: 992px) {
    .menu-container {
        justify-content: center;
    }
}


.category-posts-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 20px;
}

.category-menu {
    flex-basis: 100%;
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

.category-menu a {
    background-color: #0cc0df; /* kolor tła */
    border-radius: 20px; /* zaokrąglenie krawędzi */
    color: white; /* kolor tekstu */
    padding: 10px 20px; /* padding wokół tekstu */
    text-decoration: none; /* usuwa podkreślenie */
    font-weight: bold; /* pogrubienie tekstu */
}

.category-filter {
    background-color: white; /* Zielone tło, dostosuj do potrzebnego koloru */
    border: none; /* Usuwa obramowanie */
    border-radius: 50px; /* Zaokrągla rogi */
    color: black; /* Ustawia kolor tekstu na biały */
    padding: 10px 20px; /* Dodaje wewnętrzny odstęp */
    text-transform: uppercase; /* Tekst wielkimi literami */
    font-weight: bold; /* Pogrubienie tekstu */
    cursor: pointer; /* Kursor zmienia się na pointer, gdy najedziesz myszką */
    transition: background-color 0.3s ease; /* Animacja zmiany koloru tła */
}
.category-filter.active {
      background-color: #5C7F2E;
}

.category-filter:hover {
    background-color: #5C7F2E; /* Zmienia kolor tła przycisku przy najechaniu, dostosuj do potrzebnego koloru */
}

.posts-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Wyśrodkowuje elementy flex w kontenerze */
    align-items: flex-start; /* Opcjonalnie, wyrównuje elementy do góry w przypadku różnych wysokości */
    width: 100%;
    margin: auto; /* Dodatkowo, może być potrzebne do wyśrodkowania jeśli kontener nie jest flex */
    gap: 40px; /* Opcjonalnie, dodaje odstępy pomiędzy elementami */
}

.post-item {
    width: calc(28.333%); /* trzy kolumny z marginesem */
    margin-bottom: 20px; /* margines na dole */
    background-color: white; /* kolor tła */
    border-radius: 20px; /* zaokrąglenie krawędzi */
    overflow: hidden; /* ukrywa nadmiar treści */
    padding:20px;
}

.post-thumbnail {

    display: flex; /* Umożliwia wyśrodkowanie obrazka wewnątrz kontenera */
    justify-content: center; /* Wyśrodkowuje obrazek w poziomie */
    align-items: center; /* Wyśrodkowuje obrazek w pionie */
    overflow: hidden; /* Zapobiega wylewaniu się obrazka poza zaokrąglone rogi */
    position: relative;
  /*  margin-top: 20px;*/

}



.post-thumbnail img {
    display: block; /* Usuwa domyślne marginesy i pozwala na wyśrodkowanie */
    max-width: 100%; /* Zapobiega rozciągnięciu obrazka poza szerokość kontenera */
    max-height: 100%; /* Zapobiega rozciągnięciu obrazka poza wysokość kontenera */
    border-radius: 20px; /* Zaokrągla rogi obrazka */
    width: 250px; /* Stała szerokość */
    height: 250px; /* Stała wysokość */
}

.post-info {
    padding: 15px;
    text-align: center;
}

.post-category {
    background-color: #8ac641; /* kolor tła */
    border-radius: 20px; /* zaokrąglenie krawędzi */
    display: inline-block;
    padding: 5px 15px; /* padding wokół tekstu */
    margin-bottom: 10px; /* margines na dole */
    color: white; /* kolor tekstu */
}

.post-category-overlay {
    position: absolute; /* Pozycjonuje tekst kategorii względem rodzica */
    bottom: 10px; /* Umieszcza tekst na dole obrazka */
    left: 0; /* Wyrównuje tekst do lewej strony obrazka */
    background-color: #8ac641; /* kolor tła */
    text-align: center; /* Wyśrodkowanie tekstu */
    padding: 10px 0; /* Dodanie paddingu góra/dół */
    border-radius: 20px; /* zaokrąglenie krawędzi */
    color: white; /* Ustawia kolor tekstu na biały */
    padding: 0px 10px; /* Dodaje wewnętrzny odstęp */
    text-transform: uppercase; /* Tekst wielkimi literami */
    font-weight: bold; /* Pogrubienie tekstu */
      text-decoration: none; /* usuwa podkreślenie */
      margin-left:40px;
}

.post-category-overlay a{

    color: white; /* Ustawia kolor tekstu na biały */

    text-transform: uppercase; /* Tekst wielkimi literami */
    font-weight: bold; /* Pogrubienie tekstu */
      text-decoration: none; /* usuwa podkreślenie */
      font-size:10px;
}

.post-title {
    font-size: 1.2em; /* rozmiar czcionki */
    /* margin-bottom: 50px;  margines na dole */
    color: black; /* Ustawia kolor tekstu na biały */
    text-transform: uppercase; /* Tekst wielkimi literami */
    font-weight: bold; /* Pogrubienie tekstu */
    text-decoration: none; /* usuwa podkreślenie */
    min-height: 150px;

}

.read-more {
    background-color: #8ac641; /* kolor tła */
    color: white; /* kolor tekstu */
    text-decoration: none; /* usuwa podkreślenie */
    padding: 10px 20px; /* padding wokół tekstu */
    border-radius: 20px; /* zaokrąglenie krawędzi */
}

/* Odpowiednie media queries dla mniejszych ekranów */
@media (max-width: 991px) {
    .post-item {
        width: calc(50% - 20px); /* dwie kolumny z marginesem */
    }
}

@media (max-width: 767px) {
    .post-item {
        width: 100%; /* jedna kolumna */
    }
}

.container-fluid{
  background-color: #0cc0df; /* kolor tła */
}




.wp-block-columns.is-layout-flex {
    display: flex; /* Włącza flexbox dla kontenera */
    justify-content: space-between; /* Rozdziela przestrzeń równomiernie między elementami */
}

.wp-block-column.is-layout-flow {
    flex: 1; /* Każda kolumna zajmuje równą część dostępnej przestrzeni */
  /*  padding: 0 15px;  Dodaje trochę paddingu do każdej kolumny, dla lepszego wyglądu */
}
.biale_pole{
  background-color: white; /* Białe tło */
   border-radius: 15px; /* Zaokrąglenie rogów */
   padding: 20px; /* Odstępy wewnątrz kontenera */
   margin: auto; /* Centrowanie kontenera jeśli jest potrzebne */
   max-width: 800px; /* Maksymalna szerokość kontenera */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lekki cień dla efektu głębi */
   margin-left:10px;
}

.aligncenter {
    display: block; /* Blokowe wyświetlanie elementu */
    margin-left: auto; /* Automatyczny margines z lewej strony */
    margin-right: auto; /* Automatyczny margines z prawej strony */
    text-align: center;

    /* Jeśli zawartość to obrazek, możesz dodać text-align: center; do nadrzędnego kontenera */
}
.alignright {
    display: block; /* Blokowe wyświetlanie elementu */
    margin-left: auto; /* Automatyczny margines z lewej strony */
    margin-right: auto; /* Automatyczny margines z prawej strony */
    text-align: right;

    /* Jeśli zawartość to obrazek, możesz dodać text-align: center; do nadrzędnego kontenera */
}

.alignleft {
    display: block; /* Blokowe wyświetlanie elementu */
    margin-left: auto; /* Automatyczny margines z lewej strony */
    margin-right: auto; /* Automatyczny margines z prawej strony */
    text-align: left;

    /* Jeśli zawartość to obrazek, możesz dodać text-align: center; do nadrzędnego kontenera */
}

.size-full {
    width: 100%; /* Szerokość elementu na 100% kontenera nadrzędnego */
}

.is-resized {
    /* Tutaj możesz dodać stylowanie dotyczące zmiany rozmiaru, jeśli jest potrzebne */
}

.background-container-home {
    width: 100%; /* Szerokość kontenera; dostosuj według potrzeb */
  /*  height: 500px;  Wysokość kontenera; dostosuj według potrzeb */
    background-image: url('../img/bg_home1.png'); /* Ścieżka do twojego obrazu tła */
    background-repeat: repeat-x; /* Powtarzanie obrazu tylko w poziomie */
    background-position: top; /* Pozycjonowanie tła na górze kontenera */
    display:flex;
}
.chemistry{
  margin-left:60%;
  margin-top:15%;
  position:absolute;
}
.is-style-rounded img {
    border-radius: 35px; /* Zmienia rozmiar zaokrąglenia rogów */
    overflow: hidden; /* Zapobiega wystawaniu zawartości poza zaokrąglone rogi */
}
.page-numbers
{
  color:white;
  display: inline-block; /* Wyświetla linki jeden obok drugiego */
  margin: 0 5px; /* Dodaje odstępy między linkami */
}
.nav-links {
  text-align: center; /* Wyśrodkowanie linków paginacji */
  width: 100%;
}

/* Opcjonalnie, styl dla aktywnej strony (jeśli istnieje klasa dla aktywnych linków) */
.page-numbers.current {
  font-weight: bold;
  color:black;
  /* Inne style dla wyróżnienia, np. kolor tła */
}

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

    .logo-container, .menu-container {
        width: 100%;
        justify-content: center;
        padding: 10px 0;
    }

    .menu {
        flex-direction: column;
    }

    .menu li {
        padding: 5px 0;
    }
}

@media (max-width: 768px) {
    .post-item, .category-menu a, .category-filter {
        width: 100%; /* Pełna szerokość na mniejszych ekranach */
        margin-bottom: 15px;
        padding: 10px;
    }

    .post-title, .post-info {
        font-size: smaller; /* Mniejszy tekst na urządzeniach mobilnych */
    }
}


video, img {
    max-width: 100%;
    height: auto;
}
.container-fluid, .category-posts-container, .posts-grid {
    padding: 0 15px; /* Dodaje padding, aby uniknąć przyklejenia treści do krawędzi ekranu */
}

@media (max-width: 768px) {
    .background-container-home, .chemistry {
        height: auto; /* Dostosowuje wysokość dla mobilnych */
      /*  margin: 0 auto;*/
        text-align: center;


    }

    .chemistry img {
        width: 100%; /* Dostosowuje obrazy do szerokości ekranu */
        max-width: 300px; /* Maksymalna szerokość obrazu */
          padding:20px;
    }
}

@media (max-width: 768px) {
    .category-menu a, .category-filter, .read-more {
        padding: 15px 25px;
        font-size: larger; /* Większy tekst dla lepszej czytelności */
    }
}

.hamburger-menu {
    display: none; /* Domyślnie ukryta na większych ekranach */
    cursor: pointer;
    padding: 10px;
}

.hamburger-menu span {
    display: block;
    height: 2px;
    background-color: #fff; /* Dostosuj kolor do swojego designu */
    margin: 5px 0;
    transition: 0.4s;
    width:25px;
}

/* Media query dla urządzeń mobilnych */
@media (max-width: 992px) {
    .hamburger-menu {
        display: block;
    }

    .menu-container {
        display: none;
        position: absolute;
        right: 0;
        top: 60px; /* Dostosuj wysokość, w zależności od wysokości twojego nagłówka */
        background-color: #333; /* Dostosuj kolor tła menu */
        width: 100%;
        text-align: left;
    }

    .menu-container.active {
        display: block;
        z-index: 2;
    }
}

.contact_mail_text
{
  height:100px;
  padding-top:30px;
  border-radius:30px;
  text-align:center;
}
.mail_text{
  font-size:30px;
  color:black;
  text-decoration: none;
}
.contact_phone_text
{
  height:100px;
  padding-top:20px;
  border-radius:30px;
  text-align:center;
}
.contact_phone_text a
{
  color:black;
  font-size:20px;
  text-decoration: none
}

.contact_insta_text
{
  height:100px;
  padding-top:30px;
  border-radius:30px;
  text-align:center;
}
.contact_insta_text a
{
  color:black;
  font-size:30px;
  text-decoration: none;
}

.contact_news_text
{
  height:100px;
  padding-top:30px;
  border-radius:30px;
  text-align:center;
}
.contact_news_text a
{
  color:black;
  font-size:30px;
  text-decoration: none;
}
.nagl_kontakt
{
  color:white;
  font-size:70px;
  font-weight: 600;
}

.contact_icon
{
max-width:100%;
height:auto;
}
.contact_header_spacer
{
  height:50px;
}

.wp-block-image
{
  margin-bottom: 10px;
  text-align:center;
}



@media (max-width: 768px) {
    .wp-block-column {
        flex-basis: 100%;
    }
    .alignright {
        float: none;
        margin: 0 auto;
    }

    .mail_text{
      font-size:13px;
    }
    .wp-block-columns.is-layout-flex {
        flex-direction: column;
    }

    .wp-block-column.is-layout-flow:first-child {
        order: 1;
    }

    .wp-block-column.is-layout-flow:last-child {
        order: 2;
    }
    .alignright{
      text-align: center;
    }
    .nagl_kontakt
    {
      color:white;
      font-size:30px;
      font-weight: 800;
    }
    .wp-block-image
    {
      margin-bottom: 10px;
      text-align:center;
    }
    .contact_phone_text a
    {
          font-size:15px;
    }
    .contact_insta_text a
    {
      font-size:20px;
    }
    .contact_icon figure
    {
      width:60px;
    }
    .contact_header_spacer
    {
      height:10px;
    }
    .contact_mail_text
    {
      height: 50px;
      padding-top: 10px;
  }
  .contact_insta_text {
        height: 50px;
        padding-top: 10px;
      }


      .odst-top
      {
        margin-top:20px;
      }

      .category-menu {
       flex-direction: column;
       align-items: center;
   }

   .category-filter {
       width: 90%; /* Zwiększa szerokość przycisków, aby zajmowały większą część ekranu */
       margin-bottom: 10px; /* Dodaje odstęp między przyciskami */
   }
}

@media (max-width: 857px) {

  .contact_news_text a
  {
    color:black;
    font-size:17px;
    text-decoration: none;
  }
      .contact_news_text {
            height: 85px;
            padding-top: 10px;
          }
}

@media (max-width: 1120px) {
.about_spacer
{
  height:20px;
}
}