/* static/css/custom.css */

#banner {
    position: relative; /* Kontener musi być relative */
    text-align: center; /* Wyśrodkuj tekst w poziomie */
    color: white; /* Upewnij się, że tekst jest widoczny na tle obrazka */
    min-height: 600px; /* Dostosuj wysokość sekcji, aby obrazek był widoczny */
    display: flex; /* Użyj flexbox, aby łatwiej wyśrodkować pionowo */
    align-items: center; /* Wyśrodkuj elementy w poziomie */
    justify-content: center; /* Wyśrodkuj elementy w pionie */
    background-color: #333; /* Domyślne tło, jeśli obrazek się nie załaduje */
    background-repeat: no-repeat;
}

#banner .inner {
    position: relative; /* Utrzymuj inner wewnątrz banner */
    z-index: 2; /* Upewnij się, że tekst jest nad wszystkim */
    max-width: 80%; /* Ogranicz szerokość tekstu, aby nie był za długi */
    padding: 20px;
    box-sizing: border-box; /* Upewnij się, że padding nie zwiększa szerokości */
}

/* Ta pseudo-klasa jest często używana w Arcana do nakładki, dostosuj ją jeśli jest */
/* Upewnij się, że nie koliduje z domyślnym :before Arcana */
#banner:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Ciemniejsza nakładka na obrazek dla lepszej czytelności tekstu */
    z-index: 1;
}

/* Opcjonalne style dla nagłówków w banerze */
#banner h2 {
    font-size: 3em; /* Większy rozmiar nagłówka */
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Dodaj cień do tekstu dla lepszej czytelności */
}

#banner p {
    font-size: 1.2em; /* Większy rozmiar tekstu paragrafu */
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Dodaj cień do tekstu dla lepszej czytelności */
}

/* static/css/custom.css */

/* Wyśrodkowanie tekstu w poziomie w sekcji banerowej */
#banner .inner header {
    text-align: center;
}

/* Opcjonalnie: dostosuj marginesy nagłówka i paragrafu */
#banner .inner header h2 {
    margin-bottom: 0.5em; /* Odstęp pod nagłówkiem */
}

#banner .inner header p {
    margin-bottom: 1em; /* Odstęp pod paragrafem */
}

.btn {
  display: inline-block;
  background-color: #007acc;
  color: white;
  padding: 0.7em 1.4em;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.btn:hover {
  background-color: #005fa3;
}