/* Stylizacja sekcji */
        #home {
            padding: 50px 20px;
            background-color: #fff; /* Białe tło dla całej strony */
            color: #000;
            text-align: center;
            flex: 1; /* Wypełnia dostępne miejsce */
        }

        /* Stylizacja nadchodzących meczów */
        .upcoming-matches {
            margin-top: 20px;
            background: linear-gradient(135deg, #333333, #e5d39f); /* Gradient z kolorem #c6ae5c */
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Subtelny cień */
        }

        .match-card {
            background-color: #fff; /* Białe tło karty */
            padding: 20px;
            border-radius: 15px;
            border: 2px solid #c6ae5c; /* Obramowanie w kolorze */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtelny cień */
            margin: 20px auto;
            max-width: 600px;
            text-align: center;
            transition: transform 0.3s ease; /* Animacja na hover */
        }

        .match-card:hover {
            transform: scale(1.05); /* Powiększenie karty na hover */
        }

        .match-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
        }

        .team-logo img {
            width: 120px; /* Większe logotypy */
            height: 120px;
            transition: transform 0.3s ease; /* Animacja logo */
        }

        .match-card:hover .team-logo img {
            transform: scale(1.1); /* Powiększenie logo na hover */
        }

        .vs {
            font-size: 2rem; /* Większy napis "VS" */
            font-weight: bold;
            color: #333;
            text-align: center;
            flex: 1;
            margin: 0 20px; /* Odstęp od logotypów */
        }

        /* Stylizacja szczegółów meczu */
        .match-details {
            margin-top: 15px;
            font-size: 1.2rem;
            color: #555;
        }

        .match-details p {
            margin: 5px 0;
            font-weight: bold;
            color: #333;
        }

        .match-details p:first-child {
            color: #c6ae5c; /* Wyróżniony kolor dla daty */
        }

        /* Reszta stylów pozostaje bez zmian */
        .about-team {
            margin: 40px 0;
        }

        .about-team p {
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .cta-button {
            background-color: #000000;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
            text-decoration: none;
            display: inline-block;
            margin-top: 20px;
        }

        .cta-button:hover {
            color: #000;
            background-color: #c6ae5c;
        }

        /* Stylizacja newslettera */
        .newsletter {
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            margin: 40px 0;
        }

        .newsletter input {
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
            width: 250px;
        }

        .newsletter button {
            padding: 10px 15px;
            background-color: #c6ae5c;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .newsletter button:hover {
            color: #ffffff;
            background-color: #000000;
        }

        /* Stylizacja stopki */
        footer {
            background-color: #000;
            color: #fff;
            text-align: center;
            padding: 20px;
            margin-top: auto;
        }

        .social-media a {
            color: #c6ae5c;
            margin: 0 10px;
            text-decoration: none;
        }
        /* Styl responsywny */
        @media (max-width: 768px) {
            .match-card {
                max-width: 90%;
                padding: 15px;
            }

            .team-logo img {
                width: 80px;
                height: 80px;
            }

            .vs {
                font-size: 1.2rem;
            }

            .match-details {
                font-size: 0.9rem;
            }
        }

        @media (max-width: 480px) {
            .match-info {
                flex-direction: column;
            }

            .team-logo img {
                width: 60px;
                height: 60px;
            }

            .vs {
                margin: 10px 0;
                font-size: 1rem;
            }

            .match-details {
                font-size: 0.8rem;
            }
        }
        /* Responsywny styl dla małych ekranów */
@media (max-width: 600px) {
    .newsletter {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 90%; /* Zmniejsza szerokość sekcji na mniejszych ekranach */
        margin: 0 auto; /* Wyrównanie do środka */
    }

    .newsletter input {
        width: 80%; /* Zmniejszenie szerokości pola do wpisania e-maila */
        margin-bottom: 10px; /* Odstęp między polem a przyciskiem */
        padding: 10px; /* Większa przestrzeń wewnątrz pola */
        font-size: 1rem; /* Trochę większy tekst */
        text-align: center; /* Wyrównanie tekstu w środku */
    }

    .newsletter button {
        width: 60%; /* Zmniejszenie szerokości przycisku */
        padding: 10px;
        font-size: 1rem;
        background-color: #c6ae5c;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
        text-align: center;
    }

    .newsletter button:hover {
        background-color: #000000; /* Zmiana koloru na hover */
        color: #ffffff;
    }
}
/* Zmniejszenie przerwy między sekcjami */
.about-team {
    margin-bottom: 20px; /* Zmniejszenie odstępu na dole sekcji drużyny */
}

#gallery-preview {
    text-align: center;
    margin-top: 0; /* Usuwamy dodatkowy margines na górze */
}

/* Nowoczesny styl galerii */
.gallery-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px; /* Lekki margines na dole dla spójności */
    flex-wrap: wrap; /* Pozwól, aby obrazy zawijały się na mniejszych ekranach */
}

.gallery-thumbnail {
    width: 500px; /* Zwiększamy szerokość obrazka */
    height: auto;
    border-radius: 15px; /* Większe zaokrąglenie rogów dla nowoczesnego efektu */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Mocniejszy, bardziej nowoczesny cień */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animacje przy najechaniu */
    cursor: pointer;
    margin: 10px; /* Dodaj margines dla lepszego odstępu między obrazami */
}

/* Efekt hover: powiększenie i zmiana cienia */
.gallery-thumbnail:hover {
    transform: scale(1.08); /* Większe powiększenie przy najechaniu */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25); /* Głębszy cień przy najechaniu */
}
ranking-strzelcow {
    background-color: #ffffff;
    color: #000000;
    padding: 60px 20px;
    font-family: 'Segoe UI', sans-serif;
}

.ranking-strzelcow h2 {
    text-align: center;
    color: #000000;
    font-size: 2.5rem;
    margin-bottom: 40px;
}

.ranking-strzelcow table {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    border-collapse: collapse;
    background-color: #ffffff;
    border: 1px solid #c6ae5c;
    box-shadow: 0 0 15px rgba(201, 179, 102, 0.4);
}

.ranking-strzelcow th,
.ranking-strzelcow td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid #d8d8d8;
}

.ranking-strzelcow th {
    background-color: #c6ae5c;
    color: #fff;
    font-weight: bold;
}

.ranking-strzelcow tr:nth-child(even) {
    background-color: #d8d8d8;
}

.ranking-strzelcow tr:hover {
    background-color: #d8d8d8;
}
/* Styl dla urządzeń mobilnych */
@media (max-width: 768px) {
    .gallery-thumbnail {
        width: 90%; /* Ustaw szerokość obrazków na 90% dla małych ekranów */
        max-width: 300px; /* Maksymalna szerokość obrazków */
    }
    
    .gallery-container {
        flex-direction: column; /* Zmień kierunek na kolumnowy na małych ekranach */
        align-items: center; /* Wyśrodkowanie elementów */
    }
}