body {
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    width: 100%;
}

header {
    background-image: url('background/img-background.jpg'); /* Add the background image */
    background-size: cover; /* Make sure the image covers the entire header */
    background-position: center; /* Center the image */
    color: #fff;
    padding: 1rem 0;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

.container {
    padding: 20px;
    margin-bottom: 4rem;
}

h1 {
    color: #fff;
}

h2 {
    padding: 10px;
    color: #fff;
}

.mission {
    background-color: #a0adad;

}

.history {
    background-color: #d69373;
}

.why-us {
    background-color: #333;
}

.team {
    background-color: #b0c4de;
}

.team-member {
    display: inline-block;
    margin: 10px;
    text-align: center;
}

.team-member img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
}

footer {
    background-image: url('background/img-background.jpg'); /* Add the background image */
    background-size: cover; /* Make sure the image covers the entire header */
    background-position: center; /* Center the image */
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    position: relative;
    bottom: 0;
    width: 100%;
    margin: 0; /* Ensure no margin */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

footer a {
    color: aqua; /* Change the link color to aqua */
    text-decoration: none; /* Usuwa podkreślenie linku*/
    transition: text-decoration 0.3s ease; /* Smooth transition for hover effect */
}

footer a:hover {
    text-decoration: underline; /* Dodaje podkreślenie linku po najechaniu */
}

#pricing-table {
    width: 100vw;
    margin-left: calc(50% - 50vw); /* Center the table */
    padding: 20px 0; /* Add padding to the top and bottom */
    background-color: #fff; /* Light background for the table */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow for depth */
}

.fakturownia-link {
    text-align: center; /* Center the link */
    margin: 20px auto; /* Add left margin to the link */
    padding: 15px 30px; /* Add padding to the link */
    background-color: #fff; /* Button color */
    border: 1px solid #fff; /* Button border color */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow for depth */
    max-width: 400px; /* Set a maximum width for the button */
}

.fakturownia-link img {
    max-width: 100%; /* Ensure the image fits within the button */
    height: auto; /* Maintain aspect ratio */
    display: inline-block; /* Ensure the image is a block element */
    border-radius: 4px; /* Rounded corners for the image */
    transition: transform 0.3s ease; /* Smooth transition for hover effect */
}

.fakturownia-link:hover img {
    transform: scale(1.05); /* Slightly enlarge the image on hover */
}

.fakturownia-link:hover {
    background-color: #fff; /* Darker shade on hover */
    border-color: #fff; /* Darker border on hover */
}

.promotion {
    margin: 20px 0; /* Odstęp od innych sekcji */
    padding: 15px; /* Wewnętrzne odstępy */
    background-color: #f9f9f9; /* Jasne tło dla sekcji */
    border: 1px solid #ddd; /* Ramka wokół sekcji */
    border-radius: 8px; /* Zaokrąglone rogi */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtelny cień */
}

.promotion h4 {
    font-size: 1.2rem; /* Rozmiar nagłówka */
    color: #333; /* Kolor tekstu */
    margin-bottom: 10px; /* Odstęp pod nagłówkiem */
}

.promotion p {
    font-size: 1rem; /* Rozmiar tekstu */
    color: #555; /* Kolor tekstu */
    margin-bottom: 10px; /* Odstęp pod tekstem */
}

.promotion textarea {
    width: 100%; /* Dopasowanie szerokości do kontenera */
    height: 120px; /* Wysokość pola tekstowego */
    padding: 10px; /* Wewnętrzne odstępy */
    border: 1px solid #ddd; /* Ramka */
    border-radius: 5px; /* Zaokrąglone rogi */
    background-color: #fff; /* Kolor tła */
    font-family: monospace; /* Czcionka dla kodu */
    font-size: 0.9rem; /* Rozmiar tekstu */
    color: #333; /* Kolor tekstu */
    white-space: pre-wrap; /* Zawijanie tekstu */
    word-wrap: break-word; /* Łamanie długich słów */
    overflow-wrap: break-word; /* Dodatkowe łamanie tekstu */
    resize: none; /* Wyłączenie możliwości zmiany rozmiaru */
}

details {
    margin: 20px 0; /* Odstęp od innych sekcji */
    padding: 15px; /* Wewnętrzne odstępy */
    border: 1px solid #ddd; /* Ramka wokół sekcji */
    border-radius: 8px; /* Zaokrąglone rogi */
    background-color: #f9f9f9; /* Jasne tło dla sekcji */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtelny cień */
}

details summary {
    font-size: 1.2rem; /* Rozmiar nagłówka */
    font-weight: bold; /* Pogrubienie tekstu nagłówka */
    cursor: pointer; /* Zmiana kursora na wskaźnik */
    margin-bottom: 10px; /* Odstęp pod nagłówkiem */
    color: #333; /* Kolor tekstu nagłówka */
}

details[open] {
    background-color: #eef; /* Inny kolor tła po rozwinięciu */
}

#donate {
    text-align: center; /* Wyśrodkowanie tekstu */
    margin: 20px 0; /* Odstęp od innych sekcji */
    padding: 15px; /* Wewnętrzne odstępy */
    background-color: #f0f8ff; /* Jasne tło dla sekcji */
    border: 2px solid #0070ba; /* Ramka wokół sekcji */
    border-radius: 8px; /* Zaokrąglone rogi */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtelny cień */
    max-width: 600px; /* Maksymalna szerokość sekcji */
}

#donate h3 {
    font-size: 1.5rem; /* Rozmiar nagłówka */
    color: #0070ba; /* Kolor tekstu nagłówka */
    margin-bottom: 10px; /* Odstęp pod nagłówkiem */
}

#donate p {
    font-size: 1rem; /* Rozmiar tekstu */
    color: #555; /* Kolor tekstu */
    margin-bottom: 15px; /* Odstęp pod tekstem */
}

#donate input[type="image"] {
    border: none; /* Usunięcie obramowania */
    margin-top: 10px; /* Odstęp od tekstu */
    cursor: pointer; /* Zmiana kursora na wskaźnik */
    transition: transform 0.3s ease; /* Płynne przejście przy najechaniu */
}

#donate input[type="image"]:hover {
    transform: scale(1.05); /* Powiększenie przy najechaniu */
}