@font-face {
    font-family: 'WlasnePismo';
    src: url('AlexBrush-Regular.woff2') format('woff2');
    /* Tutaj wpisz nazwę nowego pliku */
    font-weight: normal;
    font-style: normal;
}

/* --- USTAWIENIA OGÓLNE --- */
:root {
    --primary-color: #4A90E2;
    --secondary-color: #029e84;
    --dark-color: #333333;
    --light-color: #a9ddec;
    --white: #ffffff;
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-main);
    line-height: 1.6;
    color: var(--dark-color);
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.main-body {
    background-color: #0d3967;
    background-size: cover;
    /* Obrazek pokrywa całą stronę */
    background-repeat: no-repeat;
    /* Obrazek nie powtarza się */
    background-position: center;
    /* Obrazek jest wycentrowany */
    background-attachment: fixed;
    /* Tło jest stałe podczas przewijania */
}

/* --- NAGŁÓWEK --- */
header {
    background-color: var(--dark-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 20px;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--light-color);
    display: flex;
    align-items: center;
}

.logo img {
    height: 75px;
    margin-right: 10px;
    background-color: transparent;
}

.nav-links {
    display: flex;
    gap: 20px;
    list-style: none;
}

.nav-links a {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--light-color);
}

.btn-donate {
    background-color: var(--secondary-color);
    color: var(--white) !important;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-donate:hover {
    background-color: var(--white);
    color: var(--secondary-color) !important;
}

/* --- SEKCJE OGÓLNE --- */
main {
    flex: 1;
}

/* Rozciąga treść, by stopka była na dole */

section {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 40px;
    color: var(--light-color) !important;
    text-shadow: 5px 5px 10px black;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--secondary-color);
    margin: 10px auto 0;
}

/* --- HERO (STRONA GŁÓWNA) --- */
.hero {
    background: transparents;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    color: var(--white);
    padding: 0 20px;
    padding-top: 60px;
    width: 100% !important;
    max-width: 80% !important;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--white);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.btn-hero-1 {
    background-color: #ffffff;
    color: var(--primary-color);
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    margin-top: 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

.btn-hero-1:hover {
    background-color: #4a91e2;
    color: var(--white);
}

.btn-hero-2 {
    background-color: #ffffff;
    color: var(--primary-color);
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    margin-top: 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

.btn-hero-2:hover {
    background-color: #4a91e2;
    color: var(--white);
}

.btn-hero-3 {
    background-color: #ffffff;
    color: var(--primary-color);
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    margin-top: 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

.btn-hero-3:hover {
    background-color: #4a91e2;
    color: var(--white);
}

.btn-hero-4 {
    background-color: #029e84cb;
    color: #ffffff;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
    margin-top: 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

.btn-hero-4:hover {
    background-color: #ffffff;
    color: #000000;
}

/* --- O NAS --- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.about-image {
    height: 300px;
    background-color: #ddd;
    border-radius: 10px;
    background-image: url('https://images.unsplash.com/photo-1511895426328-dc8714191300?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
    background-size: cover;
    background-position: center;
}

/* --- DZIAŁANIA --- */
.features-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-card {
    background-color: var(--light-color);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid #eee;
    height: auto;
    box-shadow: 5px 0px 10px black;
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

/* --- WESPRZYJ NAS --- */
.support-box {
    background-color: #f9f9f9;
    border-left: 5px solid var(--secondary-color);
    padding: 40px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.bank-details {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--primary-color);
    margin: 20px 0;
    padding: 15px;
    background: #fff;
    border: 2px dashed #ccc;
    display: inline-block;
    word-break: break-all;
}

/* --- KONTAKT --- */
.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.btn-submit {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
}

/* --- STOPKA --- */
footer {
    background-color: var(--dark-color);
    color: var(--white);
    padding: 30px 20px;
    text-align: center;
    margin-top: auto;
}

/* Wymuszenie układu poziomego na komputerach */
.navbar {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
}

.nav-links {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 20px;
    /* Odstęp między linkami */
}

/* Blokada łamania tekstu w linkach (naprawi "O nas" i "Strona główna") */
.nav-links a {
    white-space: nowrap !important;
}

/* Blokada ucinania fioletowego przycisku */
.nav-links a:last-child,
.navbar button,
[class*="wesprzyj"] {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* --- RESPONSYWNOŚĆ --- */
@media (max-width: 768px) {
    .navbar {
        /* Wymusza układ pionowy na telefonie */
        flex-direction: column !important;
        align-items: center;
        width: 100%;
        padding: 15px 0;
    }

    .nav-links {
        /* Układa linki jeden pod drugim zamiast w linii */
        flex-direction: column !important;
        width: 100%;
        gap: 15px;
        /* Odstępy między linkami w pionie */
        margin-top: 15px;
        text-align: center;
    }

    /* Przywraca naturalne łamanie tekstu tylko dla małych ekranów */
    .nav-links a {
        white-space: normal !important;
    }

    .about-grid,
    .contact-container {
        grid-template-columns: 1fr;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .logo {
        flex-direction: column !important;
        text-align: center !important;
        font-size: 1.2rem !important;
        /* Zmniejszenie fontu, by tekst ładnie się zmieścił */
        gap: 10px;
        /* Odstęp między obrazkiem a tekstem */
    }

    /* Poprawka dla obrazka w logo na telefonie */
    .logo img {
        margin-right: 0 !important;
        /* Usuwamy prawy margines, bo teraz elementy są w pionie */
        height: 60px !important;
        /* Delikatnie zmniejszamy obrazek na małym ekranie */
    }
}

input {
    padding: 10px;
    width: 250px;
    border: 1px solid #000000;
    text-align: center;
}

.copy-container {
    margin: 20px;
    font-family: sans-serif;
}

button {
    padding: 10px;
    cursor: pointer;
}

.politics {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.politics:hover {
    color: #c84cd3
}

.wydarzenia {
    text-decoration: none;
    color: var(--dark-color)
}

/* Kontener zapewniający responsywność na telefonach */
.table-container {
    overflow-x: auto;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 8px;
}

/* Główny styl tabeli */
.custom-table {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    background-color: transparent;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    /* Tabela zawsze zajmuje 100% szerokość ekranu */
    table-layout: fixed;
    /* Wymusza sztywny podział, kolumny nie rozepchną ekranu */
    border-collapse: collapse;
}

/* Nagłówek tabeli */
.custom-table thead tr {
    background-color: #1e3a8a;
    color: #ffffff;
    text-align: left;
    font-weight: 600;
}

.custom-table th {
    padding: 14px 20px;
    border-bottom: 3px solid #111827;
}

/* Wiersze i komórki danych */
.custom-table tbody tr {
    transition: background-color 0.2s ease;
}

/* Kolorowanie co drugiego wiersza (zebra) */
.custom-table tbody tr:nth-of-type(even) {
    background-color: transparent;
}

/* Efekt najechania myszką na wiersz */
.custom-table tbody tr:hover {
    background-color: transparent;
}

.custom-table td {
    font-weight: bold;
    color: #333333;
}

/* Wyróżnienie roku w pierwszej kolumnie */
.custom-table td:first-child {
    font-weight: bold;
    color: #333333;
}

/* Wyśrodkowanie ostatniej kolumny z linkiem */
.custom-table th:last-child,
.custom-table td:last-child {
    text-align: center;
}

/* Styl przycisku / linku */
.btn-report {
    width: 100%;
    max-width: 303px;
    display: inline-block;
    padding: 6px 16px;
    background-color: #9b9b9ba2;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 0px;
    font-weight: 500;
    font-size: 13px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Efekt najechania na przycisk */
.btn-report:hover {
    background-color: #4e4e4eb4;
}

/* Efekt kliknięcia przycisku */
.btn-report:active {
    transform: scale(0.98);
}

.td0 {
    padding: 30px !important;
    font-size: 30px;
    color: #d6d4d4 !important;
    text-align: center !important;
}

.td2 {
    padding-top: 30px !important;
}

.td3 {
    padding-bottom: 30px !important;
}

.td4 {
    font-size: 25px;
}

html {
    scroll-behavior: smooth;
}

.scroll-to-top {
    position: fixed !important;
    bottom: 20px !important;
    /* Odstęp od dołu ekranu */
    right: 10px !important;
    /* Zmniejszenie tej wartości (np. z 30px na 10px) przesunie przycisk maksymalnie do prawej krawędzi okna */
    z-index: 1000 !important;
    /* Gwarantuje, że przycisk nie schowa się pod tło */

    /* Wymiary i kształt */
    width: 50px;
    height: 50px;
    border-radius: 50%;

    /* Kolorystyka i cień */
    background-color: #8e8e91;
    /* Nowoczesny niebieski */
    color: #000000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    /* Układ strzałki wewnątrz */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 20px;

    /* Płynna animacja najechania */
    transition: all 0.3s ease;
}

/* Efekt po najechaniu myszką */
.scroll-to-top:hover {
    background-color: #ffffff;
    /* Ciemniejszy niebieski */
    transform: translateY(-5px);
    /* Delikatne uniesienie */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.logo-link {
    text-decoration: none;
}

.slider-outer-wrapper {
    display: flex;
    flex-direction: row;
    /* Lub column, jeśli kafelki mają być pod sobą, ale stretch działa najlepiej przy row/wrap */
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    /* Odstęp między strzałkami a kafelkiem (możesz zwiększyć/zmniejszyć) */
    width: 100%;
    max-width: 500px;
    /* Poszerzamy, by zmieścić kafelek 400px + strzałki po bokach */
    margin: 0 auto;
    position: relative;
    overflow: visible !important;
    /* Pozwala cieniom "wypaść" poza ramkę kontenera */
    padding-bottom: 20px;
    /* Daje 20px wolnego miejsca na dole dla cienia karty */
    padding-left: 20px;
    /* Zabezpiecza cień z lewej strony */
    padding-right: 20px;
    /* Zabezpiecza cień z prawej strony */
}

/* Główny kontener kafelka */
.slider-container {
    position: relative;
    max-width: 400px;
    /* Stała szerokość kafelka */
    width: 100%;
    overflow: visible !important;
    /* Pozwala cieniom "wypaść" poza ramkę kontenera */
    padding-bottom: 20px;
    /* Daje 20px wolnego miejsca na dole dla cienia karty */
    padding-left: 20px;
    /* Zabezpiecza cień z lewej strony */
    padding-right: 20px;
    /* Zabezpiecza cień z prawej strony */
}

/* Taśma slidera */
.features-grid {
    display: flex !important;
    width: 100% !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Zabezpieczenie przed skracaniem szerokości kafelków */
.features-grid>div,
.features-grid>.feature-card,
.features-grid .feature-card-link-wrapper {
    min-width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Stylowanie przycisków nawigacji (strzałek) poza kafelkiem */
.slider-nav-btn {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background 0.3s, transform 0.2s;
    flex-shrink: 0;
    /* Gwarantuje, że strzałka nie zmniejszy się na telefonie */
}

/* Pozycjonowanie relatywne – strzałki stoją teraz naturalnie w linii Flexbox */
.slider-nav-btn.prev,
.slider-nav-btn.next {
    transform: none;
    position: absolute;
    top: 240px;
    /* Ta wartość precyzyjnie obniża strzałkę do poziomu kafelka */
    z-index: 10;
    /* Gwarantuje, że strzałka nie schowa się pod kafelek */
}

.slider-nav-btn.prev {
    left: 0px;
}

.slider-nav-btn.next {
    right: 0px;
}

.slider-nav-btn:hover {
    background: #ffffff;
    transform: scale(1.1);
}

/* Kropki pod całością */
.slider-dots-container {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.slider-dot {
    width: 12px;
    height: 12px;
    background-color: #cbd5e1;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.slider-dot.active {
    background-color: #3b82f6;
    transform: scale(1.2);
}

/* Schowanie linku wewnątrz wrappera kafelka */
.feature-card-link-wrapper a {
    text-decoration: none;
    display: block;
    color: inherit;
}

.dzialania {
    flex: 1;
    /* Zmusza sekcję do rozciągnięcia się i zajęcia całej dostępnej przestrzeni */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Opcjonalnie: centruje slider pionowo w powiększonej sekcji */
    background: transparent;
}

.dzialania-main {
    background-color: #243652;
    background-size: cover;
    /* Obrazek pokrywa całą stronę */
    background-repeat: no-repeat;
    /* Obrazek nie powtarza się */
    background-position: center;
    /* Obrazek jest wycentrowany */
    background-attachment: fixed;
    /* Tło jest stałe podczas przewijania */
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   WSPÓLNE STYLE BAZOWE (Dla obu wersji)
   ========================================================================== */
header {
    background-color: var(--dark-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.logo-link {
    text-decoration: none;
}

.logo {
    font-size: 1.5rem;
    font-weight: bold;
    color: #ffffff;
    display: flex;
    align-items: center;
}

.logo img {
    height: 75px;
    margin-right: 10px;
    background-color: transparent;
    border-radius: 5px;
}

/* Uniwersalny fioletowy styl przycisku */
.btn-donate {
    background-color: var(--secondary-color);
    color: var(--white) !important;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.btn-donate:hover {
    background-color: var(--white);
    color: var(--secondary-color) !important;
}


/* ==========================================================================
   WIDOK DLA KOMPUTERÓW (Ekrany powyżej 768px szerokości)
   ========================================================================== */
@media (min-width: 769px) {
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
        padding: 1rem 20px;
    }

    /* Wyświetlamy tradycyjne menu w rzędzie */
    .nav-links {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 20px;
        list-style: none;
    }

    .nav-links a {
        text-decoration: none;
        color: var(--primary-color);
        font-weight: 500;
        transition: color 0.3s;
        white-space: nowrap;
    }

    .nav-links a:hover,
    .nav-links a.active {
        color: var(--light-color);
    }

    /* Ukrywamy elementy sterowania mobilnego na PC */
    .nav-mobile-controls {
        display: none;
    }
}


/* ==========================================================================
   WIDOK DLA TELEFONÓW (Ekrany do 768px szerokości)
   ========================================================================== */
@media (max-width: 768px) {

    /* Ukrywamy komputerowy fioletowy guzik wewnątrz listy linków */
    .desktop-only {
        display: none !important;
    }

    /* Elastyczny pasek nawigacji na telefonie */
    .navbar {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 20px;
        position: relative;
    }

    /* Kontener na przycisk Wspieram oraz Hamburger obok siebie */
    .nav-mobile-controls {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    /* Przycisk "Wspieram" zostaje dopasowany do wersji mobilnej na pasku */
    .mobile-donate-btn {
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 0.9rem;
    }

    /* Przycisk hamburgera (trzy kreski) */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 26px;
        height: 18px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    .hamburger .bar {
        width: 100%;
        height: 3px;
        background-color: var(--white);
        border-radius: 2px;
        transition: all 0.3s ease-in-out;
    }

    /* Animacja przekształcenia hamburgera w krzyżyk (X) */
    .hamburger.open .bar:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg);
    }

    .hamburger.open .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.open .bar:nth-child(3) {
        transform: translateY(-7.5px) rotate(-45deg);
    }

    /* Karta menu bocznego wysuwana z prawej strony */
    .nav-links {
        display: none;
        /* KLUCZOWE: Domyślnie menu na starcie jest całkowicie niewidoczne */
        flex-direction: column;
        position: absolute;
        top: 100%;
        /* Rozwija się równo pod ciemnym paskiem */
        right: 0;
        /* Wyrównane do prawej krawędzi okna */
        width: 220px;
        background-color: var(--dark-color);
        /* Tło takie samo jak Twój header */
        box-shadow: -4px 6px 15px rgba(0, 0, 0, 0.3);
        border-top: 3px solid var(--secondary-color);
        /* Fioletowa górna krawędź rozwijanej karty */
        gap: 0;
        padding: 0;
        list-style: none;
        z-index: 999;
    }

    /* Aktywacja wyświetlania menu po kliknięciu (wywoływana przez JS) */
    .nav-links.open {
        display: flex !important;
    }

    /* Linie separujące poszczególne linki wewnątrz menu bocznego */
    .nav-links li {
        width: 100%;
        border-bottom: 1px solid #444444;
    }

    /* Linki w menu mobilnym - stylizowane na drukowane litery ze wzoru */
    .nav-links a {
        display: block;
        padding: 15px 20px;
        color: var(--primary-color) !important;
        /* Twój podstawowy jasnoniebieski */
        font-size: 0.9rem;
        text-transform: uppercase;
        text-align: left;
        font-weight: 600;
        letter-spacing: 0.5px;
        white-space: normal;
        text-decoration: none;
    }

    /* Podświetlenie aktywnej podstrony wewnątrz karty (Twój błękit tła) */
    .nav-links a:hover,
    .nav-links a.active {
        color: var(--light-color) !important;
        background-color: #2b2b2b;
    }
}

/* ==========================================================================
   SUPER-BEZPIECZNA POPRAWKA DLA TELEFONÓW (Wklej na sam dół pliku CSS)
   ========================================================================== */
@media (max-width: 768px) {

    /* Wymuszamy ukrycie menu na telefonie za pomocą nowego ID */
    ul#mobilneMenu {
        display: none !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        width: 220px !important;
        background-color: var(--dark-color) !important;
        box-shadow: -4px 6px 15px rgba(0, 0, 0, 0.3) !important;
        border-top: 3px solid var(--secondary-color) !important;
        gap: 0 !important;
        padding: 0 !important;
        margin-top: 0 !important;
        list-style: none !important;
        z-index: 999 !important;
    }

    /* Wymuszamy otwarcie menu TYLKO wtedy, gdy skrypt doda klasę .open */
    ul#mobilneMenu.open {
        display: flex !important;
    }

    /* Formatowanie elementów wewnątrz nowego menu bocznego */
    ul#mobilneMenu li {
        width: 100% !important;
        border-bottom: 1px solid #444444 !important;
        display: block !important;
    }

    ul#mobilneMenu a {
        display: block !important;
        padding: 15px 20px !important;
        color: var(--primary-color) !important;
        font-size: 0.9rem !important;
        text-transform: uppercase !important;
        text-align: left !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
        white-space: normal !important;
        text-decoration: none !important;
    }

    ul#mobilneMenu a:hover,
    ul#mobilneMenu a.active {
        color: var(--light-color) !important;
        background-color: #2b2b2b !important;
    }
}

/* --- UKRYWANIE DUPLIKATU PRZYCISKU NA TELEFONIE --- */
@media (max-width: 768px) {

    /* Ta reguła całkowicie wymaże fioletowy guzik z rozwijanego menu na smartfonie */
    li.ukryj-na-telefonie {
        display: none !important;
    }
}

@media (min-width: 769px) {

    /* Ta reguła dba o to, żeby na komputerze przycisk wyświetlał się normalnie jako element listy */
    li.ukryj-na-telefonie {
        display: block !important;
    }
}

/* ==========================================================================
   BEZWZGLĘDNE UKRYWANIE DUPLIKATU (Wklej na sam dół pliku CSS)
   ========================================================================== */
@media (max-width: 768px) {

    /* Użycie pełnej ścieżki z ID i klasą wymusza najwyższy priorytet w przeglądarce */
    ul#mobilneMenu li.ukryj-na-telefonie,
    ul#mobilneMenu li.ukryj-na-telefonie a {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
    }
}

/* ==========================================================================
   FINALNA POPRAWKA: CENTROWANIE SLIDERA I PEŁNE TŁO (Na sam dół pliku CSS)
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. CENTROWANIE SLIDERA (Strzałki i kafelki idealnie mieszczą się na ekranie) */
    .slider-outer-wrapper {
        max-width: 100% !important;
        /* Blokuje wychodzenie poza krawędź telefonu */
        padding: 0 10px !important;
        /* Tworzy bezpieczny odstęp od boków ekranu */
        gap: 10px !important;
        /* Zmniejsza odstęp między strzałkami a kafelkiem */
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    .slider-container {
        max-width: calc(100% - 80px) !important;
        /* Dynamicznie wylicza miejsce na kafelek, zostawiając przestrzeń na obie strzałki */
    }

    /* 2. LIKWIDACJA BIAŁEGO PASKA (Wymuszenie rozciągnięcia tła i body na telefonie) */
    html,
    body,
    .main-body {
        height: auto !important;
        min-height: 100vh !important;
        background-attachment: scroll !important;
        /* Zapobiega ucinaniu obrazka tła na urządzeniach mobilnych */
        background-size: cover !important;
    }

    section.dzialania {
        min-height: 70vh !important;
        /* Gwarantuje, że sekcja dociągnie kolor do stopki */
        width: 100% !important;
        padding: 30px 10px !important;
    }
}

.section-title2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 40px;
    color: #000000;
}

.form-title {
    font-size: 20px;
    color: white;
}

/* ==========================================================================
   WIZUALNE FORMATOWANIE SLIDERA DLA SKRYPTU JAVASCRIPT
   ========================================================================== */
/* Taśma prowadzona przez JavaScript */
.partners-track {
    display: flex !important;
    width: max-content !important;
    gap: 40px !important;
    /* Dokładnie 40px odstępu między logotypami */
    will-change: transform;
    /* Optymalizacja sprzętowa GPU dla idealnej płynności */
}

.partner-logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 160px !important;
    /* Stała szerokość elementu na komputerze */
    height: 80px !important;
    flex-shrink: 0 !important;
}

.partner-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.3s, opacity 0.3s;
}

.partner-logo img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* Styl mobilny */
@media (max-width: 768px) {
    .partners-slider-section {
        padding: 25px 0 !important;
        padding-bottom: 30px !important;
    }

    .partners-track {
        gap: 30px !important;
        /* Mniejszy odstęp na telefonie, żeby zachować proporcje */
    }

    .partner-logo {
        width: 120px !important;
        height: 60px !important;
    }
}

.partners-title {
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 20px;
    color: var(--white) !important;
    /* Zmiana koloru napisu na biały, by był czytelny na tle hero */
}

/* ==========================================================================
   STWORZENIE .HERO-CONTENT I DOCIĘCIE SLIDERA
   ========================================================================== */

/* Tworzymy klasę od nowa, nadając jej maksymalną bezpieczną szerokość */
.hero-content {
    width: 100% !important;
    max-width: 1200px !important;
    /* Szerokość dopasowana do reszty sekcji na Twojej stronie */
    margin: 0 auto !important;
    /* Wycentrowanie całego bloku na środku ekranu */
    overflow: hidden !important;
    /* KLUCZOWE: Obcina loga dokładnie na bocznych krawędziach */
    padding: 0 20px !important;
    /* Bezpieczny wewnętrzny odstęp od brzegów */
    box-sizing: border-box !important;
}

/* Dostosowanie slidera, aby nie wymuszał już szerokości całego okna (vw) */
.partners-slider-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 30px 0 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    /* Przezroczyste tło, by stopiło się z błękitem hero */
    left: auto !important;
    transform: none !important;
    overflow: hidden !important;
}

.partners-slider {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    background-color: transparent !important;
}

/* ==========================================================================
   NOWA KLASA .HERO2 DLA PODSTRON (O NAS, KONTAKT)
   ========================================================================== */

.hero2 {
    width: 100% !important;
    max-width: 80% !important;
    background: transparent !important;
    color: var(--white);
    padding: 60px 20px !important;
    /* Estetyczne odstępy od góry i dołu sekcji */
    box-sizing: border-box !important;
}

/* Wyrównanie głównego tytułu sekcji (np. "O nas") na środku */
.hero2 .section-title {
    text-align: center !important;
    color: var(--light-color) !important;
    /* Jasnoniebieski kolor tytułu dla kontrastu */
    margin-bottom: 30px !important;
}

/* Formatowanie głównego akapitu wprowadzającego pod tytułem */
.hero2>p {
    text-align: center !important;
    max-width: 800px !important;
    margin: 0 auto 40px auto !important;
    /* Centruje blok tekstu i dodaje odstęp od siatki */
    font-size: 1.1rem !important;
    line-height: 1.6 !important;
}

/* ==========================================================================
   STRUKTURA SIATKI .ABOUT-GRID WEWNĄTRZ SEKCJI .HERO2
   ========================================================================== */

.hero2 .about-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    /* Idealny podział na dwie równe kolumny obok siebie */
    gap: 50px !important;
    /* Przestrzeń między zdjęciem a blokiem tekstowym */
    max-width: 1200px !important;
    margin: 0 auto !important;
    /* Centrowanie całej siatki na środku ekranu */
    align-items: center !important;
    /* Centrowanie zawartości kolumn w pionie */
}

/* Zabezpieczenie wyglądu zdjęcia w lewej kolumnie */
.hero2 .about-image {
    width: 100% !important;
    height: 350px !important;
    /* Optymalna wysokość zdjęcia */
    border-radius: 12px !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
    /* Dodaje nowoczesny, głęboki cień pod zdjęciem */

}

/* Formatowanie tekstów w prawej kolumnie ("Nasza Misja") */
.hero2 .about-grid h3 {
    font-size: 1.6rem !important;
    color: var(--light-color) !important;
    /* Tytuł misji w kolorze jasnoniebieskim */
    margin-bottom: 15px !important;
    text-align: left !important;
    /* Tekst wyrównany do lewej, dla lepszej czytelności */
}

.hero2 .about-grid p {
    font-size: 1rem !important;
    color: var(--white) !important;
    line-height: 1.6 !important;
    text-align: left !important;
    /* Opis misji wyrównany do lewej */
}

/* ==========================================================================
   RESPONSYWNOŚĆ DLA TELEFONÓW (Ekran mobilny)
   ========================================================================== */
@media (max-width: 768px) {
    .hero2 {
        padding: 40px 15px !important;
    }

    /* Na telefonie zmieniamy układ z 2 kolumn na 1 (tekst pod zdjęciem) */
    .hero2 .about-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .hero2 .about-image {
        height: 250px !important;
        /* Nieco niższe zdjęcie na ekranie telefonu */
    }

    /* Na telefonie możemy opcjonalnie wyśrodkować teksty misji, by wyglądały zgrabniej */
    .hero2 .about-grid h3,
    .hero2 .about-grid p {
        text-align: center !important;
    }
}

/* ==========================================================================
   POPRAWKA ROZMIARÓW LOGOTYPÓW PO DODANIU LINKOWANIA <a>
   ========================================================================== */

/* Sprawiamy, że link <a> zajmuje 100% szerokości i wysokości kafelka partnera */
.partner-logo a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    /* Usuwa ewentualne podkreślenia linku */
}

/* Gwarantujemy, że obrazek wewnątrz linku zachowa swoje idealne proporcje */
.partner-logo a img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    /* Chroni grafikę przed zniekształceniem i rozciąganiem */
}

/* ==========================================================================
   POPRAWKA: SKALOWANIE NAPISU WITAMY NA TELEFONIE
   ========================================================================== */
@media (max-width: 768px) {

    /* Zmniejszamy czcionkę nagłówka na telefonie, żeby napis zmieścił się w całości */
    .hero h1,
    .hero-content h1,
    h1 {
        font-size: 2rem !important;
        /* Bezpieczny rozmiar na smartfony (około 35px) */
        white-space: normal !important;
        /* Pozwala na ewentualne zawinięcie tekstu, jeśli ekran jest bardzo mały */
    }
}

@media (min-width: 769px) {
    br.mobile-br {
        display: none !important;
        /* Na dużych ekranach całkowicie wyłączamy działanie tego <br> */
    }
}

/* ==========================================================================
   UKRYWANIE PIONOWEJ KRESECZKI NA TELEFONIE
   ========================================================================== */
@media (max-width: 768px) {

    /* Ta reguła całkowicie wymazuje kreseczkę w wersji mobilnej */
    span.desktop-only-inline {
        display: none !important;
    }
}

/* ==========================================================================
   STYLIZACJA SAMEGO GUZICZKA LINKUJĄCEGO
   ========================================================================== */

/* Usuwamy domyślne formatowanie linku tekstowego z tagu <a> */
.btn-more-link {
    text-decoration: none !important;
    display: inline-block !important;
    margin-top: 15px !important;
}

/* Wygląd przycisku szmaragdowego */
.btn-more {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background-color: #029e84 !important;
    /* Szmaragdowy */
    color: var(--white) !important;

    padding: 12px 25px !important;
    border-radius: 12px !important;
    /* Zaokrąglenie ze zdjęcia */
    font-size: 0.85rem !important;
    font-weight: bold !important;
    letter-spacing: 0.5px !important;

    box-shadow: 5px 5px 10px rgb(0, 0, 0);
    transition: background-color 0.3s ease, transform 0.2s ease !important;
}

/* POPRAWKA HOVER: Przycisk reaguje TYLKO po najechaniu bezpośrednio na niego */
.btn-more-link:hover .btn-more {
    background-color: #027a66 !important;
    /* Przyciemnienie szmaragdu */
    transform: translateY(-2px) !important;
    /* Delikatne uniesienie */
}

/* ==========================================================================
   ZWIĘKSZENIE ZMIENNEGO ODSTĘPU MIĘDZY TEKSTEM A PRZYCISKIEM
   ========================================================================== */

.features-grid .feature-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;

    /* Zwiększamy minimalną wysokość kafelka, aby dać "oddech" strukturze */
    min-height: 420px !important;

    /* Bezpieczne odstępy: góra 40px, boki 25px, stały dół 35px */
    padding: 40px 25px 35px 25px !important;
    box-sizing: border-box !important;
}

.features-grid .feature-card .btn-more-link {
    /* Sprężyna połączona z gwarantowanym minimalnym dużym odstępem od tekstu */
    margin-top: auto !important;
    padding-top: 25px !important;
    /* To wymusza, aby odstęp nigdy nie był mniejszy niż 25px, nawet przy długim tekście */

    margin-bottom: 0 !important;
    text-decoration: none !important;
    display: inline-block !important;
}

/* ==========================================================================
   POPRAWKA: ROZSUNIĘCIE KAFELKÓW W SLIDERZE (METODA SKALOWANIA)
   ========================================================================== */

/* 1. Dodajemy margines ochronny do głównego okna slidera, żeby kafelki nie dotykały strzałek */
.slider-container {
    overflow: hidden !important;
    padding: 0 15px !important;
    /* Tworzy bezpieczną przestrzeń po bokach */
    box-sizing: border-box !important;
}

/* 2. Zmuszamy taśmę do ignorowania domyślnych blokad szerokości */
.features-grid {
    display: flex !important;
    gap: 30px !important;
    /* TO TWORZY CZYSTĄ PRZERWĘ 30PX MIĘDZY KAFELKAMI */
    width: auto !important;
}

/* 3. Matematyczna korekta szerokości każdego kafelka na taśmie */
.features-grid>div,
.features-grid>.feature-card,
.features-grid .feature-card-link-wrapper {
    /* Każdy kafelek zajmuje teraz szerokość okna pomniejszoną o przerwę, 
       dzięki czemu JS idealnie trafia w środek bez rozjeżdżania pętli */
    min-width: calc(100% - 0px) !important;
    max-width: calc(100% - 0px) !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* 4. Przywrócenie prawidłowego wyglądu samej karty */
.features-grid .feature-card {
    border-radius: 15px !important;
    /* Zaokrąglone rogi kafelka */
    padding: 40px 25px 35px 25px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
}

/* ==========================================================================
   WYRÓWNANIE WYSOKOŚCI KAFELKÓW NA TELEFONIE
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. Zmuszamy taśmę slidera do utrzymania równej, stałej wysokości dla każdego slajdu */
    .features-grid {
        align-items: stretch !important;
        /* To kluczowe: zmusza wszystkie elementy w rzędzie do równej wysokości */
    }

    /* 2. Każdy kontener kafelka na taśmie musi zająć 100% wysokości pionowej siatki */
    .features-grid>div,
    .features-grid>.feature-card,
    .features-grid .feature-card-link-wrapper {
        display: flex !important;
        height: auto !important;
        /* Pozwala elastycznie rozciągać się w pionie */
    }

    /* 3. Właściwa błękitna karta rozciąga się od samej góry do samego dołu */
    .features-grid .feature-card {
        height: 100% !important;
        /* Gwarantuje, że błękitne tło zapełni całą wysokość najdłuższego kafelka */
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;

        /* Stała, bezpieczna wysokość na telefonie, żeby zielone przyciski stały równo */
        min-height: 440px !important;
    }
}

@media (max-width: 768px) {

    /* Klasa wewnętrznej karty/kafelka (jasnoniebieskiego elementu) */
    .klasa-twojego-kafelka {
        height: 100% !important;
        min-height: 400px !important;
        /* Wartość dopasuj testowo */
    }
}

@media (max-width: 768px) {

    /* 1. Tor slidera musi wymusić równą wysokość dla wszystkich kafelków wewnątrz */
    .features-grid {
        display: flex !important;
        align-items: stretch !important;
        /* To kluczowa linijka – rozciąga kafelki w pionie */
    }

    /* 2. Każdy kafelek dostaje pełną wysokość i układa swoje elementy wewnętrzne */
    .feature-card {
        display: flex !important;
        flex-direction: column !important;
        /* Elementy w kafelku idą od góry do dołu */
        justify-content: space-between !important;
        /* Wpycha przycisk "Dowiedz się więcej" na sam dół */
        height: auto !important;
        /* Pozwala flexboxowi kontrolować wysokość */
    }

    /* 3. Opcjonalne, ale zalecane: sprawia, że tekst nie przykleja się do przycisku */
    .feature-card p {
        flex-grow: 1;
        /* Tekst zajmie całą dostępną przestrzeń, spychając guzik */
        margin-bottom: 20px;
        /* Doda ładny odstęp nad przyciskiem */
    }
}

@media (max-width: 768px) {

    /* 1. KONTENER (Tor slidera) - Wywalamy stąd CSS Grid i wymuszamy czysty Flexbox */
    .features-grid {
        display: flex !important;
        align-items: stretch !important;
        /* To kluczowa linijka – rozciąga kafelki w pionie do równej wysokości */
        gap: 30px !important;
        width: auto !important;
        grid-template-columns: none !important;
        /* Blokujemy pozostałości po gridzie */
    }

    /* 2. POJEDYNCZY KAFELEK - Łączymy powtarzające się klasy w jedną, czystą regułę */
    .features-grid .feature-card {
        display: flex !important;
        flex-direction: column !important;
        /* Elementy wewnątrz idą od góry do dołu */
        justify-content: space-between !important;
        /* Wpycha przycisk DOWIEDZ SIĘ WIĘCEJ na sam dół */
        align-items: center !important;

        width: 100% !important;
        height: auto !important;
        /* Pozwala flexboxowi (rodzicowi) rozciągnąć kartę w pionie */
        min-height: 440px !important;
        /* Bezpieczna, minimalna wysokość */

        border-radius: 15px !important;
        padding: 40px 25px 35px 25px !important;
        box-sizing: border-box !important;
    }

    /* 3. TEKST OPISU - Dodajemy mu właściwość, która wypełni pustą przestrzeń */
    .features-grid .feature-card p {
        flex-grow: 1 !important;
        /* Pcha przycisk w dół, jeśli tekstu jest mniej */
        margin-bottom: 20px !important;
    }

    /* 4. LINK PRZYCISKU - Sprężyna wypychająca go idealnie do równego spodu */
    .features-grid .feature-card .btn-more-link {
        margin-top: auto !important;
        /* Gwarantuje równe stanie przycisków */
        padding-top: 25px !important;
        margin-bottom: 0 !important;
        text-decoration: none !important;
        display: inline-block !important;
    }
}

/* Kontener wyrównany do lewej strony */
.fb-clean-container {
    display: flex;
    justify-content: flex-start;
    /* Wyrównanie do lewej krawędzi */
    align-items: center;
    padding: 15px 0 5px 0;
    /* Górny odstęp od e-maila */
    margin: 0;
    background: transparent;
}

/* Styl dla klikalnego linku-ikony */
.fb-icon-link {
    display: inline-flex;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    margin-left: 20px;
}

/* Efekt najechania myszką (delikatne podświetlenie i lekkie powiększenie) */
.fb-icon-link:hover {
    opacity: 0.85;
    transform: scale(1.05);
    /* Lekkie powiększenie po najechaniu myszką */
}

/* Styl powiększonej, białej ikony */
.fb-large-icon {
    width: 42px;
    /* Wyraźnie większy rozmiar dopasowany do samodzielnego przycisku */
    height: 42px;
    fill: #ffffff;
    /* Zmiana koloru na czystą biel */
    display: inline-block;
    flex-shrink: 0;
}

.feature-img {
    height: 2.0em;
    /* Dopasowuje wysokość obrazka do wysokości linii tekstu */
    width: auto;
    /* Zachowuje oryginalne proporcje obrazka */
    vertical-align: middle;
    /* Wyrównuje obrazek w pionie względem tekstu (opcjonalnie) */
    border-radius: 10px;
    /* Zaokrągla rogi obrazka dla estetyki */
}

@media (max-width: 768px) {
    .hero2 .about-image {
        width: 100% !important;
        height: auto !important;
        /* Zdjęcie naturalnie zmniejszy się proporcjonalnie */
    }
}

.container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: center;
}

.card-carousel {
    position: relative;
    width: 320px;
    height: 420px;
    perspective: 1000px;
}

/* Styl stylizowany na czysty Polaroid/Kartę */
.card {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    padding: 15px;
    /* Biała ramka wokół zdjęcia */
    padding-bottom: 40px;
    /* Szerszy dół jak w zdjęciach Polaroid */
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
    cursor: pointer;
    user-select: none;
    /* Zmiana na płynniejsze krzywe i dodanie akceleracji GPU */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1),
        filter 0.6s ease,
        opacity 0.6s ease;
    will-change: transform, opacity;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* Stany karuzeli kontrolowane przez JavaScript */
.card.active {
    transform: translate3d(0, 0, 0) scale(1);
    z-index: 3;
    opacity: 1;
    filter: blur(0px);
}

.card.next {
    transform: translate3d(15%, 0, -100px) scale(0.85);
    z-index: 2;
    opacity: 0.7;
    filter: blur(2px);
    transform: translateX(40px) !important;
    /* Wartość ujemna przesuwa w lewo */
    transition: transform 0.3s ease !important;
    transform: scale(0.8) translateX(150px) !important;
    z-index: 1;
}

.card.prev {
    transform: translate3d(-15%, 0, -100px) scale(0.85);
    z-index: 2;
    opacity: 0.7;
    filter: blur(2px);
    transform: translateX(-40px) !important;
    /* Wartość ujemna przesuwa w lewo */
    transition: transform 0.3s ease !important;
    transform: scale(0.8) translateX(-150px) !important;
    z-index: 1;
}

.card.hide {
    transform: translate3d(0, 0, -200px) scale(0.7);
    z-index: 1;
    opacity: 0;
    filter: blur(5px);
}

/* Wymagane, aby strzałki pozycjonowały się względem kontenera głównego */
.container {
    position: relative;
    align-items: center;
    /* Wyśrodkuje strzałki w pionie obok kart */
}

/* Podstawowy styl strzałek dla komputerów */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
    transition: background 0.3s ease, transform 0.2s ease;
}

.carousel-btn:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.1);
}

/* Rozsunięcie strzałek na boki ekranu komputera */
.carousel-btn.prev {
    left: calc(50% - 160px - 170px);
}

.carousel-btn.next {
    right: calc(50% - 160px - 170px);
}

/* UKRYWANIE STRZAŁEK NA URZĄDZENIACH MOBILNYCH (poniżej tabletów) */
@media (max-width: 768px) {
    .carousel-btn {
        display: none !important;
        /* Strzałki znikają na telefonie */
    }
}

@media (max-width: 768px) {


    div.about-text.change-mobile h3 {
        text-align: center !important;
    }

    div.about-text.change-mobile p {
        text-align: left !important;
    }
}


/* Wymuszenie układu pionowego dla kontenera */
.hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    min-height: auto;
    /* Zapobiega ściskaniu elementów */
}

/* Styl dla tytułu na górze */
.slider-title {
    text-align: center;
    color: #ffffff;
    /* Biały kolor tekstu, dopasowany do tła */
    margin-bottom: 30px;
    /* Odstęp pod tytułem, przed sliderem */
    z-index: 10;
    /* Gwarantuje, że tekst nie schowa się pod karty */
}

/* Styl dla paragrafu na dole */
.slider-description {
    width: 100%;
    text-align: center;
    color: #ffffff;
    margin-top: 30px;
    /* Odstęp nad paragrafem, pod sliderem */
    z-index: 10;
}

/* Zapewnienie, że sam karuzela zajmuje odpowiednie miejsce w pionie */
.card-carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 20px 0;
    /* Dodatkowy margines góra/dół */
}

/* Reguła zadziała TYLKO dla ekranów mniejszych niż 768 pikseli */
@media (max-width: 767px) {
    
    /* Ukrywamy wszystko, co wystaje poza obszar karuzeli (czyli nieaktywne karty w tle) */
    .card-carousel {
        overflow: hidden !important;
        width: 100% !important;
        max-width: 340px !important; /* Dopasuj tę szerokość do rozmiaru jednej aktywnej białej karty */
        margin: 0 auto !important;
    }

    /* Zmuszamy wewnętrzne karty do zachowania pełnej szerokości kontenera, bez nakładania się */
    .card-carousel .card, 
    .card-carousel > div { 
        flex: 0 0 100% !important; /* Sprawia, że aktywna karta zajmuje 100% szerokości i nie daje się ścisnąć */
        max-width: 100% !important;
    }
}

.scroll-to-top2 {
    position: fixed !important;
    bottom: 20px !important;
    /* Odstęp od dołu ekranu */
    right: 10px !important;
    /* Zmniejszenie tej wartości (np. z 30px na 10px) przesunie przycisk maksymalnie do prawej krawędzi okna */
    z-index: 1000 !important;
    /* Gwarantuje, że przycisk nie schowa się pod tło */

    /* Wymiary i kształt */
    width: 50px;
    height: 50px;
    border-radius: 50%;

    /* Kolorystyka i cień */
    background-color: #8e8e91;
    /* Nowoczesny niebieski */
    color: #000000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    /* Układ strzałki wewnątrz */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 20px;

    /* Płynna animacja najechania */
    transition: all 0.3s ease;
    display: none !important;
}

/* Efekt po najechaniu myszką */
.scroll-to-top2:hover {
    background-color: #ffffff;
    /* Ciemniejszy niebieski */
    transform: translateY(-5px);
    /* Delikatne uniesienie */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Pokaż przycisk tylko na telefonach (ekrany mniejsze niż 768 pikseli) */
@media (max-width: 767px) {
    .scroll-to-top2 {
        display: flex !important; /* Przywraca flex, który masz obecnie w stylach */
    }
}

@media (max-width: 768px) {
  .container {
    margin-bottom: 40px; /* Zmień wartość według uznania */
  }
}