body {
    /* Ścieżka do zdjęcia - sprawdź czy nazwa pliku i folderu się zgadza */
    background-image: url('../showcase.jpeg') !important; 
    
    /* Główne parametry naprawcze: */
    background-repeat: no-repeat !important;  /* Zakazuje powielania zdjęcia (usuwa "frame") */
    background-size: cover !important;        /* Rozciąga zdjęcie, by zawsze wypełniało cały ekran */
    background-position: center center !important; /* Centruje zdjęcie */
    background-attachment: fixed !important;  /* ZAMRAŻA tło - karty usług będą się przesuwać nad nim */
    
    margin: 0;
    padding: 0;
}
}
/* --- 1. STABILIZACJA UKŁADU (Koniec skakania stron) --- */
html {
    overflow-y: scroll; /* Zawsze wymusza pasek przewijania */
    scroll-behavior: smooth; /* Płynne przewijanie do sekcji */
}

body {
    background-color: #000000 !important;
    color: #FFFFFF;
    margin: 0;
    padding: 0;
}

/* --- 2. NAGŁÓWKI (Naprawa koloru na biały/niebieski) --- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #FFFFFF !important; /* Wszystkie nagłówki domyślnie białe */
    font-family: Arial, sans-serif;
    margin-bottom: 15px;
    display: block; /* Zmienione z inline-block dla lepszego układu */
}

h1, .h1 { color: #255985 !important; font-size: 32px; } /* Główny tytuł w kolorze firmowym */

/* --- 3. MENU I NAWIGACJA (Stała pozycja) --- */
#wb_menu30LayoutGrid {
    position: fixed !important;
    top: 0; left: 0; width: 100%;
    z-index: 9999 !important;
    background-color: rgba(0, 0, 0, 0.95) !important;
    border-bottom: 1px solid #222;
    backdrop-filter: blur(5px);
}

/* Wyśrodkowanie i ujednolicenie szerokości */
#menu30LayoutGrid, #header3LayoutGrid {
    max-width: 900px !important;
    margin: 0 auto !important;
}

/* --- 4. TWOJE STYLE SPECJALNE (Ulepszone) --- */
.reveal-btn {
    background: #255985;
    color: white !important;
    border: none;
    padding: 8px 18px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: bold;
    transition: all 0.3s;
    text-transform: uppercase;
}

.reveal-btn:hover {
    background: #1a3f5e;
    box-shadow: 0 0 10px rgba(37, 89, 133, 0.5);
}

.phone-link {
    color: #255985 !important;
    font-weight: bold;
    text-decoration: none;
    font-size: 1.2em;
    transition: color 0.3s;
}

.phone-link:hover {
    color: #0078FF !important;
}

/* Styl dla Twoich logów/tekstów Courier */
.CustomStyle {
    font-family: "Courier New", monospace;
    font-weight: bold;
    color: #2E74B5 !important;
}

/* --- 5. POPRAWKA DLA MOBILNYCH --- */
@media (max-width: 480px) {
    #wb_menu30Menu li {
        width: 100% !important;
        text-align: center;
    }
}
#wb_header3LayoutGrid { padding-top: 60px; }


/* Szerokość dla 5 przycisków na komputerach */
#wb_menu30Menu li {
   width: 20% !important;
}

/* Poprawka dla telefonów - żeby przyciski znów były jeden pod drugim */
@media (max-width: 480px) {
   #wb_menu30Menu li {
      width: 100% !important;
      padding: 10px 0 !important;
   }
}
/* Poprawa czytelności kart usług */
#features4CardContainer h1 {
    color: #E0E0E0 !important; /* Jasny szary, prawie biały - idealny dla oka */
    font-weight: normal;
    line-height: 1.4;
    margin-top: 10px;
    display: block;
}

/* Wyróżnienie głównych tytułów w kartach (te większe) */
#features4Card1-card-item1 h1, 
#features4Card2-card-item1 h1, 
#features4Card3-card-item1 h1 {
    color: #E0E0F9 !important; /* Twój firmowy niebieski dla tytułu usługi */
    font-size: 24px !important;
    font-weight: bold !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Styl dla mniejszych opisów pod tytułami */
#features4Card1-card-item2 h1, 
#features4Card2-card-item2 h1, 
#features4Card3-card-item2 h1 {
    font-size: 16px !important;
    color: #CCCCCC !important; /* Delikatnie ciemniejszy szary dla opisu */
}

/* Efekt najechania na kartę - opcjonalnie, dla lepszego UX */
.card:hover {
    border-color: #255985 !important;
    transition: all 0.3s ease;
}
/* NAPRAWA KARTY POWITALNEJ - EFEKT DYMNY */
#wb_Card1 {
    display: block;
    margin: 140px auto 40px auto !important;
    max-width: 700px;
    width: 90%;
    
    /* Zamiast czarnego tła - gradient dymny jak w usługach */
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%) !important;
    
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Cienka, ledwo widoczna ramka */
    border-radius: 0px; /* Jeśli usługi mają ostre rogi, usuń zaokrąglenie */
    padding: 60px 20px;
    text-align: center;
    box-sizing: border-box;

    /* Rozmycie zdjęcia elektryka pod tekstem */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Teksty w karcie powitalnej */
#Card1-card-item0 { 
    color: #AAAAAA !important; 
    font-size: 14px; 
    text-transform: uppercase; 
    letter-spacing: 4px;
    margin-bottom: 10px;
}

#Card1-card-item1 { 
    color: #FFFFFF !important; 
    font-size: 20px; 
    font-weight: normal;
}

/* Główny napis KWIATECH SERVICE - zróbmy go potężnym */
/* Stylizacja głównego napisu w karcie na środku */
#Card1-card-item2 {
    color: #FFA500 !important;      /* Identyczny pomarańczowy jak na górze */
    font-family: Arial, Helvetica, sans-serif !important;
    font-weight: bold !important;    /* Grubość czcionki */
    font-size: 32px !important;      /* Wielkość (możesz zwiększyć do 42px jeśli ma być większy) */
    text-transform: none !important; /* Wyłącza SAME WIELKIE LITERY, by pisać jak w menu */
    letter-spacing: normal !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important; /* Delikatny cień dla czytelności */
} 
}

#Card1-card-item3 { 
    color: #CCCCCC !important; 
    font-size: 16px; 
    margin-top: 30px;
    font-style: italic;
}
/* EFEKT DLA NAGŁÓWKA KARTY (item1) */
#features4Card1-card-item1 h1, 
#features4Card2-card-item1 h1, 
#features4Card3-card-item1 h1 {
    transition: all 0.4s ease-in-out; /* Płynność animacji */
    display: inline-block; /* Ważne, żeby powiększenie działało poprawnie */
    cursor: pointer;
}

/* EFEKT PO NAJECHANIU (HOVER) */
#features4Card1-card-item1:hover h1,
#features4Card2-card-item1:hover h1,
#features4Card3-card-item1:hover h1 {
    /* 1. POWIĘKSZENIE */
    transform: scale(1.1); 
    
    /* 2. ROZJAŚNIENIE I "PSTROKATY" KOLOR (Neonowy błękit/żółty) */
    color: #00FFFF !important; /* Jasny błękit/turkus */
    
    /* 3. ŚWIECENIE (Glow) */
    text-shadow: 0 0 10px #00FFFF, 0 0 20px #FFA500; 
    
    /* 4. LEKKIE UNIESIENIE */
    filter: brightness(1.3);
}
/* Efekt dla całej karty usługi */
#wb_features4Card1, #wb_features4Card2, #wb_features4Card3 {
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

#wb_features4Card1:hover, #wb_features4Card2:hover, #wb_features4Card3:hover {
    transform: translateY(-10px); /* Karta unosi się do góry o 10px */
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3) !important; /* Turkusowa poświata pod kartą */
    border: 1px solid #00FFFF !important; /* Ramka zmienia kolor na turkusowy */
}
@media (max-width: 480px) {
    /* Pasek musi mieć widoczną zawartość */
    #wb_menu30LayoutGrid, #menu30LayoutGrid {
        position: relative !important;
        z-index: 100 !important;
        overflow: visible !important;
    }

    /* Hamburger - absolutny król warstw */
    .hamburger-icon {
        display: block !important;
        position: fixed !important; /* FIXED wyrywa go ponad wszystko, nawet Layout Gridy */
        top: 10px !important; /* Dopasuj, żeby był na środku czarnego paska */
        right: 15px !important;
        width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 35px !important;
        color: #FFA500 !important;
        background: transparent !important;
        text-align: center !important;
        cursor: pointer !important;
        z-index: 2147483647 !important; /* Najwyższy możliwy z-index */
        pointer-events: auto !important;
        -webkit-appearance: none;
    }

    /* Naprawa listy menu */
    #wb_menu30Menu ul {
        display: none !important;
        position: fixed !important; /* Menu też musi być FIXED, by przykryło treść strony */
        top: 60px !important;
        left: 0 !important;
        width: 100% !important;
        background: rgba(0, 0, 0, 0.98) !important;
        z-index: 2147483646 !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    /* Klasa aktywująca menu */
    #wb_menu30Menu ul.open {
        display: block !important;
    }

    #wb_menu30Menu li a {
        display: block !important;
        padding: 15px !important;
        color: white !important;
        border-bottom: 1px solid #333 !important;
    }
	/* 1. Stylizacja całej listy rozwijanej */
    #wb_menu30Menu ul.open {
        display: block !important;
        background: #000000 !important; /* Głęboka czerń */
        border-top: 2px solid #FFA500 !important; /* Pomarańczowa linia oddzielająca u góry */
    }

    /* 2. Stylizacja poszczególnych pozycji w menu */
#wb_menu30Menu li {
        border-bottom: 1px solid #333 !important; 
        list-style: none !important;
        background-color: #000 !important;
    }

    /* 3. Naprawa tekstu i odstępów - to rozwiąże problem przekreślania */
   #wb_menu30Menu li a {
        display: flex !important;
        align-items: center !important; /* Centruje tekst w pionie */
        min-height: 50px !important; /* Wymusza wysokość pola */
        padding: 5px 20px !important;
        color: #FFFFFF !important;
        text-decoration: none !important; /* Usuwa tę linię przekreślającą (underline) */
        border: none !important; /* Usuwa ewentualne obramowania linku */
        outline: none !important;
        font-size: 16px !important;
        line-height: normal !important;
        background: none !important;
    }

    /* Efekt po dotknięciu (wizualne potwierdzenie kliknięcia) */
    #wb_menu30Menu li a:active {
        background-color: #1a1a1a !important;
        color: #FFA500 !important;
    }
}
/* Stały kontener galerii */
.post-gallery { 
    width: 320px; 
    height: 240px; 
    display: flex; 
    flex-wrap: wrap; 
    gap: 4px; 
    margin: 15px 0;
    background: #000;
    border-radius: 4px;
    overflow: hidden;
}

/* Podstawowy styl elementu */
.gallery-item { 
    flex: 1 1 auto; 
    overflow: hidden; 
    position: relative;
    background: #222;
}

.gallery-item img, .gallery-item video { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block;
}

/* Logika podziału obszaru 320x240 */

/* 1 element: wypełnia całość */
.count-1 .gallery-item { width: 320px; height: 240px; }

/* 2 elementy: dwa poziome paski (320x118) */
.count-2 .gallery-item { width: 320px; height: 118px; }

/* 3 elementy: jeden duży na górze, dwa małe na dole */
.count-3 .gallery-item:nth-child(1) { width: 320px; height: 118px; }
.count-3 .gallery-item:nth-child(n+2) { width: 158px; height: 118px; }

/* 4 elementy: klasyczna macierz 2x2 */
.count-4 .gallery-item { width: 158px; height: 118px; }

/* Jeśli jest więcej niż 4, reszta zostanie ukryta lub ułożona niżej - 
   możemy ograniczyć pętlę w kodzie do 4 elementów */