@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap');


:root {
    --primary-color: #1F5B5C;
    /* Teraz zielony */
    --primary-dark: #15585a;
    /* Teraz ciemny - zielony */
    --primary-light: #22787b;
    /* Teraz jasny - zielony */
    --secondary-color: #dda84b;
    /* Teraz żółty */
    --text-color: #000000;
    --text-color-white: #ffffff;
    --szary: #4e5555;
    --szary-jasny: #e9e9e9;
    --main-font-family: 'Roboto', sans-serif;
    /* Nazwa czcionki */
    --base-font-size: 1rem;
    /* Rozmiar bazowy */
    --heading-font-weight: 700;
    /* Grubość nagłówka */
    --body-font-weight: 400;
    /* Grubość tekstu */
    --tytul-font-size: 24px;
    /* Wielkość tekstu */
}


html {
    scroll-behavior: smooth;
}

/* Twoje style podstawowe i banera */
body {
    margin: 0;
    padding-top: 80px;
    /* Dodatkowy padding dla stałego nagłówka (header h-20) */

    background-color: #f0f4f8;
    font-family: var(--main-font-family);
    font-size: var(--base-font-size);
    font-weight: var(--body-font-weight);
}

p {
    padding: 0 0 15px 0;
}
.shadow-box  {
    --tw-shadow: 0 2px 2px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    border-left: 3px solid var(--secondary-color);
}
.container {
    width: 1400px;
    margin: 0 auto;
    position: relative;
    clear: both;
}

.container-baner h1 {
    font-size: 1.99rem;
    padding-top: 10px;
    font-family: var(--main-font-family);
}

.tresc h2 {
    font-size: 1.5rem;
    color: var(--primary-color);
    line-height: 1.2em;
    margin: 0 0 15px 0;
}

.content-container.mx-auto.bg-white.shadow-xl.rounded-2g.p-6.md\:p-10 {
    border-radius: 12px;
}

/* Style the buttons that are used to open and close the accordion panel */
.tresc .accordion {
    background-color: #ffffff;
    color: var(--text-color);
    cursor: pointer;
    padding: 30px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    margin: 5px 0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.tresc .accordion:after {
    content: '\02795';
    /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    color: var(--secondary-color);
    float: right;
    margin-left: 5px;
    line-height: 4em;
}

.tresc .active:after {
    content: "\2796";
    /* Unicode character for "minus" sign (-) */
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.tresc .active,
.accordion:hover {
    background-color: var(--szary-jasny);
}

/* Style the accordion panel. Note: hidden by default */
.tresc.panel {
    padding: 0 30px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}


/*---------------------menu sakramentyy---------------------*/

.menu_sakramenty {
    display: block;
    margin: 10px 0;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .5px;
    background-color: #fff;
}

.sakr_button_menu {
    display: block;
    /* width: 15%; */
    background-color: var(--secondary-color);
    padding: 10px;
    margin: 5px;
    float: left;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    text-align: center;
    color: #fff;
}

.sakr_button_menu:hover {
    color: var(--text-color-white);
    background-color: var(--primary-color);
}

/* Ta reguła dotyczy WSZYSTKICH elementów na stronie, które mają ID 
   i są celem kotwicy (do których przewija przeglądarka). */
:target,
[id] {
    /* Ustawia margines przewijania na 30px powyżej kotwicy.
       Przeglądarka przewinie do tej pozycji. */
    scroll-margin-top: 150px;

    /* Dodatkowo, możesz dodać płynne przewijanie do całej strony */
    scroll-behavior: smooth;
}

.tytul_maly {
    color: var(--primary-color);
    font-size: 28px;
    font-weight: 400;
    line-height: 35px;
    text-align: left;
    margin: 20px 0px 30px;
}

.tresc ul li {
    /* 1. Resetujemy listę i ustawiamy pozycję do pseudo-elementu */
    list-style: none;
    /* Usuwamy domyślne wypunktowanie */
    position: relative;
    /* Ważne, aby móc pozycjonować kwadrat absolutnie */
    padding-left: 20px;
    /* Zostawiamy miejsce na większy kwadrat */

    /* 2. Style tekstu */
    margin: 0 0 0 20px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 14px;
    font-weight: 400;
    color: var(--text-color);
}

.tresc ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 11px;
    transform: translateY(0px);
    width: 8px;
    height: 8px;
    background-color: var(--secondary-color);
    /* background-color: #dda84b; */
}

.tresc .data-ogloszenia {
    padding: 0 0 40px 0;
}

/*---------------------koniec menu sakramentyy---------------------*/
/* 1. DOMYŚLNY STAN POCZĄTKOWY (Ukryty i Przesunięty) */
.fade-on-scroll {
    /* Ustawia domyślne przejście: 0.8s, płynne, dla opacity i transform */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    opacity: 0;
    /* Ukryj element */
    transform: translateY(25px);
    /* Domyślne przesunięcie w dół (np. 25px) */
}

/* 2. STAN KOŃCOWY (Widoczny i Na Miejscu) */
/* Klasa 'active' będzie dodawana przez JavaScript, gdy element wejdzie w viewport */
.fade-on-scroll.active {
    opacity: 1;
    /* Pokaż element */
    transform: translateY(0);
    /* Wróć do pozycji wyjściowej */
}

/* 3. Nadpisywanie stylów z atrybutów data-* (opcjonalnie) */
.fade-on-scroll[data-y] {
    /* Użycie zmiennych CSS do dynamicznego ustawienia przesunięcia i czasu trwania */
    transform: translateY(var(--data-y, 25px));
}

.fade-on-scroll[data-duration] {
    transition-duration: var(--data-duration, 0.8s);
}

/* Domyślne style dla wszystkich elementów: */
.fade-on-scroll {
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    /* ... pozostałe style (opacity: 0, transform: translateY(...)) */
}

/* Nowa klasa dodająca opóźnienie 100ms */
.fade-on-scroll.delay-100 {
    transition-delay: 0.1s;
    /* Opóźnienie 300 milisekund */
}

/* Nowa klasa dodająca opóźnienie 200ms */
.fade-on-scroll.delay-200 {
    transition-delay: 0.2s;
    /* Opóźnienie 300 milisekund */
}

/* Nowa klasa dodająca opóźnienie 300ms */
.fade-on-scroll.delay-300 {
    transition-delay: 0.3s;
    /* Opóźnienie 300 milisekund */
}

/* Nowa klasa dodająca opóźnienie 400ms */
.fade-on-scroll.delay-300 {
    transition-delay: 0.4s;
    /* Opóźnienie 300 milisekund */
}

/* Nowa klasa dodająca opóźnienie 500ms */
.fade-on-scroll.delay-500 {
    transition-delay: 0.5s;
    /* Opóźnienie 300 milisekund */
}

/* Nowa klasa dodająca opóźnienie 600ms */
.fade-on-scroll.delay-600 {
    transition-delay: 0.6s;
    /* Opóźnienie 600 milisekund */
}





.podtytul {
    font-size: 24px;
    padding: 15px 0;
    color: var(--primary-color);
    font-weight: 600;
}







/* Stylowanie dla prostokątnego kontenera logo */
.logo-container {
    /* Ustawienie pozycji absolutnej względem Navigacji */
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    /* Białe tło prostokąta */
    width: 150px;
    /* Szerokość prostokąta */
    height: 150px;
    /* Wysokość prostokąta */
    padding: 15px;

    /* KLUCZOWA ZMIANA POZYCJONOWANIA: Po lewej stronie */
    left: 0;

    /* Usunięto transform: translateX(-50%);, które służyło do centrowania */
    transform: none;

    z-index: 60;

    /* Zaokrąglenie dolnych rogów */
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    transition: all 300ms ease;
}

.logo-container1 {
    width: 58px;

}



/*--------------------------------footer------------------------------------*/
.bgnd-4 {
    background-image: url(../img/stopka_box_bg.png);
    background-size: cover;
    background-position: center right;
    /*height: 380px;*/
}

.footer-widgets {
    padding: 60px 0px 40px;
    width: 100%;
    float: left;
    clear: both;
    margin: 0px;
    position: relative;
    font-size: 18px;

    background-color: var(--szary);

    font-weight: 300;
}

.column.dt-sc-one-fourth.first {
    width: 22%;
    font-weight: 700;
    color: var(--text-color-white);
}

.dt-sc-one-fourth {
    width: 19.0%;
}

.dt-sc-one-five {
    width: 27.0%;
}

.column {
    margin: 0px 0px 0px 2%;
    float: left;
    min-height: 1px;
    position: relative;
    box-sizing: border-box;
    color: var(--text-color-white);
    font-size: 14px;
}

.textwidget img {
    width: 30%;
    filter: grayscale(100%);
    filter: brightness(0) invert(0.5);
}

#footer .widget.widget_text ul li {
    list-style: none;
    line-height: 30px;
}

#footer .widget.widget_text ul li a {
    color: var(--text-color-white);
    font-weight: 400;

}

#footer .footer-copyright {
    float: left;
    margin: 0px;
    padding: 22px 0px 50px 0;
    width: 100%;
    clear: both;
    color: var(--text-color-white);
    font-size: 14px;
    background-color: var(--primary-color);
    text-align: center;
}

/*---------------------------------pasek animowany-------------------------------------*/
#blok {
    position: fixed;
    width: 100%;
    height: 2.8em;
    line-height: 2.8em;
    margin: 0 auto;
    border: none;
    font-size: 16px;
    background-color: #bc0c0c;
    overflow: hidden;
    bottom: 0;
    z-index: 999999999999;
    font-weight: 500;
    color: #fff;
}

#blok p {
    font-size: 18px;
}

#blok>p {
    position: absolute;
    margin: 0;
    white-space: nowrap;
    /* animation:przesun 50s linear infinite;*/
    /* -webkit-animation:przesun 50s linear infinite;*/
    /* dla Google Chrome, Safari, Opera 15+ */
}

#blok>p:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

/* ------------ANIMACJA-PRZESUN------------ */
@keyframes przesun {
    0% {
        transform: translateX(0);
        padding-left: 101%;
    }

    100% {
        transform: translateX(-100%);
        padding-left: 101%;
    }
}

@-webkit-keyframes przesun

/* dla Google Chrome, Safari, Opera 15+ */
    {
    0% {
        -webkit-transform: translateX(0);
        padding-left: 101%;
    }

    100% {
        -webkit-transform: translateX(-100%);
        padding-left: 101%;
    }
}

.kropka-color {
    color: #fff !important;
    margin: 0 20px;
}










/* Dodanie marginesu wewnętrznego, aby logo nie dotykało krawędzi okna */
/* Zastosowanie paddingu z kontenera nav (px-4 sm:px-6 lg:px-8) */
@media (min-width: 1024px) {

    /* Dopasowanie do lg breakpoint */
    .logo-container {
        left: 32px;
        /* Domyślny odstęp lg:px-8 = 32px */
    }
}

@media (min-width: 640px) and (max-width: 1023px) {

    /* Dopasowanie do sm breakpoint */
    .logo-container {
        left: 24px;
        /* Domyślny odstęp sm:px-6 = 24px */
    }
}

@media (max-width: 639px) {

    /* Poniżej sm breakpoint */
    .logo-container {
        left: 16px;
        /* Domyślny odstęp px-4 = 16px */
    }
}

/* KLUCZOWY ELEMENT: Wystawanie PONIŻEJ navbarta */
.navbar-normal .logo-container {
    top: 0px;
    /* Wystawienie ok. 50px poniżej navbarta */
}

/* Dopasowanie, gdy navbar się zmniejsza (efekt 'shrink') */
.navbar-shrink .logo-container {
    top: 0px;
    height: 60px;
    padding: 5px;
    box-shadow: none;
    background-color: #ffffff00;
}

/* Obraz logo wewnątrz kontenera */
.logo-container img {
    max-height: 100%;
    width: auto;
}

/* Korekta dla elementu a#logo, aby zajmował minimalną przestrzeń i nie kolidował z menu */
.max-width-1400 a#logo {
    position: relative;
    /* Upewnienie się, że jest relatywny */
    padding: 0;
    margin: 0;
    width: 180px;
    /* Szerokość prostokąta */
    height: 64px;
    /* Wysokość navbarta */
    /* Na desktopie ten link jest praktycznie pusty, służy jako kotwica */
}

/* Dodanie marginesu do menu, aby nie kolidowało z kontenerem logo */
.max-width-1400 .max-width-1400.h-full.flex.items-center.justify-between {
    /* Nadanie minimalnego lewego marginesu, aby przesunąć menu (gdy jest w jednej linii) */
    padding-left: 200px;
    /* Szerokość logo (180px) + mały margines (20px) */
}

/* Na mniejszych ekranach (do 'lg'), gdzie logo nie jest absolutnie pozycjonowane */
@media (max-width: 1023px) {
    .logo-container {
        /* Na mobile przywracamy tekst lub chowamy logo, aby nie dominowało */
        display: none;
    }

    /* Przywracamy domyślne zachowanie linku logo, jeśli kontener jest ukryty */
    .max-width-1400 a#logo {
        padding-left: 16px;
        width: auto;
    }

    /* Usuwamy sztuczny padding z kontenera nawigacji */
    .max-width-1400 .max-width-1400.h-full.flex.items-center.justify-between {
        padding-left: 0;
    }
}

/* Zwiększenie przestrzeni na banerze, aby było widać wystający element. */
.banner {
    padding-top: 0px;
    /* Dodatkowa przestrzeń na wystający prostokąt */
}

/* BANNER i reszta stylów (skopiowane z poprzedniej wersji) */

.banner {
    /* Nowa wysokość: (2/3 wysokości widocznego obszaru) - (80px nagłówka) */
    height: calc(66.67vh - 80px);
    width: 100%;
    background-color: #1f5b5c;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease;

    background-image: url('/img/baner-parafiababice.jpg');
    background-size: cover;
    background-position: bottom;

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;



}

.banner:hover {
    background-color: rgb(46, 120, 121);
}

/* Responsywność wysokości banera */
@media (min-width: 640px) {

    /* sm breakpoint (Tailwind) */
    .banner {
        height: 40vh;
    }
}

@media (min-width: 1024px) {

    /* lg breakpoint (Tailwind) */
    .banner {
        height: 60vh;
    }
}

/* Warstwa przyciemniająca (Overlay) */
.banner-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
    /* Czarny z 50% przezroczystości */
    backdrop-filter: blur(3px);
    /* Lekkie rozmycie tła */
    mix-blend-mode: multiply;
    /* Mnoży się z tym, co jest pod spodem */
}

/* Kontener dla tekstu */
.banner-content {
    position: relative;
    z-index: 10;
    padding: 0rem;
    /* p-6 */
}

@media (min-width: 768px) {

    /* md breakpoint (Tailwind) */
    .banner-content {
        padding: 2.5rem;
    }

    /* md:p-10 */
}

/* Styl dla głównego tytułu (H1) */
.banner-title {
    color: white;
    font-weight: 500;
    /* font-extrabold */
    letter-spacing: -0.025em;
    /* tracking-tight */
    text-align: center;
    line-height: 1.2;
    /* leading-tight */
    text-shadow: 0 4px 6px rgba(0, 0, 0, 0.7);

    font-size: 1.875rem;
    /* text-3xl */
}

/* Responsywność rozmiaru tytułu */
@media (min-width: 640px) {
    .banner-title {
        font-size: 3rem;
    }
}

/* sm:text-5xl */
@media (min-width: 1024px) {
    .banner-title {
        font-size: 4.5rem;
    }
}

/* lg:text-7xl */
@media (min-width: 1280px) {
    .banner-title {
        font-size: 4rem;
    }
}

/* xl:text-8xl */

/* Styl dla podtytułu (SPAN) */
.banner-subtitle {
    display: block;
    font-weight: 300;
    /* font-light */
    margin-top: 0.5rem;
    /* mt-2 */
    color: var(--text-color-white);
    /* text-yellow-300 */

    font-size: 1.5rem;
    /* text-2xl */
}

/* Responsywność rozmiaru podtytułu */
@media (min-width: 640px) {
    .banner-subtitle {
        font-size: 2.25rem;
    }
}

/* sm:text-4xl */
@media (min-width: 1024px) {
    .banner-subtitle {
        font-size: 2.75rem;
    }
}

/* lg:text-6xl */


/* Styl dla motta (P) */
.banner-motto {
    color: white;
    text-align: center;
    margin-top: 1rem;
    /* mt-4 */
    font-style: italic;
    font-weight: 500;
    /* font-medium */
    opacity: 0.9;

    font-size: 0.875rem;
    /* text-sm */
}

/* Responsywność rozmiaru motta */
@media (min-width: 640px) {
    .banner-motto {
        font-size: 1.25rem;
    }
}

/* sm:text-xl */
/* === KONIEC STYLU BANERA === */

/* BANNER PODSTRONA i reszta stylów (skopiowane z poprzedniej wersji) */

.banner-podstrona {
    /* Nowa wysokość: (2/3 wysokości widocznego obszaru) - (80px nagłówka) */
    height: 120px;
    width: 100%;
    background-color: #1f5b5c;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transition: background-color 0.3s ease;
}

.banner-podstrona:hover {
    background-color: #2e7879;
}

.banner-podstrona-title {
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.banner-podstrona-title {
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.banner-podstrona-subtitle {
    font-size: clamp(1.2rem, 4vw, 2rem);
    font-weight: 400;
    opacity: 0.9;
    padding: 0 1rem;
}

.content {
    padding: 0rem;
    max-width: 1400px;
    width: 100%;
    margin: 0rem auto;
    background-color: transparent;
    border-radius: 8px;
}

.blocks-container {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    margin: -150px 0;
    padding: 0 20px;
    z-index: 10;
    position: relative;
}

.info-block {
    flex: 1;
    min-width: 280px;
    padding: 25px;
    background-color: #ffffff;
    border-top: 4px solid var(--secondary-color);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.info-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}


/* 6. STYLE BLOKÓW WEWNĄTRZ */
.block-title {
    font-size: var(--tytul-font-size);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--primary-color);
    padding-bottom: 0.5rem;
    display: flex;
    /* Użycie flexbox dla wyrównania ikony i tekstu */
    align-items: center;
}

.block-title svg {
    margin-right: 0.5rem;
    /* Odstęp między ikoną a tekstem */
}


.block-title-2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--secondary-color);
    padding-bottom: 0.5rem;
    display: flex;
    /* Użycie flexbox dla wyrównania ikony i tekstu */
    align-items: center;
}

.block-title-2 svg {
    margin-right: 0.5rem;
    /* Odstęp między ikoną a tekstem */
}

.block-text {
    color: #4b5563;
    font-size: 1rem;
    line-height: 1.7;
}

.main-content-area {
    padding: 200px 20px 50px;
    max-width: 1400px;
    margin: 0 auto;

}

.main-content-area-podstrona {
    padding: 40px 20px 50px;
    max-width: 1400px;
    margin: 0 auto;

}

.info-blok-srodek-dzien {
    font-weight: 600;
    font-size: 18px;
}

.info-blok-srodek-godziny {
    font-size: 14px;
    padding: 0 0 15px 0;
}


/* Klasa kontenera flex */
.flex-container {
    /* ZMIANA 1: Domyślnie na ekranach mobilnych ustawiamy układ kolumnowy */
    display: flex;
    flex-direction: column;
    min-height: 40vh;
}

.button-style-box {
    margin-top: 10px;
    /* Zmiana: Wyrównanie przycisku do centrum */
    text-align: left;
}

/* NOWOCZESNY STYL PRZYCISKU "czytaj więcej" */
.button-styl-2 {
    display: inline-block;
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: #ffffff;
    background-color: var(--primary-color);
    border: none;
    border-radius: 9999px;
    /* Zaokrąglony kształt pastylki */
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 10px rgba(170, 255, 244, 0.4);
    /* Subtelny cień */
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Efekt najechania (Hover Animation) */
.button-styl-2:hover {
    background-color: var(--primary-light);
    transform: translateY(-1px);
    /* Lekkie uniesienie */
    box-shadow: 0 6px 15px rgba(12, 75, 63, 0.6);
    /* Mocniejszy cień */
}

/* Efekt kliknięcia (Active/Focus) */
.button-styl-2:active,
.button-styl-2:focus {
    outline: none;
    background-color: #30a399;
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(56, 207, 207, 0.4);
}

.clear {
    clear: both;
}

/* ZMIANA 2: Nadpisanie dla desktopu - dla średnich ekranów (md) wracamy do układu wierszowego */
@media (min-width: 768px) {
    .flex-container {
        flex-direction: row;
    }
}

.ogloszenie-blok.box.effect4 {
    margin: 0 0 30px 0;
}

.ogloszenia-skrot-blok {
    min-width: 45%;
}

.tytul_ogloszenia {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--primary-color);
}

.tytul_data_blok {
    display: block;
    float: left;
}

/* Blok 1 (O proporcjach 2/3) */
.block-1-main {
    flex: 1 1 0%;
    background-image: url(/img/ogloszenia-tlo.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: rgb(0, 0, 0);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.wydarzenie-blok.box.effect4 {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    padding: 5px 0 5px 0px;
}

.opis-blok {
    text-align: left;
    padding: 0 0 0 10px;
    font-size: 14px;
}

.data-blok {
    padding: 15px;
}

.data-dzien {
    font-size: 40px;
}

.data-dzien-2 {
    font-size: 17px;
}

.aktualnosci-box {
    margin: 40px 0 0 0;
}

.aktualnosci-blok {
    border-left: 1px solid;
    border-radius: 12px;
    padding: 0 20px 0 20px;
}

h3.aktualnosci-blok-tytul {
    font-size: var(--tytul-font-size);
    color: var(--primary-color);
}

.aktualnosci-blok {
    margin: 0 0 20px 0;
    border-left: 3px solid var(--secondary-color);
}

/* Wymagana klasa dla kontenera nadrzędnego, aby absolutne pozycjonowanie działało w jego ramach */
.relative-container {
    position: relative;
}

/* Styl dla nakładającego się bloku (position: absolute) */
.absolute-overlay {
    position: absolute;
}

#mapa {

    /* Ustawienie wysokości jest kluczowe! */
    height: 600px;
    width: 100%;
    margin: 20px auto;
    /* Wyśrodkowanie na stronie */
    border: 1px solid #ccc;

}

.kontakt-box {
    background-color: transparent;

    padding: 0px;
    color: white;
    border-radius: 15px;
    right: 20px;
    top: 20px;
}

p.mapa-adres-tresc {
    color: var(--primary-color);
    font-weight: 600;
}

/* --- Style dla Nagłówka (header) --- */
.contact-card header {
    text-align: center;
    margin-bottom: 0px;
    /* mb-6 */
}

.contact-card h2 {
    font-size: 1 rem;
    /* text-3xl */
    font-weight: 800;
    /* font-extrabold */
    color: #1F2937;
    /* text-gray-900 */
    line-height: 1.25;
    /* leading-tight */
}

.contact-card h3 {
    font-size: 1rem;
    /* text-xl */
    font-weight: 600;
    /* font-semibold */
    color: #B8860B;
    /* text-primary-gold */
    margin-top: 4px;
    /* mt-1 */
}

/* --- Style dla Separatora (div.w-16.h-1.bg-primary-gold) --- */
.card-divider {
    width: 64px;
    /* w-16 */
    height: 4px;
    /* h-1 */
    background-color: #B8860B;
    margin-left: auto;
    margin-right: auto;
    margin-top: 12px;
    /* mt-3 */
    border-radius: 9999px;
    /* rounded-full */
}

/* --- Style dla Wierszy (flex items-start p-4 bg-background-light) --- */
.contact-row {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    /* p-4 */
    background-color: #F9FAFB;
    /* bg-background-light */
    border-radius: 8px;
    /* rounded-lg */
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    /* shadow-inner */
}

.contact-row svg {
    flex-shrink: 0;
    margin-right: 16px;
    /* mr-4 */
    margin-top: 4px;
    /* mt-1 */
    color: #B8860B;
    /* Ustawienie koloru stroke */
}

.contact-row .flex-grow p:first-child {
    font-size: 1 rem;
    /* text-lg */
    font-weight: 500;
    /* font-medium */
    color: #4B5563;
    /* text-gray-700 */
}

.contact-row .flex-grow p:last-child {
    font-size: 1 rem;
    /* text-xl */
    font-weight: 700;
    /* font-bold */
    color: #4B5563;
    /* text-secondary-gray */
    margin-top: 2px;
    /* mt-0.5 */
}


/* Definicja klasy 'contact-card' zastępująca większość klas Tailwind */
.contact-card {
    /* Odtworzenie: w-full max-w-lg bg-white p-8 rounded-xl shadow-2xl border-t-4 border-primary-gold transition-all duration-300 */
    width: 100%;
    max-width: 512px;
    /* max-w-lg */
    background-color: white;
    /* bg-white */
    padding: 2rem;
    /* p-8 (32px) */
    border-radius: 0.75rem;
    /* rounded-xl */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    /* shadow-2xl */
    border-top: 4px solid var(--secondary-color);
    /* border-t-4 border-primary-gold */
    transition: all 0.3s ease-in-out;
    /* transition-all duration-300 */
}

/* Obsługa responsywności p-10 na medium screens (md:p-10) */
@media (min-width: 768px) {
    .contact-card {
        padding: 15px;
        /* p-10 (40px) */
    }

}

.contact-card .flex.items-start.p-4.bg-background-light.rounded-lg.shadow-inner {
    margin-top: 0;
    box-shadow: none;
}

/* Obsługa hover (hover:shadow-primary-gold/50) */
.contact-card:hover {
    box-shadow: 0 25px 50px -12px rgba(184, 134, 11, 0.5);
    /* Zmieniony cień na złoty */
}


.artykul-blok .aktualnosci-blok-tytul {
    font-size: 18px;
    color: var(--primary-color);
    font-weight: 600;
}

.artykul_tytul {
    font-size: 24px;
    font-weight: 600;
    color: var(--primary-color);
}

footer {
    background-color: var(--primary-color);
}


/* Nadpisanie flex-grow tylko dla widoku desktopowego (2:1) */
@media (min-width: 768px) {
    .block-1-main {
        flex: 2 1 0%;
        /* Desktop: 2/3 przestrzeni */
    }
}


/* Blok 2 (O proporcjach 1/3) - Teraz kontener pionowy dla 3 i 4 */
.block-2-main {
    /* ZMIANA 4: Na urządzeniach mobilnych, oba bloki zajmują całą dostępną szerokość/wysokość (flex: 1) */
    flex: 1 1 0%;

    /* Ustawienie wewnętrznego flexa na kolumnowy, aby Bloki 3 i 4 były pod sobą */
    display: flex;
    flex-direction: column;

    /* NOWA ZMIANA: Dodanie odstępu 15px między elementami potomnymi (Bloki 3 i 4) */
    gap: 15px;

    /* Dodatkowy styl */
    /* background-color: #10b981; */
    /* Zielony */
    color: white;
    padding: 15px;
    /* Dodanie paddingu kontenera, aby otoczyć Bloki 3 i 4 15px marginesem */
}


/* Nadpisanie flex-grow tylko dla widoku desktopowego (2:1) */
@media (min-width: 768px) {
    .block-2-main {
        flex: 1 1 0%;
        /* Desktop: 1/3 przestrzeni */
    }
}


/* Nowe style dla wewnętrznych bloków 3 i 4 */
.block-3-4 {
    flex: 1;
    /* Równy podział przestrzeni w pionie (1:1) */
    display: flex;
    /* align-items: center; */
    justify-content: center;
    padding: 1.5rem;
    /* p-6 w Tailwind, dla wewnętrznego paddingu tekstu */
    text-align: center;
    border-radius: 0.5rem;
    /* Zaokrąglone rogi dla lepszej estetyki */
}

/* Usunęliśmy border-top z Block 4, ponieważ gap przejmuje rolę separacji */

.block-3 {
    background-color: #1F5B5C;
    /* Ciemniejszy zielony */
}

.block-3:hover {
    background-color: #2a7c7e;
    /* Ciemniejszy zielony */
}

.block-4 {
    background-color: #1F5B5C;
    /* Jaśniejszy zielony */
}

.block-4:hover {
    background-color: #2a7c7e;
    /* Jaśniejszy zielony */
}

.data_intencje {
    color: var(--primary-color);
    font-size: 18px;
    padding: 15px 0;
    font-weight: 600;
}

.intencje-skrot-blok .data_intencje {
    color: var(--text-color-whitecolor);
    font-size: 18px;
    padding: 0px 0 15px 0;
    font-weight: 600;
}

.intencje-skrot-blok {
    width: 100%;
}

.intencje-blok-podstrona.box.effect4 {
    background-color: #ffffff;
    padding: 30px;
    margin: 15px 0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/*-------------------------dekanat--------------------------*/

.dekanat_blok {
    margin: 0 0 15px 0;
}

.dekanat_nazwa {
    font-weight: 600;
}

.dekanat_tresc a {
    color: var(--primary-color);
    text-decoration: underline;
}

/*-------------------------koniec dekanat--------------------------*/



.carousel-container {
    max-width: 900px;
    width: 100%;
    position: relative;
}

.carousel-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: 15px;
    overflow: hidden;
    background: #f8f9fa00;
}

.carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Placeholder images avec numéros */
.carousel-slide::before {
    content: attr(data-slide);
    position: absolute;
    font-size: 120px;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.2);
    z-index: 1;
}

/* .carousel-slide:nth-child(1) { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.carousel-slide:nth-child(2) { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.carousel-slide:nth-child(3) { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.carousel-slide:nth-child(4) { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.carousel-slide:nth-child(5) { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); } */

/* Contrôles de navigation */
.carousel-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    pointer-events: none;
    z-index: 10;
}

.control-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    pointer-events: all;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.control-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.control-btn:active {
    transform: scale(0.95);
}

.control-btn svg {
    width: 24px;
    height: 24px;
    stroke: #333;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Indicateurs dots */
.carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 25px;
}

.indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e0e6ed;
    border: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.indicator::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #495057;
    border-radius: 50%;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.indicator.active {
    width: 35px;
    border-radius: 6px;
    background: #f8f9fa;
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(73, 80, 87, 0.15);
}

.indicator.active::before {
    left: 0;
    border-radius: 6px;
    background: #495057;
    box-shadow: 0 0 10px rgba(73, 80, 87, 0.2);
}

.indicator:hover:not(.active) {
    background: #ced4da;
    transform: scale(1.2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.indicator:hover:not(.active)::before {
    left: -50%;
    background: #6c757d;
}

/* Responsive */
@media (max-width: 768px) {
    .carousel-wrapper {
        height: 350px;
    }

    .control-btn {
        width: 40px;
        height: 40px;
    }

    .control-btn svg {
        width: 20px;
        height: 20px;
    }
}

/* Animation d'entrée */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.carousel-container {
    animation: slideIn 0.6s ease-out;
}


/*---------------------historia---------------------------*/

.border-b-2 {
    border-bottom-width: 0px;
}

.border-red-200 {
    --tw-border-opacity: 1;
    border-color: none;
}


/*---------------koniec historia------------------------*/


/*--------------------------kontakt---------------------------*/




.content-container-kontakt {
    /* Upewnienie się, że kontener jest wystarczająco szeroki i ma marginesy */
    max-width: 1200px;
    /* Przykład maksymalnej szerokości */
}

/* Wprowadzamy nowy kontener, który będzie "rodzicem" obu kolumn, 
 * lub stosujemy Flexbox bezpośrednio do .content-container, jeśli 
 * nie ma tam innych elementów, które chcemy wykluczyć.
 * Zakładając, że kolumny są jedynymi elementami wewnątrz .content-container:
 */
.content-container-kontakt {
    display: flex;
    /* Włączenie Flexboxa */
    flex-wrap: wrap;
    /* Zezwolenie na zawijanie elementów (dla responsywności) */
    gap: 2rem;
    /* Odstęp między kolumnami (np. 32px) */
}

/* Styl dla lewej kolumny */
.kontakt_lewa_kol {
    /* Wypełnia 45% dostępnej przestrzeni */
    flex: 0 0 45%;
    min-width: 300px;
    /* Minimalna szerokość, by na małych ekranach się nie "ściśkała" */
}

/* Styl dla prawej kolumny */
.kontakt_prawa_kol {
    /* Wypełnia pozostałą przestrzeń (55% minus odstęp) */
    flex: 1 1 0%;
    min-width: 300px;
}

/* Media Query dla Responsywności
 * Poniżej pewnej szerokości (np. 768px, standardowo dla 'md:' w Tailwind)
 * kolumny wracają do pełnej szerokości, układając się pionowo.
 */
@media (max-width: 768px) {

    .kontakt_lewa_kol,
    .kontakt_prawa_kol {
        flex: 1 1 100%;
        /* Każda kolumna zajmuje 100% szerokości */
        margin-bottom: 1rem;
        /* Dodatkowy odstęp między sekcjami w widoku mobilnym */
    }
}

/* Stylizacja bloku formularza */


/* ====================================
 * Ogólne style dla Kontenera Formularza
 * ==================================== */

.blok_szary.box {
    /* Uzupełnienie/poprawienie klas Tailwind (bg-gray-50, p-6, rounded-lg, shadow-inner) */
    background-color: #f9fafb;
    /* Bardzo jasny szary/prawie biały, delikatny kontrast */
    border: 1px solid #e5e7eb;
    /* Delikatna ramka */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.02);
    /* Lekki cień wewnętrzny/zewnętrzny */
    padding: 2rem;
    /* Więcej przestrzeni wewnątrz boxa */
}

.blok_szary .podtytul {
    font-size: 1.4rem;
    color: var(--primary-color);
    border-bottom: 1px solid var(--primary-color);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

/* ====================================
 * Stylizacja Pól Formularza (Input, Textarea)
 * ==================================== */

/* Selektor dla wszystkich typów pól: tekst, email, textarea */
.blok_szary input[type="text"],
.blok_szary input[type="email"],
.blok_szary textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    /* Duży padding dla lepszej klikalności */
    margin-top: 0.25rem;
    margin-bottom: 5px;
    border: 1px solid #d1d5db;
    /* Delikatna ramka */
    border-radius: 0.375rem;
    /* Lekko zaokrąglone rogi */
    font-size: 1rem;
    color: #374151;
    background-color: #ffffff;
    /* Białe tło pola */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    /* Płynne przejścia */
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    /* Delikatny cień wewnętrzny */
}

/* Stan :focus (po kliknięciu w pole) */
.blok_szary input[type="text"]:focus,
.blok_szary input[type="email"]:focus,
.blok_szary textarea:focus {
    border-color: var(--primary-color);
    /* Czerwona ramka (czerwień Tailwind 400/500) */
    outline: none;
    /* Usunięcie domyślnego outline */
    box-shadow: 0 0 0 3px rgba(105, 224, 214, 0.3);
    /* Cień focusu (ring) */
}

.blok_szary textarea {
    resize: vertical;
    /* Pozwolenie tylko na pionową zmianę rozmiaru */
    min-height: 150px;
}

/* ====================================
 * Stylizacja Etykiet (Labels)
 * ==================================== */

.blok_szary label {
    display: block;
    /* Upewnienie się, że etykieta zajmuje całą szerokość */
    font-weight: 600;
    /* Pogrubienie tekstu etykiety */
    color: #4b5563;
    /* Średnio-ciemny szary */
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}

/* ====================================
 * Stylizacja Przycisku (Submit Button)
 * ==================================== */

.blok_szary button[type="submit"],
.blok_szary input[type="submit"] {
    display: inline-block;
    width: auto;
    /* Przycisk dostosowuje się do zawartości */
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffffff;
    /* Biały tekst */
    background-color: var(--primary-color);
    /* Czysta czerwień (Tailwind 500) */
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(46, 149, 123, 0.3), 0 2px 4px -2px rgba(239, 68, 68, 0.2);
    /* Cień dla przycisku */
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 1rem;
}

/* Stan :hover i :focus dla przycisku */
.blok_szary button[type="submit"]:hover,
.blok_szary input[type="submit"]:hover {
    background-color: var(--primary-color);
    /* Ciemniejsza czerwień (Tailwind 700) */
    transform: translateY(-2px);
    /* Lekkie uniesienie */
}

.blok_szary button[type="submit"]:active,
.blok_szary input[type="submit"]:active {
    transform: translateY(0);
    /* Powrót na miejsce po kliknięciu */
}

.field-error {
    color: #d31313;
}






/*-------------koniec kontakt-------------------------*/

/*--------------------pływające dekoracje w tle-----------------------*/


/* 1. Definicja animacji pływania */
@keyframes float {
    0% {
        /* Start: Pozycja neutralna, mała rotacja, lekka zmiana skali */
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    50% {
        /* Środek: Lekki ruch w dół i w prawo, minimalna rotacja, subtelna zmiana skali */
        transform: translate(0px, 30px) rotate(0deg) scale(1);
    }

    100% {
        /* Powrót do pozycji początkowej */
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
}

/* 2. Zastosowanie animacji do elementów */
.floating-element {
    position: absolute;
    opacity: 0.2;
    /* Ustawienie niskiej przezroczystości, by były tłem */
    pointer-events: none;
    /* Zapobieganie blokowaniu kliknięć myszy na treści */
    animation-name: float;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    z-index: -10;
    /* Upewnienie się, że elementy są w tle */
    /* filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1)); Subtelny cień */
}

/* 3. Indywidualne style i pozycjonowanie dla każdego elementu */

/* Element 1 (Góra-Lewo) */
.element-1 {
   width: calc(322px / 1.5);
    height: calc(1184px / 1.5);
    top: 50%;
    right: 15%;
    margin-top: 29px;
    /* Stała wysokość względem karty */
    margin-right: -123px;
    /* Pozycja po lewej stronie karty */
    animation-duration: 4s;
    /* Powolny ruch */
    animation-delay: 0s;
    border-radius: 0.75rem;
    /* rounded-xl */
}

.element-2 {
    width: 270px;
    height: 327px;
    top: 1%;
    left: 1%;
     margin-top: 44px;
    /* Stała wysokość względem karty */
    margin-left: -140px;
    animation-duration: 4s;
    /* Powolny ruch */
    animation-delay: 1s;
    border-radius: 0.75rem;
    /* rounded-xl */
}

/* Główna Treść Strony (zastępuje klasy Tailwind) */
.main-content {
    position: relative;
    /* relative */
    z-index: 10;
    /* z-10 */
    display: flex;
    /* flex */
    flex-direction: column;
    /* flex-col */
    align-items: center;
    /* items-center */
    justify-content: center;
    /* justify-center */
    min-height: 100vh;
    /* padding: 2rem; p-8 */
    /* text-align: center; text-center */
    background-color: transparent;
    /* bg-transparent */
}

/* Główna Treść Strony (zastępuje klasy Tailwind) */
/* .main-content {
    position: relative;
   
    z-index: 10;
    
    display: flex;
   
    flex-direction: column;
   
    align-items: center;
  
    justify-content: center;
 
    min-height: 100vh;
   
    background-color: transparent;
   
} */





/*---------------------------koniec pływających dekoracji w tle--------------------------------*/
@media (max-width: 768px) {
    body {
        padding-top: 60px;
        /* Padding dla mniejszego nagłówka mobilnego (h-16) */
    }

    .header {
        height: 60px;
    }

    .banner {
        height: calc(66.67vh - 60px);
    }

    .content {
        padding: 0;
        width: 100%;
    }

    .info-block {
        min-width: 100%;
    }

    .blocks-container {
        margin: -50px 0;
        padding: 0 10px;
    }

    .main-content-area {
        padding: 80px 10px 50px;
    }

    .absolute-overlay {
        position: static;
    }
        .element-1 {
            width: calc(322px / 1.5);
            height: calc(1184px / 1.5);
            top: 50%;
            right: 15%;
            margin-top: 29px;
            margin-right: 0px;
            animation-duration: 4s;
            animation-delay: 0s;
            border-radius: 0.75rem;
        }
    /*-------------------------------------footer rwd------------------------------------------*/


    .footer-widgets {
        padding: 60px 20px 40px;
        width: 100%;
        float: left;
        clear: both;
        margin: 0px;
        position: relative;
        font-size: 18px;
        background-color: var(--szary);
        font-weight: 300;
        text-align: center;
    }

    .container ul {
        font-size: 14px;
        font-weight: 400;
        margin-left: 0px;
        list-style: outside;
        list-style-type: disc;
        list-style-type: disc;
    }

    #header-wrapper-podstrona {
        float: left;
        width: 100%;
        margin: 35px 0;
        padding: 0px;
        background: #fff;
    }

    .column.dt-sc-one-fourth.first {
        width: 100%;
        font-weight: 700;
        color: var(--text-color-white);
        margin: 0 0 20px 0;
        font-size: 22px;
    }

    .dt-sc-one-two {
        width: 100.0%;
        text-align: center;
    }

    .column.dt-sc-one-three {
        width: 100%;
    }

    .dt-sc-one-fourth {
        width: 100%;
    }

    .dt-sc-one-five {
        width: 100%;
    }
}