/* static/css/baner.css */

#banner .inner {
    /* Usunęliśmy text-align stąd, bo celujemy niżej */
    /* Możesz tu zostawić inne style dla .inner, jeśli chcesz, np. padding, max-width */
    max-width: 80%; /* Przykład */
    padding: 20px; /* Przykład */
}

#banner .inner header {
    /* Możesz dodać style dla całego nagłówka tutaj */
    /* text-align: center !important; */ /* Możesz też próbować tutaj, ale lepiej niżej */
}

/* To jest kluczowa reguła: celuj bezpośrednio w h2 w banerze */
#banner .inner header h2 {
    text-align: center !important; /* Tutaj wymuszamy wyśrodkowanie */
    color: white !important; /* Wymuszamy biały kolor dla tytułu */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Opcjonalny cień dla lepszej czytelności */
    /* Zostaw inne style dla h2 z motywu lub dodaj swoje, np. font-size, margin */
    font-size: 3em !important; /* Przykład, jeśli chcesz duży nagłówek */
    margin-bottom: 0.5rem !important;
}

/* Opcjonalnie, wyśrodkuj także paragraf */
#banner .inner header p {
    text-align: center !important;
    color: white !important; /* Wymuszamy biały kolor dla paragrafu */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    font-size: 1.2em !important;
    margin-bottom: 1rem !important;
}

/* Dodatkowe style dla #banner (np. nakładka, flexbox), jeśli je usunąłeś/aś wcześniej */
#banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#banner:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}
/* Obsluga klawisz podstawowy wywołanie <a href="/oferta/" class="btn">Poznaj nasze usługi</a> */

.btn {
  display: inline-block;
  background-color: #0069d9;
  color: white;
  padding: 0.5em 1em;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #004ea2;
}


.btn-primary {
  background-color: #0078D4;
  color: white;
  border-color: #0078D4;
}
.btn-primary:hover {
  background-color: #005fa3;
  color: white;
}

.btn-secondary {
  background-color: #f2f2f2;
  color: #333;
  border-color: #ccc;
}
.btn-secondary:hover {
  background-color: #e0e0e0;
  color: #111;
}

.btn-outline {
  background-color: transparent;
  color: #0078D4;
  border-color: #0078D4;
}
.btn-outline:hover {
  background-color: #0078D4;
  color: white;
}
.btn-block {
  display: block;
  width: 100%;
  text-align: center;
}

/* static/css/custom.css */

/* Ukryj pełne menu (o ID 'nav') na mniejszych ekranach */
/* Używamy breakpointa 980px, który jest typowy dla motywu Arkana */
@media screen and (max-width: 980px) {
    #nav {
        display: none !important; /* To ukryje całe menu nawigacyjne na małych ekranach */
    }

    /* Opcjonalnie: upewnij się, że przycisk hamburgera jest widoczny. */
    /* W Arkana często znajduje się w sekcji o ID '#header' i ma klasę '.toggle'. */
    #header .toggle { /* Celujemy w przycisk hamburgera */
        display: block !important; /* Upewniamy się, że jest widoczny */
        /* Możesz tu dodać dodatkowe style dla hamburgera, np. kolor, rozmiar */
        color: #fff; /* Przykład: kolor ikony */
        font-size: 1.5em; /* Przykład: rozmiar ikony */
        padding: 0.5em;
    }

    /* Jeśli header ma jakieś reguły, które ukrywają jego zawartość na mobilach, może trzeba je nadpisać */
    #header {
        /* Przykład: upewnij się, że header jest widoczny i ma odpowiednią wysokość */
        min-height: 4em; /* Dostosuj wysokość, aby hamburger był widoczny */
        line-height: 4em; /* Jeśli header ma line-height, żeby wyśrodkować elementy */
    }
}
/* Efekt powiększania obrazków w galerii realizacji */

/* Styl dla kontenera obrazka, jeśli go masz */
.realizacja-details-gallery img {
    /* Ustawienia początkowe obrazka */
    transition: transform 0.3s ease-in-out; /* Płynne przejście dla efektu powiększania */
    /* Upewnij się, że obrazki są blokowe lub inline-block, aby transformacje działały poprawnie */
    display: block; /* Ważne, aby transformacje działały poprawnie */
    max-width: 100%;
    height: auto;
}

/* Styl, który zostanie zastosowany po najechaniu myszką */
.realizacja-details-gallery img:hover {
    transform: scale(1.9); /* Powiększ obrazek o 10% (możesz dostosować wartość) */
    z-index: 10; /* Opcjonalnie: Upewnij się, że powiększony obrazek jest nad innymi elementami */
}

/* Dodatkowe style dla lepszego efektu, np. lekki cień */
.realizacja-details-gallery img {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Lekki cień pod obrazkiem */
}

.realizacja-details-gallery img:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Mocniejszy cień po najechaniu */
}

/* Jeśli masz kontenery dla poszczególnych elementów galerii, możesz dodać overflow: hidden, aby uniknąć wychodzenia obrazka poza granice kontenera */
/* Przykładowo, jeśli każdy obrazek jest w div.gallery-item: */
/*
.realizacja-details-gallery .gallery-item {
    overflow: hidden;
}
*/