.container-top-a {
    margin-top: -271px;
    position: relative;
    z-index: 10; /* Zapewnia, że element będzie nad innymi, jeśli na nie nachodzi */
}
/* 1. Kontener nagłówka na pełną szerokość */
.container-header {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    margin-left: -50vw !important;
    
    /* Tutaj ustawiamy powtarzanie */
    background-image: url('/images/trawa_bg.jpg') !important; /* Ścieżka do zdjęcia */
    background-repeat: repeat-x !important; /* Powtarzaj tylko w poziomie */
    background-position: top left !important;
    background-size: auto 100% !important; /* Nie rozciągaj zdjęcia */
    
    min-height: 485px !important; /* Wysokość Twojego paska */
    display: flex !important;
    flex-direction: column !important;
}


/* 1. Resetujemy pasek menu, żeby nie uciekał do krawędzi */
header.header .navbar {
    width: auto !important;
    max-width: 1620px !important; /* Standardowa szerokość treści w Joomla */
    margin: 0 auto !important;     /* Środkowanie */
    left: 0 !important;           /* Reset triku z 50% */
    right: 0 !important;
    position: relative !important;
    background-color: #333333;    /* Kolor tła paska menu (możesz zmienić) */
    border-radius: 8px;           /* Opcjonalnie: zaokrąglone rogi */
    padding: 10px 20px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Delikatny cień, by odciąć się od banera */
}

/* 2. Upewniamy się, że kontener wewnątrz menu nie wymusza szerokości */
header.header .navbar .container-fluid {
    padding: 0 !important;
    display: flex;
    justify-content: space-between;
}
/* 1. Resetujemy pasek menu, żeby nie uciekał do krawędzi */
header.header .navbar {
    width: auto !important;
    max-width: 1620px !important; /* Standardowa szerokość treści w Joomla */
    margin: 0 auto !important;     /* Środkowanie */
    left: 0 !important;           /* Reset triku z 50% */
    right: 0 !important;
    position: relative !important;
    background-color: #333333;    /* Kolor tła paska menu (możesz zmienić) */
    border-radius: 8px;           /* Opcjonalnie: zaokrąglone rogi */
    padding: 10px 20px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Delikatny cień, by odciąć się od banera */
}

/* 2. Upewniamy się, że kontener wewnątrz menu nie wymusza szerokości */
header.header .navbar .container-fluid {
    padding: 0 !important;
    display: flex;
    justify-content: space-between;
}


/* Nagłówek - teraz z zielonym tekstem */
.card-header {
    background-color: #007bff; /* Wybierz swój kolor */
    color: #ffffff;            /* Kolor czcionki */
    border-bottom: 2px solid #0056b3;
    font-weight: bold;
    text-transform: uppercase;
}

/* Stylizacja listy i pozycji menu */
.card-body ul {
    list-style: none; /* Usuwa kropki */
    padding-left: 0;
}

/* Wygląd linków i dodanie strzałki */
.card-body ul li a {
    color: #333; /* Domyślny kolor tekstu */
    text-decoration: none;
    display: block;
    padding: 0px 0;
    transition: color 0.3s; /* Gładkie przejście koloru */
}

/* Strzałka przed tekstem */
.card-body ul li a::before {
    content: "▶";
    color: #28a745; /* Zielona strzałka */
    display: inline-block;
    width: 20px;
    font-size: 0.8em;
    transition: transform 0.2s;
}

/* EFEKT PO NAJECHANIU: Tekst i strzałka stają się zielone */
.card-body ul li a:hover {
    color: #28a745 !important; /* Tekst zmienia się na zielony */
}

/* Dodatkowo: strzałka przesuwa się przy najechaniu */
.card-body ul li a:hover::before {
    transform: translateX(5px);
}
h1, h2, h3, h4, h5, h6 {
    text-align: center !important;
    hyphens: auto; /* Włącza automatyczne dzielenie wyrazów, żeby nie było wielkich dziur */
}

/* STOPKA */
/* 1. Środkowanie całej zawartości stopki */
footer.footer {
    text-align: center !important;
}

/* 2. Środkowanie kontenerów i modułów wewnątrz stopki */
footer.footer .container, 
footer.footer .mod-custom, 
footer.footer .mod-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    width: 100%;
}

/* 3. Usunięcie marginesów z paragrafów w stopce, które mogą psuć środek */
footer.footer p {
    margin-left: auto !important;
    margin-right: auto !important;
    display: inline-block; /* Zapobiega rozciąganiu się na całą szerokość */
}