/* ==========================================================================
   1. Zmienne CSS (Palety Kolorów)
   ========================================================================== */

     body {
         font-family: "Trebuchet MS", Georgia, librebaskerville-regular, sans-serif;
     }

     :root {
         /* --- Paleta Kolorów - Tryb Jasny (WCAG) --- */


         --body-bg: #F4F2EF;
         --text-color: #000000;
         --heading-color: #000000;
         --link-color: #3498DB;
         --link-hover-color: #2980B9;
         --section-light-bg: #F8F9FA;
         --border-color-light: #dee2e6;
         /* Ogólny kolor ramki dla trybu jasnego */

         /* Navbar */
         --navbar-bg-image: url(images/headerbg.png);
         --navbar-bg-color: #678DBE;
         /* Kolor tła, jeśli obrazek się nie załaduje */
         --navbar-text: #FFFFFF;
         --navbar-brand-text: #FFFFFF;
         --navbar-toggler-icon-color: var(--navbar-text);

         /* Hero (#home) */
         --hero-bg-image: url(images/level-bg.jpg);
         --hero-bg-color: #E5A23C;
         /* Kolor tła, jeśli obrazek się nie załaduje */
         --hero-text-color: var(--heading-color);
         --hero-lead-text-color: var(--text-color);
         --hero-border-bottom-color: #F3F2EF;

         /* Baner */
         --baner-bg: #F3F2EF;
         --baner-link-color: #416D99;
         --baner-border-bottom-color: #F3F2EF;

         /* Przyciski */
         --button-primary-bg: #416D99;
         --button-primary-text: #FFFFFF;
         --button-primary-hover-bg: #214b75;
         --button-secondary-hover-bg: #BA3734;
         /* Dla cookie-settings-trigger */

         /* Karty */
         --card-bg: #FEFDF9;
         --card-border: #B2EBF2;
         --card-shadow: rgba(0, 0, 0, 0.05);

         /* Stopka */
         --footer-main-bg: #02172D;
         --footer-main-text: #FFFFFF;
         --footer-main-link-color: #FFFFFF;
         --footer-main-link-hover-color: #cbcbcb;

         --footer-bottom-bg: #1a2e42;
         --footer-bottom-text: #FFFFFF;
         --footer-bottom-link-color: #efefef;
         --footer-bottom-link-hover-color: #cbcbcb;

         /* Galeria */
         --gallery-border: #A8D8EA;

         /* Sekcja: Dla Rodziców i Opiekunów */
         /*--rodzicow-bg: #8DAD30;*/
         --rodzicow-bg: #B3BF6B;

         --rodzicow-bg-blend-mode: overlay;
         --rodzicow-bg-image: url(images/page-bg-green.jpg);
         --rodzicow-text: #ffffff;
         --rodzicow-accordion-button-bg: #799a29;
         /* Zmienione z --dla-rodzicow-i-opiekunow-accordion-body-bg */
         --rodzicow-accordion-button-hover-bg: rgba(5, 89, 18, 0.2);
         --rodzicow-accordion-body-bg: #799a29;
         --rodzicow-accordion-border-color: rgba(255, 255, 255, 0.3);
         --rodzicow-accordion-body-border-top-color: rgba(255, 255, 255, 0.2);
         --rodzicow-btn-download-bg: #006400;
         --rodzicow-btn-download-border: #004d00;
         --rodzicow-btn-download-text: #FFFFFF;
         --rodzicow-btn-bg: #fff;
         /* Dla .btn-rodzic */
         --rodzicow-btn-text: #006400;
         /* Dla .btn-rodzic */
         --rodzicow-btn-hover-bg: #006400;
         /* Dla .btn-rodzic */
         --rodzicow-btn-hover-text: #fff;
         /* Dla .btn-rodzic */
         --rodzicow-border-bottom-color: #F3F2EF;

         /* Sekcja: Dla Przedszkoli i Placówek */
         --przedszkoli-bg: #416D99;
         --przedszkoli-bg-image: url(images/page-bg-blue.jpg);
         --przedszkoli-text: #FFFFFF;
         --przedszkoli-download-box-gradient-start: #6094C7;
         --przedszkoli-download-box-gradient-end: #416D99;
         --przedszkoli-download-box-text: #FFFFFF;
         --przedszkoli-download-box-border: #fff;
         --przedszkoli-download-box-img-border: rgba(255, 255, 255, 0.5);
         --przedszkoli-download-btn-bg: var(--rodzicow-btn-download-bg);
         /* Użycie spójnego przycisku */
         --przedszkoli-download-btn-text: var(--rodzicow-btn-download-text);
         --przedszkoli-download-btn-hover-bg: var(--rodzicow-btn-download-text);
         --przedszkoli-download-btn-hover-text: var(--rodzicow-btn-download-bg);
         --przedszkoli-btn-light-bg: #f8f9fa;
         --przedszkoli-btn-light-text: #212529;
         --przedszkoli-btn-light-border: #f8f9fa;
         --przedszkoli-border-bottom-color: #F3F2EF;

         /* Sekcja: Gry */
         /*--gry-bg: #BA3734;*/
         /* kolor z próbnika */
         --gry-bg: #ad3506;
         --gry-bg-image: url(images/page-bg-green.jpg);
         /* Ten sam obraz co rodzice, ale inny blend mode */
         --gry-bg-blend-mode: overlay;
         --gry-text: #fff;
         --gry-card-bg: rgba(0, 0, 0, 0.15);
         --gry-card-border: #FCAE18;
         --gry-btn-bg: var(--gry-text);
         --gry-btn-text: #BA3734;
         --gry-btn-hover-bg: var(--gry-bg);
         --gry-btn-hover-text: var(--gry-text);
         --gry-border-bottom-color: #F3F2EF;



         /* Przyciski typu 'button-wag' */
         --button-wag-bg: #fff;
         --button-wag-text: #272727;
         --button-wag-link-text: #4f4e4e;
         --button-wag-hover-bg: #efefef;
         --button-wag-link-hover-text: #000;

         /* Ikony w przyciskach 'button-wag' */
         --ico-button-gry-online: #BA3734;
         --ico-button-gry-planszowe: #416D99;
         --ico-button-scenariusze: #8DAD30;
         --ico-button-kompendia: rgb(229, 162, 60);
         --ico-button-infografiki: #8DAD30;
         --ico-button-plakat: #AE6CAD;
         --ico-button-kolorowanki: #8DAD30;
         --ico-button-wycinanki: #AE6CAD;

         /* Elementy do pobrania (file-to-download) */
         --file-download-text: #fff;
         --file-download-description-text: #efefef;
         --file-download-btn-bg: #fff;
         --file-download-btn-text: var(--przedszkoli-download-btn-text);
         /* Powinno być --przedszkoli-bg lub podobny */

         /* Taby */
         --tabs-label-bg: #fff;
         --tabs-label-text: #bbb;
         --tabs-label-hover-text: #888;
         --tabs-label-active-text: #000;
         /* Było #fff, ale tło #fff, zmieniono na #000 dla kontrastu*/
         --tabs-label-active-bg: #fff;
         /* Domyślne tło aktywnej zakładki */
         --tabs-label-active-border-top-color: #f6f6f6;
         --tabs-label-active-border-color: #ddd;
         /* Było #ddd */
         --tabs-content-border-color: #ddd;
         --tabs-content-bg: #fff;
	}


     body {
         background-color: var(--body-bg);
         color: var(--text-color);
         transition: background-color 0.3s, color 0.3s;
         -webkit-font-smoothing: antialiased;
     }


     h1,
     h2,
     h3,
     h4,
     h5,
     h6 {
         color: var(--heading-color);
     }

     .h5,
     h5 {
         font-size: 1.0rem;
     }

     h2,
     h3,
     h4 {
         padding: 30px 0 10px 0;
     }


     h2 .ri,
     h3 .ri {
         margin-right: 10px;
         vertical-align: middle;
     }

     a {
         color: var(--link-color);
         text-decoration: none;
     }

     a:hover {
         color: var(--link-hover-color);
     }


/* ==========================================================================
   3. Komponenty Układu (Layout Components)
   ========================================================================== */

     .container {
         padding: 1px 120px !important;
     }


     .navbar>.container,
     .navbar>.container-fluid,
     .navbar>.container-lg,
     .navbar>.container-md,
     .navbar>.container-sm,
     .navbar>.container-xl,
     .navbar>.container-xxl {
         padding: 0 !important;
     }

     @media only screen and (min-width: 200px) and (max-width: 299px) {
         .container {
             padding: 1px 10px !important;
         }

         .download-card .description .title {
             font-size: 16px !important;
         }

         .download-card .image-container {
             width: 90px !important;
             height: 116px !important;
         }

         .download-card {
             /*display: flow !important;*/
             width: 95% !important;
         }

         .download-card .actions-wrapper {
             padding: 1px !important;
             margin: 2px 0 0 0 !important;
         }


         .download-card .btn-download {
             padding: 2px !important;
             font-size: 16px !important;
         }

         .navbar-brand {
             margin: 0 0 0 20px !important;
         }

         .planszowka1,
         .planszowa2 {
             margin: 10px 0;
         }
     }

     @media only screen and (min-width: 300px) and (max-width: 399px) {
         .container {
             padding: 1px 20px !important;
         }

         .download-card .description .title {
             font-size: 16px !important;
         }

         .download-card .image-container {
             width: 110px !important;
             height: 140px !important;
         }

         .download-card {
             /*display: flow !important;*/
             width: 95% !important;
         }

         .download-card .actions-wrapper {
             padding: 1px !important;
             margin: 2px 0 0 0 !important;
         }


         .download-card .btn-download {
             padding: 2px !important;
             font-size: 16px !important;
         }

         .navbar-brand {
             margin: 0 0 0 20px !important;
         }

         .planszowka1,
         .planszowa2 {
             margin: 10px 0;
         }
     }


     @media only screen and (min-width: 400px) and (max-width: 499px) {
         .container {
             padding: 1px 30px !important;
         }

         .download-card .description .title {
             font-size: 16px !important;
         }

         .download-card .image-container {
             width: 126px !important;
             height: 170px !important;
         }

         .navbar-brand {
             margin: 0 0 0 20px !important;
         }

         .planszowka1,
         .planszowa2 {
             margin: 10px 0;
         }
     }

     @media only screen and (min-width: 500px) and (max-width: 599px) {
         .container {
             padding: 1px 20px !important;
         }

         .download-card .description .title {
             font-size: 16px;
         }

         .download-card .image-container {
             width: 136px;
             height: 180px;
         }

         .navbar-brand {
             margin: 0 0 0 20px !important;
         }

         .planszowka1,
         .planszowa2 {
             margin: 10px 0;
         }
     }

     @media only screen and (min-width: 600px) and (max-width: 767px) {

         .container {
             padding: 1px 30px !important;
             max-width: 90%;
         }

         .planszowka1,
         .planszowa2 {
             margin: 10px 0;
         }
     }


     @media only screen and (min-width: 768px) and (max-width: 979px) {
         .container {
             padding: 1px 40px !important;
         }

         .planszowka1,
         .planszowa2 {
             margin: 10px 0;
         }
     }

     @media only screen and (min-width: 980px) and (max-width: 1099px) {
         .container {
             padding: 1px 50px !important;
         }
     }

     @media only screen and (min-width: 1100px) and (max-width: 1299px) {
         .container {
             padding: 1px 60px !important;
         }
     }

     @media only screen and (min-width: 1300px) and (max-width: 1599px) {
         .container {
             padding: 1px 80px !important;
         }
     }

     @media only screen and (min-width: 1600px) and (max-width: 1980px) {
         .container {
             padding: 1px 80px !important;
         }
     }

     /* --- Navbar --- */
     .navbar {
         padding-top: 0.5rem;
         padding-bottom: 0.5rem;
         background-image: var(--navbar-bg-image);
         background-color: var(--navbar-bg-color);
         background-repeat: repeat-x;
         background-position: left top;
         min-height: 145px;
         margin-bottom: 10px;
     }



     .navbar-brand img {
         max-height: 80px;
         width: auto;
         object-fit: contain;
     }

     .nav-link {
         color: var(--navbar-text) !important;
         font-weight: normal;
         font-size: 22px;
         margin-left: 0.5rem;
         margin-right: 0.5rem;

         padding-right: 1em !important;
         padding-left: 1em !important;
     }

     p.intro {
         display: block;
         line-height: 32px;
         font-size: 18px;
         font-style: normal;
         font-weight: 700;
     }

     .nav-link:hover,
     .nav-link.active {
         color: var(--navbar-text) !important;
         opacity: 0.8;
     }


     .navbar-toggler {
         border: none !important;
         padding: .25rem .5rem;
         font-size: 1.5rem;
         color: var(--navbar-text);
         /* Kolor ikony toggle'a */
         transition: transform 0.3s ease-in-out;
     }

     @media (max-width: 991.98px) {

         .navbar-expand-lg .sticky-top .shadow-sm,
         .navbar,
         .navbar-collapse,
         .collapse,
         .show {
             background-color: #678DBE !important;
         }
     }


     .navbar-toggler:focus {
         box-shadow: none;
     }

     .navbar-toggler .toggler-icon {
         display: inline-block;
         position: relative;
         width: 24px;
         height: 20px;
     }

     .navbar-toggler .toggler-icon span {
         display: block;
         position: absolute;
         height: 3px;
         width: 100%;
         background: var(--navbar-toggler-icon-color);
         border-radius: 3px;
         opacity: 1;
         left: 0;
         transform: rotate(0deg);
         transition: .25s ease-in-out;
     }

     .navbar-toggler .toggler-icon span:nth-child(1) {
         top: 0px;
     }

     .navbar-toggler .toggler-icon span:nth-child(2) {
         top: 8px;
     }

     .navbar-toggler .toggler-icon span:nth-child(3) {
         top: 16px;
     }

     .navbar-toggler[aria-expanded="true"] .toggler-icon span:nth-child(1) {
         top: 8px;
         transform: rotate(135deg);
     }

     .navbar-toggler[aria-expanded="true"] .toggler-icon span:nth-child(2) {
         opacity: 0;
         left: -24px;
     }

     .navbar-toggler[aria-expanded="true"] .toggler-icon span:nth-child(3) {
         top: 8px;
         transform: rotate(-135deg);
     }

     .navbar-toggler-icon {
         background-image: none !important;
     }

     .shadow-sm {
         box-shadow: none !important;
     }

     /* Bootstrap override */

     /* --- Stopka Główna (#stopka-glowna) --- */
     #stopka-glowna {
         background-color: var(--footer-main-bg);
         color: var(--footer-main-text);
         padding: 40px 0;
     }


     #stopka-glowna h5 {
         color: var(--footer-main-text);
         /* Zmieniono z #FFFFFF na zmienną */
         margin-bottom: 15px;
     }


     #stopka-glowna ul.list-unstyled a {
         color: var(--footer-main-link-color);
         text-decoration: none;
     }

     #stopka-glowna ul.list-unstyled a:hover {
         color: var(--footer-main-link-hover-color);
         text-decoration: underline;
     }


     #stopka-glowna div a i {
         /* Ikony social media */
         color: var(--footer-main-link-color);
     }


     /* --- Stopka Dolna (footer) --- */
     footer {
         /* Zakładam, że to dolna stopka z copyright */
         background-color: var(--footer-bottom-bg);
         padding: 20px 0px 5px 0px;
         color: var(--footer-bottom-text);
         text-align: center;
         transition: background-color 0.3s, color 0.3s;
     }


     footer a {
         color: var(--footer-bottom-link-color);
     }

     footer a:hover {
         color: var(--footer-bottom-link-hover-color);
         text-decoration: underline;
     }


     /* ==========================================================================
   4. Ogólne Komponenty UI (Cards, Buttons, etc.)
   ========================================================================== */
     .py-5 {
         padding-top: 4rem !important;
         padding-bottom: 1rem !important;
     }


     /* --- Karty (.card) --- */
     .card {
         /*
         transition: transform 0.3s, background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
         border: 2px solid var(--card-border);
         border-radius: 15px;
         box-shadow: 0 4px 8px var(--card-shadow);
         */
         background-color: var(--card-bg);
         height: 100%;

     }



     .card {
         height: max-content;
     }

     @media screen and (min-width: 980px) {
         .card {
             height: 100%;
         }

     }

 
     .card-img-top {
         border-top-left-radius: 13px;
         border-top-right-radius: 13px;
         height: 200px;
         object-fit: cover;
     }

     .card-title {
         font-weight: bold;
     }








     /* --- Przyciski Główne (.btn-primary) --- */
     .btn-primary {
         background-color: var(--button-primary-bg);
         border-color: var(--button-primary-bg);
         color: var(--button-primary-text);
         font-size: 1.1rem;
         padding: 10px 24px;
         font-weight: bold;
         transition: background-color 0.3s, border-color 0.3s, color 0.3s;
     }

     .btn-primary:hover {
         /* Ogólny hover dla .btn-primary */
         background-color: var(--button-primary-hover-bg);
         border-color: var(--button-primary-hover-bg);
         color: var(--button-primary-text);
         /* Zazwyczaj tekst pozostaje ten sam */
     }

     .btn-lg {
         padding: 12px 30px;
         font-size: 1.25rem;
     }

     .btn-o-projekcie {
         /* Specyficzny przycisk, może wymagać własnych zmiennych */
         background-color: #416D99;
         float: right;
         border: 1px solid #bcd0e4;
         color: #fff;
         /* Dodałem, bo prawdopodobnie biały tekst */
     }
     .o-projekcie-margin-bottom{
        margin-bottom: 16px !important;
     }


     /* --- Sekcje Opisowe (.descriptive-section) --- */
     .descriptive-section {
         background-color: var(--card-bg);
         /* Użycie zmiennych karty dla spójności */
         border-radius: 15px;
         padding: 30px;
         margin-bottom: 30px;
         box-shadow: 0 4px 8px var(--card-shadow);
         border: 1px solid var(--card-border);
         transition: background-color 0.3s, border-color 0.3s;
     }

     .descriptive-section h3 {
         color: var(--heading-color);
         margin-bottom: 20px;
         font-weight: bold;
     }

     /* --- Galeria Obrazów (.gallery-img-container) --- */
     .gallery-img-container {
         overflow: hidden;
         border-radius: 10px;
         border: 3px solid var(--gallery-border);
         margin-bottom: 10px;
         transition: transform 0.3s, border-color 0.3s;
     }


     .gallery-img-container:hover {
         transform: scale(1.05);
     }

     .gallery-img-container img {
         width: 100%;
         height: auto;
         object-fit: cover;
         display: block;
     }


/* ==========================================================================
   5. Style dla Poszczególnych Sekcji (ID)
   ========================================================================== */

     /* --- Sekcja Hero (#home) --- */
     #home {
         padding-top: 4rem;
         padding-bottom: 4rem;
         background-image: var(--hero-bg-image);
         background-repeat: repeat;
         background-position: left top;
         background-size: cover;
         vertical-align: bottom;
         z-index: 500;
         /*
         border-bottom: 10px solid var(--hero-border-bottom-color);
         */
     }

     #home h1 {
         color: var(--hero-text-color);
     }

     p.lead {
         font-size: 18px;
         font-weight: 400;
     }

     #home p.lead {
         color: var(--hero-lead-text-color);
     }
     
     .lead-gry {
        text-align: center;
        font-weight: 700 !important;
        margin-bottom: 20px;
     }


     #home img.hero-image {
         border-radius: 10px;
         width: 90%;
         margin-top: -30px;
         /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); */
         /* Przeniesione do .card jeśli to karta */
     }


     /* --- Sekcja Baner (#baner) --- */
     #baner {
         background-color: var(--baner-bg);
         text-align: center;
         border-bottom: 10px solid var(--baner-border-bottom-color);
         padding: 1rem 0;
         /* Dodałem padding dla lepszego wyglądu */
     }

     h3#zajecia {
         color: #fff;
     }

     #baner a,
     .zajecia-link a {
         /* .zajecia-link wymaga sprawdzenia, czy pasuje do #baner */
         padding: 5px;
         color: var(--baner-link-color);
         text-decoration: dotted;
     }


     /* --- Jasna Sekcja Ogólna (.bg-light-custom) --- */
     .bg-light-custom {
         background-color: var(--section-light-bg) !important;
         transition: background-color 0.3s;
     }


     /* --- Sekcja: Dla Rodziców i Opiekunów (#dla-rodzicow-i-opiekunow) --- */
     #dla-rodzicow-i-opiekunow {
         background-image: var(--rodzicow-bg-image);
         background-repeat: repeat;
         background-blend-mode: var(--rodzicow-bg-blend-mode);
         color: var(--rodzicow-text);
         /*border-bottom: 10px solid var(--rodzicow-border-bottom-color);*/
         padding: 2rem 0;
         /* Dodałem padding dla spójności */
     }

     #dla-rodzicow-i-opiekunow-content {
         /*background-color: #fff;*/
         /*background-image: var(--rodzicow-bg-image);*/
         background-repeat: repeat;
         /*background-blend-mode: var(--rodzicow-bg-blend-mode);*/
         color: var(--rodzicow-text);
         border-bottom: 10px solid var(--rodzicow-border-bottom-color);
         padding: 2rem 0;
         /* Dodałem padding dla spójności */
     }

     .dla-rodzicow-i-opiekunow-intro {
         background-color: var(--rodzicow-bg);
         background-image: var(--rodzicow-bg-image);
         background-repeat: repeat;
         color: var(--rodzicow-text);
         /* border-bottom: 10px solid var(--rodzicow-border-bottom-color);*/
         padding: 2rem 0;
     }

     #kontakt {
         background-color: #111111;
         background-image: url(../images/pan-paragon-1280px.png);
         /* background-image: url(../images/profile-bg.jpg); */
         background-repeat: no-repeat;
         background-position: center;
         -webkit-background-size: cover;
         -moz-background-size: cover;
         background-size: cover;
         padding-top: 98px;
         padding-bottom: 31px;
         position: relative;
     }
    .link-mail{
        color:#406c98;
    }
     #kontakt .overlay {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         opacity: 0.1;
         background-color: #000000;
     }


     .narrow {
         max-width: 800px;
     }

     .section-intro {
         text-align: center;
         position: relative;
         margin: 0 auto;
         margin-bottom: 1.5rem;
     }

     .section-intro h1 {
         font-family: "Trebuchet MS", Georgia, "librebaskerville-regular", sans-serif;
         font-size: 4rem;
         line-height: 1.375;
         color: #151515;
     }

     .kontakt {
         background-color: #fff;
         opacity: 0.7;
         padding: 10px;
         min-height: 180px;
         margin-bottom: 120px;
         display: flex;
         justify-content: center;
         align-items: center;
         text-align: center;
     }

     #kontakt .section-intro p.lead {
         color: #000;
         text-align: center;
         margin: 12px 0 24px 0;
     }


     /* Tekst i nagłówki w sekcji rodziców */
     #dla-rodzicow-i-opiekunow h1,
     #dla-rodzicow-i-opiekunow h2,
     #dla-rodzicow-i-opiekunow h3,
     #dla-rodzicow-i-opiekunow h4,
     #dla-rodzicow-i-opiekunow h5,
     #dla-rodzicow-i-opiekunow h6,
     #dla-rodzicow-i-opiekunow p,
     #dla-rodzicow-i-opiekunow li {
         color: inherit;
         /* Dziedziczy z #dla-rodzicow-i-opiekunow */
     }


     /* Linki w sekcji rodziców */
     #dla-rodzicow-i-opiekunow a:not(.btn):not(.accordion-button) {
         /* color: #006400; */
         /* Można zdefiniować zmienną --rodzicow-link-color */
         font-weight: bold;
         /* Dodane dla wyróżnienia */
     }

     /* #dla-rodzicow-i-opiekunow a:not(.btn):not(.accordion-button):hover {
         color: #B2EBF2;

     } */


     /* Obrazki w galerii w sekcji rodziców */
     #dla-rodzicow-i-opiekunow .gallery-img-container img {
         max-height: 150px;
     }

     .button-dla-rodzicow,
     .button-dla-przedszkoli {
         width: 100%;
         height: 130px;
         display: inline-flex;
         justify-content: center;
         align-content: space-around;
         align-items: center;
         flex-wrap: nowrap;
         background-color: #fff;
         font-size: 24px;
         padding: 10px;
         margin: 10px;
         border-radius: 20px;
         color: #000;
     }

     .button-dla-rodzicow {
         border: 3px solid #8DAD30;
         color: #000;
     }

     .button-dla-przedszkoli {
         border: 3px solid #416D99;
         color: #000;
     }

     .button-dla-rodzicow:hover {
         border: 3px solid #708a20;
         color: #000;
     }

     .button-dla-przedszkoli:hover {
         border: 3px solid #28527c;
         color: #000;
     }


     button::-moz-focus-inner,
     input::-moz-focus-inner {
         border: 0;
         padding: 0;
     }

     a.game1 {
         text-align: center;
         font-size: 18px;
         text-transform: uppercase;
         letter-spacing: 0.2rem;
         /* height: 3.4rem; */
         line-height: 54px;
         padding: 0;
         margin: 0;
     }

     a.game2 {
         text-align: center;
         font-size: 18px;
         text-transform: uppercase;
         letter-spacing: 0.2rem;
         /* height: 3.4rem; */
         line-height: 54px;
         padding: 0;
         margin: 0;
     }

     a.game3 {
         text-align: center;
         font-size: 18px;
         text-transform: uppercase;
         letter-spacing: 0.2rem;
         /* height: 3.4rem; */
         line-height: 54px;
         padding: 0;
         margin: 0;
     }

     a.game4 {
         text-align: center;
         font-size: 18px;
         text-transform: uppercase;
         letter-spacing: 0.2rem;
         /* height: 3.4rem; */
         line-height: 54px;
         padding: 0;
         margin: 0;
     }

     a.game5 {
         text-align: center;
         font-size: 18px;
         text-transform: uppercase;
         letter-spacing: 0.2rem;
         /* height: 3.4rem; */
         line-height: 54px;
         padding: 0;
         margin: 0;
     }

     a.game6 {
         text-align: center;
         font-size: 18px;
         text-transform: uppercase;
         letter-spacing: 0.2rem;
         /* height: 3.4rem; */
         line-height: 54px;
         padding: 0;
         margin: 0;
     }

     a.game1:hover {
         background-color: #737373 !important;
         color: #000;
     }

     a.game2:hover {
         background-color: #737373 !important;
         color: #000;
     }

     a.game3:hover {
         background-color: #737373 !important;
         color: #000;
     }

     a.game4:hover {
         background-color: #737373 !important;
         color: #000;
     }

     a.game5:hover {
         background-color: #737373 !important;
         color: #000;
     }

     a.game6:hover {
         background-color: #737373 !important;
         color: #000;
     }
     .btn-zajecia:hover {
         background-color: #737373 !important;
         color: #000;
     }



     a.game1,
     button.game1 {
         /* background-image: url("../images/memo-page-bg-green.png"); */
         background-color: #7CA45A;
         background-repeat: round;
         border: 2px solid #efefef;
         border-radius: 15px;
         font-weight: bold;
         color: #fff;
     }

     a.game2,
     button.game2 {
         /* background-image: url("../images/memo-page-bg-lblue.png"); */
         background-color: #3377B1;
         background-repeat: round;
         border: 2px solid #efefef;
         border-radius: 15px;
         font-weight: bold;
         color: #fff;
     }

     a.game3,
     button.game3 {
         /* background-color: #4c2405; */
         background-image: url("../images/d-page-bg.jpg");
         background-repeat: round;
         border: 2px solid #efefef;
         border-radius: 15px;
         font-weight: bold;
         color: #fff;
     }

     .game3 {
         background-image: url("../images/d-page-bg-dark.jpg");
         /* background-color: #4c2405; */
         background-repeat: round;
         border: 2px solid #efefef;
         border-radius: 15px;
         font-weight: bold;
         color: #fff;
     }

     a.game4,
     button.game4 {
         /* background-color: #4c2405; */
         background-image: url("../images/memo-page-bg-dark.jpg");
         background-repeat: round;
         border: 2px solid #efefef;
         border-radius: 15px;
         font-weight: bold;
         color: #fff;
     }

     a.game5,
     button.game5 {
         /* background-image: url("../images/memo-page-bg-blue.jpg"); */
         background-color: #23455E;
         background-repeat: round;
         border: 2px solid #efefef;
         color: #fff;
         border-radius: 15px;
         font-weight: bold;
     }

     a.game6,
     button.game6 {
         background-color: #EE8518;
         /* background-image: url("../images/memo-page-bg-orange.jpg"); */
         background-repeat: round;
         border: 2px solid #efefef;
         color: #fff;
         border-radius: 15px;
         font-weight: bold;
     }

     a.game7,
     button.game7 {
         /* background-color: #4c2405; */
         background-image: url("../images/przycisk_zielony.jpg");
         background-repeat: round;
         border: 2px solid #efefef;
         color: #efefef;
         border-radius: 15px;
         font-weight: bold;
     }


     a.game8,
     button.game8 {
         /* background-color: #4c2405; */
         background-image: url("../images/przycisk_niebieski.jpg");
         background-repeat: round;
         border: 2px solid #efefef;
         color: #efefef;
         border-radius: 15px;
         font-weight: bold;
     }



     a.przyciskzapisu,
     button.przyciskzapisu {
         background-color: #BA3734;
         background-repeat: round;
         border: 2px solid #efefef;
         border-radius: 15px;
         font-weight: bold;
         color: #efefef;
     }



     /* Informacja o pobieraniu PDF */
     .pdf-download-info {
         /* Przeniesione tutaj, bo bardziej generyczne */
         font-size: 0.8rem;
         color: var(--text-color);
         /* Użycie ogólnej zmiennej */
         margin-top: 4px;
     }

     #dla-rodzicow-i-opiekunow .pdf-download-info {
         /* Specyficzne dla sekcji jeśli trzeba */
         color: var(--rodzicow-text);
     }


     /* Akordeon w sekcji Rodzic */
     #dla-rodzicow-i-opiekunow .accordion-item {
         background-color: transparent;
         border: 1px solid var(--rodzicow-accordion-border-color);
         margin-bottom: 0.5rem;
         border-radius: .25rem;
     }


     #dla-rodzicow-i-opiekunow .accordion-button {
         background-color: var(--rodzicow-accordion-button-bg);
         color: var(--rodzicow-text);
         border: none;
         box-shadow: none;
         display: flex;
         justify-content: space-between;
         align-items: center;
         width: 100%;
     }


     #dla-rodzicow-i-opiekunow .accordion-button:not(.collapsed) {
         background-color: var(--rodzicow-accordion-button-hover-bg);
         color: var(--rodzicow-text);
         /* Tekst może pozostać taki sam lub się zmienić */
     }


     #dla-rodzicow-i-opiekunow .accordion-button::after {
         display: none;
     }

     /* Ukrycie domyślnej strzałki Bootstrapa */
     #dla-rodzicow-i-opiekunow .accordion-icon {
         transition: transform 0.25s ease-in-out;
         font-size: 1.2rem;
     }

     #dla-rodzicow-i-opiekunow .accordion-button:not(.collapsed) .accordion-icon {
         transform: rotate(45deg);
     }

     #dla-rodzicow-i-opiekunow .accordion-body {
         background-color: var(--rodzicow-accordion-body-bg);
         color: var(--rodzicow-text);
         border-top: 1px solid var(--rodzicow-accordion-body-border-top-color);
     }


     /* Przyciski pobierania w sekcji Rodzic */
     .btn-download-green {
         background-color: var(--rodzicow-btn-download-bg) !important;
         border-color: var(--rodzicow-btn-download-border) !important;
         color: var(--rodzicow-btn-download-text) !important;
         font-size: 0.9rem;
         padding: 0.3rem 0.8rem;
     }

     .btn-download-green:hover {
         opacity: 0.9;
     }


     /* Przycisk .btn-rodzic */
     .btn-rodzic {
         background-color: transparent;
         color: #406c98;;
         font-weight: 400;
         /* padding: 8px 15px; */
         /* border: 1px solid var(--rodzicow-btn-bg); */
         /* border-radius: 8px; */
         display: flow;
         text-align: center;
         font-size: 22px;
     }

     .btn-rodzic:hover,
     .btn-rodzic a:hover {
         /* Zakładając, że 'a' wewnątrz dziedziczy */
         background-color: #406c98;;
         color: #fff;
     }

     .kolumna-do-pobrania-lewa{
        /*
        border-left:1px solid #ccc;
        */
        text-align: center;
     }
     .kolumna-do-pobrania-prawa{
        
        border-left:1px solid #ccc;
        
        text-align: center;
     }
     .kolumna-do-pobrania-lewa2{
        
        border-left:1px solid #ccc;
        padding-left: 120px;
        text-align: left;
     }
     .kolumna-do-pobrania-prawa2{
        
        border-left:1px solid #ccc;
        border-right:1px solid #ccc;
        text-align: left;
        padding-left: 120px;
     }
     @media (max-width: 991px) {

         .kolumna-do-pobrania-prawa2,.kolumna-do-pobrania-lewa2  {
             border: none;
             padding-left: 30px;
         }
     }
     .kolumna-do-pobrania-lewa2 .btn-rodzic{
        text-align: left;
        padding-left: 0;
     }
     .kolumna-do-pobrania-prawa2 .btn-rodzic{
        text-align: left;
        padding-left: 0;
     }

     .kolumna-do-pobrania-lewa3{
        text-align: center;
     }
     .kolumna-do-pobrania-prawa3{
        text-align: center;
     }
     .kolumna-do-pobrania-lewa3 .btn-rodzic{
        text-align: left;
        text-align: left;
        /* border: 2px solid #406c98; */
        box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .15);
        padding: 20px;
        border-radius: 10px;
     }
     .kolumna-do-pobrania-prawa3 .btn-rodzic{
        
        text-align: left;
        /* border: 2px solid #406c98; */
        box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .15);
        padding: 20px;
        border-radius: 10px;
     }
     .naglowek-do-pobrania{
        font-weight: 700;
     }


     .btn-zajecia {
         background-color: rgb(186, 55, 52);
         background-repeat: round;
         font-weight: bold;
         color: #fff;
         border-width: 2px;
         border-style: solid;
         border-color: rgb(239, 239, 239);
         border-image: initial;
         border-radius: 15px;
         /*
         height: 6rem !important;
         */
         line-height: 54px !important;
         padding: 0rem 10rem !important;
         display: inline-block;
        
     }
     @media (max-width: 610px) {
         .btn-zajecia {
             width: 75%;
             padding: 0rem 0rem !important;
         }
     }
     .btn-zajecia i {
         font-size: 36px;
         padding-right: 5px;
         margin-right: 5px;
     }

     .btn-rodzic a:hover {
         /* Zakładając, że 'a' wewnątrz dziedziczy */
         background-color: #737373;
         color: var(--przedszkoli-btn-light-bg);
     }


     /* --- Sekcja: Dla Przedszkoli i Placówek (#dla-przedszkoli, #zadanie) --- */
     #dla-przedszkoli {
         /*background-color: var(--przedszkoli-bg);*/
         background-image: var(--przedszkoli-bg-image);
         background-repeat: repeat;
         background-position: center;
         color: var(--przedszkoli-text);
         border-bottom: 10px solid var(--przedszkoli-border-bottom-color);
         padding: 2rem 0;
     }

     section#scenariusze {

         background-image: url(../images/na-zakupach/game-assets/etap-warzywa-owoce.jpg);
         background-size: cover;
         padding: 6rem 0 2rem 0;

         opacity: 0.9;
     }

     section#scenariusze a {
         color: #33608a;
         font-weight: 700;
     }



     section#zadanie {
         /*
        background-color: var(--przedszkoli-bg);
        background-image: var(--przedszkoli-bg-image);
        background-repeat: repeat;
        background-position: center;

        padding: 2rem 0;
        */
         font-size: 15px;
         font-weight: 400;
         color: #000;


         padding-top: 4rem;
         padding-bottom: 3rem;
         text-align: center;
         font-family: "lato", sans-serif;
         font-size: 1.5rem;
         position: relative;
         background-color: #f1f1f1;
     }

     p.zadanie {
         font-size: 15px;
         font-weight: 400;
         color: #000;
     }

     section#o-projekcie {
         position: relative;
         /* padding: 50px 0; */
         background: #fff;
         padding-bottom: 45px;
     }

     .lead p,
     #o-projekcie p,
     p#o-projekcie {
         font-size: 18px;
         line-height: 32px;
         color: rgb(0, 0, 0);
         margin-bottom: 0px;
         word-wrap: break-word;
     } 
     #o-projekcie .container{
        padding: 0px 10px !important;
     }
    #gry .container{
        padding: 0px 30px !important;
    }
    #o-projekcie span{
        font-weight: 700;
        color: #406c98;
    }

    h3#kontakt,
     h3.do-pobrania,
     .do-pobrania h3,
     h3#do-pobrania,
     h3#zajecia,
     #gry h2,
     h3#scenariusze-informacja,
     h3#zajecia,
     #o-projekcie h2 {
         font-family: "Trebuchet MS", Georgia, "librebaskerville-regular", sans-serif;
         font-size: 38px;
         line-height: 1.455;
         font-weight: 700;
     }

 
     h3.do-pobrania,
     .do-pobrania h3,
     h3#do-pobrania,
     h3#zajecia,
     #gry h2,
     #scenariusze-informacja h3,
     h3#scenariusze-informacja {
         text-align: center;
     }

     .gry-opis{
        text-align:left;
        font-weight: 700;
     }
     h3.do-pobrania,
     .do-pobrania h3,
     h3#do-pobrania {
         color: #000;
     }

     h3#gry-online {
         font: size 24px;
     }

     .up20 {
         font-size: 18px;
         text-transform: uppercase;
         font-weight: 700;
         margin-bottom: 10px !important;
     }

     /* #o-projekcie h4 {
         font-family: "Trebuchet MS", Georgia, "librebaskerville-regular", sans-serif;
         font-size: 20px;
         font-weight: 700;
         color: #4c2405;
         text-transform: uppercase;
         letter-spacing: 0.15rem;
         margin: 0 0 0 0.3rem;
     } */

     .about-profile-bg {

         position: absolute;
         top: 0;
         left: 0;
         height: 100%;


         width: 50%;
         background: #ebebeb;
         background-image: url("images/kasjerka.png");
         background-repeat: no-repeat;
         background-position: center;
         -webkit-background-size: cover;
         -moz-background-size: cover;
         background-size: cover;
         opacity: 0.20;
     }
     @media (max-width: 767px) {
         .about-profile-bg {
             width: 100%;
             height: 49%;
         }
     }
     @media (max-width: 625px) {
         .about-profile-bg {
             width: 100%;
             height: 54%;
         }
     }

     @media (max-width: 450px) {
         .about-profile-bg {
             width: 100%;
             height: 57%;
         }
     }
     @media (max-width: 435px) {
         .about-profile-bg {
             width: 100%;
             height: 59%;
         }
     }
     @media (max-width: 371px) {
         .about-profile-bg {
             width: 100%;
             height: 61%;
         }
     }

     div.service-item {
         font-size: 16px;
         padding: 0 0 0 40px;
     }
      @media (max-width: 767px) {
         div.service-item {
             padding: 0 0 0 20px;
         }
     }

     div.service-item p{
        font-size: 16px;
        /* padding: 0 0 0 40px; */
    }

     .service-item a {
         color: #000;
     }

     section#zadanie {
         padding: 25px 12px 10px 12px;
         text-overflow: revert-layer;
         position: relative;
         text-wrap-style: balance;
     }
     #tresc a {
        color: #406c98;
        font-weight: 700;
     }

     section#tresc {
         background-color: #fff;
         color: #000;
         border-bottom: 10px solid var(--przedszkoli-border-bottom-color);
         /* padding: 2rem 0; */
     }

     #dla-przedszkoli-content {
         /*background-color: #fff;*/
         /*background-image: var(--rodzicow-bg-image);*/
         background-repeat: repeat;
         /*background-blend-mode: var(--rodzicow-bg-blend-mode);*/
         color: var(--przedszkoli-text);
         border-bottom: 10px solid var(--przedszkoli-border-bottom-color);
         padding: 2rem 0;
         /* Dodałem padding dla spójności */
     }

     #dla-przedszkoli-content2 {
         background-color: var(--przedszkoli-bg);
         background-image: var(--przedszkoli-bg-image);
         background-repeat: repeat;
         background-position: center;
         color: var(--przedszkoli-text);
         border-bottom: 10px solid var(--przedszkoli-border-bottom-color);
         padding: 2rem 0;
         text-align: center;

     }


     /* Tekst i nagłówki w sekcji przedszkoli */
     #dla-przedszkoli h1,
     #dla-przedszkoli h2,
     #dla-przedszkoli h3,
     #dla-przedszkoli h4,
     #dla-przedszkoli h5,
     #dla-przedszkoli h6,
     #dla-przedszkoli p,
     #dla-przedszkoli li,
     section#zadanie h1,
     section#zadanie h2,
     section#zadanie p

     /* Dodaj inne elementy dla #zadanie */
         {
         color: inherit;
     }


     /* Linki w sekcji przedszkoli */
     #dla-przedszkoli a:not(.btn):not(.btn-light),
     section#zadanie a:not(.btn) {
         /* color: #004080; */
         /* Przykład, zdefiniuj zmienną --przedszkoli-link-color */
         font-weight: bold;
         /* Dodane dla wyróżnienia */
     }

     #dla-przedszkoli a:not(.btn):not(.btn-light):hover,
     section#zadanie a:not(.btn):hover {
         color: #B2EBF2;
         /* Przykład, --przedszkoli-link-hover-color */
     }

     .animowany {
         position: absolute;
         top: 50px;
         right: 50px;
         width: 200px;
         height: 200px;
         transform: rotate(45deg);
         animation: sway 2sease-in-out infinite 1s;
         z-index: 500;

     }

     /* Sekcja 0 - statyczny obrazek z efektem swingującym */
     .section-0 {
         position: absolute;
         height: 180px;
         /*overflow: hidden;*/
         margin-bottom: 40px;
     }

     .section-0 .image-container {
         position: relative;
         top: -50px;
         right: -85px;
         width: 180px;
         height: 185px;
         transform: rotate(340deg);
         animation: sway 2s ease-in-out infinite 1s;
         /* Kołysanie z opóźnieniem 1s */
         z-index: 500;
     }

     .section-0 img {
         width: 90%;
         height: 90%;
         object-fit: cover;
         border-radius: 8px;
         box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
         box-shadow: none !important;
     }

     /* Animacja kołysania */
     @keyframes sway {

         0%,
         100% {
             transform: rotate(340deg) translateX(0) rotate(350deg);
         }

         50% {
             transform: rotate(350deg) translateX(0) rotate(360deg);
         }
     }

     /* Responsywność */
     @media (max-width: 768px) {
         .section-0 {
             height: 100px;
             display: none;
         }

         .section-0 .image-container {
             top: -35px;
             right: -162px;
             width: 150px;
             height: 150px;
             display: none;
         }
     }

     section#do-pobrania {
         background-color: #fff;
         /* padding: 50px 0; */
     }

     /* Download Box w sekcji Przedszkola */
     .zajecia-box,
     .download-box {
         /* #zajecia to też download-box? */
         padding: 20px;
         margin-bottom: 20px;
         color: var(--przedszkoli-download-box-text);
         text-align: center;
         min-height: 378px;
         /*
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         border-radius: 10px;
         border: 1px solid var(--przedszkoli-download-box-border);
         */
     }

     .zajecia-box {
         min-height: 160px;
         text-align: left;
         font-size: 18px;
         padding: 0px 20px 20px 20px;
         background-color: transparent;
         opacity: 0.9;
         /*background-color: var(--gry-border-bottom-color);*/
         color: #000;
         text-align: center;
         /*
         border: 3px solid #416D99;
         border-bottom: 10px solid var(--gry-border-bottom-color);
         */
     }

     #zajecia h3 {
         font-size: 1.75rem;
         font-weight: 500;
         line-height: 1.2;

     }

     h4.opisgry,
     .opisgry h4 {
         font-size: 24px;
         font-weight: 700px;
         margin-bottom: 22px;
         padding: 5px 0;
         color: #fff !important;
     }


     .download-box img.cover {
         max-width: 120px;
         border-radius: 5px;
         margin-bottom: 15px;
         border: 2px solid var(--przedszkoli-download-box-img-border);
     }


     .download-box h5 {
         color: inherit;
         margin-bottom: 10px;
         font-weight: bold;
         line-height: 20px;
         min-height: 60px;
     }

     .download-box p.file-size {
         font-size: 0.9em;
         margin-bottom: 15px;
         opacity: 0.8;
     }

     .download-box .btn-download {
         /* Używa zmiennych dla rodziców, może potrzebować własnych */
         background-color: var(--przedszkoli-download-btn-bg);
         color: var(--przedszkoli-download-btn-text);
         border: none;
         font-weight: bold;
         padding: 8px 15px;
     }

     .download-box .btn-download:hover {
         background-color: var(--przedszkoli-download-btn-hover-bg);
         color: var(--przedszkoli-download-btn-hover-text);
     }


     .download-box .btn-download i {
         margin-right: 5px;
     }

     /* Przycisk .btn-light w sekcji Placówka */
     #dla-przedszkoli .btn-light {
         background-color: var(--przedszkoli-btn-light-bg);
         color: var(--przedszkoli-btn-light-text);
         border-color: var(--przedszkoli-btn-light-border);
     }


     /* --- Sekcja: Gry (#gry) --- */
     #gry {
         background-color: var(--gry-bg);
         /*
         background-image: var(--gry-bg-image);
         background-repeat: repeat;
         background-blend-mode: var(--gry-bg-blend-mode);
         */
         color: var(--gry-text);
         /* padding: 2rem 0; */
         /* Dodałem padding */
     }

     h3#zajecia,
     h3#gry-online,
     h3#gry-karciane {
         text-align: center;
     }

     h3#gry-online,
     h3#gry-karciane {
         font-size:30px;
     }

     h3#zajecia {
         color: #000;
     }

     /* Tekst i nagłówki w sekcji gry */
     #gry h1,
     #gry h2,
     #gry h3,
     #gry h4,
     #gry h5,
     #gry h6,
     #gry li,
     #gry p {
         color: #fff !important;
     }


     /* Karty w sekcji gry */
     #gry .card {
         background-color: transparent;
         --bs-card-border-color: transparent !important;
         --bs-card-border-radius: transparent !important;

         /*
         background-color: var(--gry-card-bg);
         border: 2px solid var(--gry-card-border);
         */
     }


     #gry .card-title,
     #gry .card-text {
         color: var(--gry-text) !important;
         min-height: 110px;
         /* Tekst na karcie dziedziczy z #gry */
     }

     #gry .card-text {
         padding-top: 16px;
         font-size: 18px;
         font-weight: 700;
         line-height: 27px;
         padding-bottom: 45px;
     }


     /* Przyciski w sekcji gry */
     #gry .btn-primary {
         background-color: var(--gry-btn-bg);
         border-color: var(--gry-btn-bg);
         /* Dopasowane do tła */
         color: var(--gry-btn-text);
         font-weight: bold;
     }

     #gry .btn-primary:hover {
         background-color: var(--gry-btn-hover-bg);
         border-color: var(--gry-btn-hover-bg);
         /* Dopasowane do tła */
         color: var(--gry-btn-hover-text);
     }

     /* Obrazki w sekcji gry */
     #gry .game-box-image {
         width: 100%;
         object-fit: cover;
         padding: 0 0 10px 0;
     }

     #gry .game-box-image2 {
         width: 100%;
         margin: 0 auto;
         object-fit: cover;
     }

     img.planszowka1,
     img.planszowka2 {
         height: max-content;
         object-fit: cover;
         width: 300px;
         margin: 0 auto;
         margin-bottom: 0.5rem !important;
     }

     p.planszowka1,
     p.planszowka2 {
         color: var(--gry-text);
     }


     #gry p.planszowka1,
     #gry p.planszowka2 {
         color: var(--gry-text);
         /* Nadpisanie dla sekcji #gry */
     }
     /* ==========================================================================
   6. Elementy Specyficzne (np. Pan Paragon, Przyciski 'button-wag', Taby)
   ========================================================================== */

     /* --- Pan Paragon --- */
     .panparagon {

         width: 10%;
         box-shadow: none;
         display: block;
         margin: 0 auto;

     }

     .panparagon40 {

         width: 40%;
         box-shadow: none;
         display: block;
         margin: 0 auto;

     }

     .panparagon60 {

         width: 60%;
         box-shadow: none;
         display: block;
         margin: 0 auto;

     }

     .panparagon70 {

         width: 70%;
         box-shadow: none;
         display: block;
         margin: 0 auto;

     }

     .panparagon80 {

         width: 80%;
         box-shadow: none;
         display: block;
         margin: 0 auto;

     }

     .panparagon100 {

         width: 100%;
         box-shadow: none;
         display: block;
         margin: 0 auto;
         padding: 30px 0 20px 0;
     }




     .gry-panparagon {

         width: 80% !important;
         max-width: 90% !important;
         box-shadow: none;

     }

     @media (max-width: 767.98px) {

         /* Dostosowanie dla mniejszych ekranów */
         .panparagon {
             width: 50%;
             margin: 0 auto 1rem;
         }
     }

     .theme-toggle-button {
         background-color: transparent;
         border: none;
         color: #fff;
     }

     .logo-uokik{
        max-width: 75%;
     }

     @media (max-width: 991px) {

         .logo-uokik {
             width: 75%;
         }
     }
     @media (max-width: 767px) {

         .logo-uokik {
             width: 35%;
         }
     }
     @media (max-width: 455px) {

         .logo-uokik {
             width: 45%;
         }
     }

     /* --- Przyciski Kategori (.buttony, .button-wag) --- */
     div.buttony {
         text-align: -webkit-center;
         text-align: center;
         width: 100%;
         float: left;
         margin: 30px 0 0px 0;
     }

     div.button-wag,
     a.button-wag {
         /* a.button-wag dla linków stylizowanych jak button-wag */
         flex: grid;
         grid: flex;
         /*float: left; */
         /* Rozważ flexbox/grid dla kontenera .buttony */
         min-width: 276px;
         max-width: 400px;
         border-radius: 8px;
         padding: 8px 12px;
         /* Ujednolicony padding */
         margin: 3px 5px;
         /* Margines między przyciskami */
         background-color: var(--button-wag-bg);
         color: var(--button-wag-text);
         /* Kolor tekstu wewnątrz diva */
         text-align: center;
         font-size: 16px;
         display: inline-block;
         /* Dla a.button-wag */
         transition: background-color 0.3s;
     }

     div.button-wag:hover {
         background-color: var(--button-wag-hover-bg);
     }

     .button-wag a {
         /* Linki wewnątrz .button-wag */
         color: var(--button-wag-link-text);
         text-decoration: none;
         /* Usunięcie podkreślenia */
     }

     .button-wag a:hover {
         color: var(--button-wag-link-hover-text);
     }


     /* Ikony w przyciskach .button-wag */
     .ico-button-gry-online {
         color: var(--ico-button-gry-online);
         margin-right: 10px;
     }

     .ico-button-gry-planszowe {
         color: var(--ico-button-gry-planszowe);
         margin-right: 10px;
     }

     .ico-button-scenariusze {
         color: var(--ico-button-scenariusze);
         margin-right: 10px;
     }

     .ico-button-kompendia {
         color: var(--ico-button-kompendia);
         margin-right: 10px;
     }

     .ico-button-infografiki {
         color: var(--ico-button-infografiki);
         margin-right: 10px;
     }

     .ico-button-plakat {
         color: var(--ico-button-plakat);
         margin-right: 10px;
     }

     .ico-button-kolorowanki {
         color: var(--ico-button-kolorowanki);
         margin-right: 10px;
     }

     .ico-button-wycinanki {
         color: var(--ico-button-wycinanki);
         margin-right: 10px;
     }

     /* --- Elementy do Pobrania (.file-to-download) --- */

     .page-container {
         max-width: 600px;
         margin: 40px auto;
         padding: 0 20px;
     }

     #dla-rodzicow-i-opiekunow .container-galerii {
         display: grid;
         /* ... reszta stylów grid ... */
     }

     .container-galerii {
         /* Lub inna nazwa klasy, której używasz */
         display: grid;
         /* Poniżej przykład dla automatycznego dopasowania liczby kolumn,
               gdzie każda kolumna ma minimum 300px szerokości i dzieli dostępne miejsce */
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 20px;
         /* Odstęp między kartami */
     }


     /* Style dla download-card - bez zmian */
     .download-card {
         display: flex;
         flex-direction: row;
         border: 1px solid #fff;
         border-radius: 8px;
         overflow: hidden;

         min-height: 130px;
         width: 100%;
         box-sizing: border-box;
         /*background: #004b962e;*/

         /*  */
         /* background-color: #ccc; */
         /* will-change: opacity;*/

     }

     .download-card #dla-przedszkoli,
     #dla-przedszkoli .download-card {
         background: #004b962e;
         background-blend-mode: overlay;
         opacity: 0.9;
         margin: 15px;
     }

     .download-card #dla-rodzicow-i-opiekunow,
     #dla-rodzicow-i-opiekunow .download-card {
         background: #00962d2e;
         background-blend-mode: overlay;
         opacity: 0.9;
     }

     .download-card:hover {
         /*
         transform: translateY(-1px);
         transition: transform 0.3sease, box-shadow 0.3sease;
         */
         box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);

     }

     .download-card .image-container {
         width: 156px;
         height: 212px;
         flex-shrink: 0;
         margin: 10px;
         display: block;
     }

     .download-card .image-container img {
         /*width: 100%;*/
         height: 100%;
         object-fit: cover;
         /*4
         border-radius: 4px;
         */
     }

     .download-card .content {
         padding: 20px 15px 20px 0;
         flex-grow: 1;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         overflow: hidden;
     }

     .download-card .description-wrapper {
         margin-bottom: 10px;
     }

     .download-card .description .title {
         display: block;
         margin-bottom: 5px;
         margin-top: -2px;
         font-size: 20px;
         font-weight: bold;
         color: #fff;
         display: -webkit-box;
         /* -webkit-line-clamp: 2; */
         /* -webkit-box-orient: vertical; */
         /* overflow: hidden; */
         text-overflow: ellipsis;
         line-height: 1.3;
         max-height: 2.6em;
         text-wrap-style: balance;
     }

     .download-card .description .text {
         /*font-size: 0.75em;*/
         font-size: 16px;
         color: #fff;
         line-height: 1.4;
         display: -webkit-box;
         /*-webkit-line-clamp: 2;*/
         -webkit-box-orient: vertical;
         overflow: hidden;
         text-overflow: ellipsis;
         max-height: 2.8em;
     }

     .download-card .actions-wrapper {
         margin-top: auto;
     }

     .download-card .btn-download {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 100%;
         max-width: 120px;
         padding: 10px;
         /* background: #3b82f6; */
         border: 3px solid #fff;
         color: #fff;
         text-decoration: none;
         border-radius: 4px;
         font-size: 16px;
         transition: background 0.2sease;
     }


     .download-card .btn-download i {
         margin-right: 4px;
         font-size: 0.8em;
     }

     .download-card .btn-download:hover {
         background: #000000;
         color: #fff;
     }

     .download-card .file-info {
         /*font-size: 0.65em;*/
         font-size: 12px;
         color: #fff;
         margin-top: 4px;
         overflow-wrap: break-word;
         word-break: break-word;
         display: none;
     }

     /* --- Style dla SwiperJS --- */

     /* Główny wrapper dla slidera i jego niestandardowej nawigacji */
     .swiper-layout-wrapper {
         position: relative;
         /* Kontekst dla absolutnie pozycjonowanych strzałek na desktopie */
         margin: 0 auto;
     }

     .myFileSwiper {
         /* Kontener samego Swipera */
         width: 100%;
         position: relative;
     }

     .swiper-slide {
         display: flex;
         justify-content: center;
         align-items: stretch;
         height: auto;
         box-sizing: border-box;
     }

     /* Stylizacja Paginacji (kropki) */
     .swiper-pagination {
         position: relative;
         /* Aby paginacja zajmowała miejsce w przepływie dokumentu */
         bottom: auto;
         /* Resetujemy domyślne pozycjonowanie Swipera */
         margin-top: 25px;
         /* Odstęp od slajdów */
         padding-bottom: 10px;
         /* Mały odstęp pod kropkami, przed mobilną nawigacją */
     }

     .swiper-pagination-bullet {
         background-color: #ffffff;
         opacity: 1;
         width: 10px;
         height: 10px;
         transition: background-color 0.3s ease;
     }

     .swiper-pagination-bullet-active {
         background-color: #8DAD30;
     }

     /* Kontener dla niestandardowych przycisków nawigacyjnych (strzałek) */
     .swiper-custom-navigation {
         /* Domyślne style (mobilne) zostaną zdefiniowane poniżej */
         /*background-color: #ebebeb;*/
         /*(border: 3px solid #fff;*/
         padding: 1px;
     }

     /* Ogólna stylizacja strzałek */
     .swiper-custom-navigation .swiper-button-prev,
     .swiper-custom-navigation .swiper-button-next {
         /*background-color: #10b981;*/
         color: white !important;
         border-radius: 50%;
         border: 3px solid #fff;
         width: 40px !important;
         height: 40px !important;
         transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         z-index: 10;
         display: flex;
         /* Aby wycentrować ikonę wewnątrz */
         align-items: center;
         justify-content: center;
     }

     .swiper-custom-navigation .swiper-button-prev:hover,
     .swiper-custom-navigation .swiper-button-next:hover {
         background-color: unset;
     }

     .swiper-custom-navigation .swiper-button-prev::after,
     /* Ikony strzałek Swipera */
     .swiper-custom-navigation .swiper-button-next::after {
         font-size: 18px !important;
         font-weight: bold;
     }

     /* --- Desktop: Strzałki obok slidera (np. od 768px) --- */
     @media (min-width: 768px) {
         .swiper-layout-wrapper {
             /* Dodajemy padding, aby zrobić miejsce na strzałki POZA slajdami */
             /* Strzałka ma 40px szerokości + chcemy np. 15px odstępu od slajdów */
             padding-left: 55px;
             padding-right: 55px;
         }

         .swiper-custom-navigation .swiper-button-prev,
         .swiper-custom-navigation .swiper-button-next {
             position: absolute;
             /* Pozycjonowanie względem .swiper-layout-wrapper */
             top: 50%;
             /* Wyśrodkowanie w pionie */
             transform: translateY(-50%);
             margin-top: 0;
             /* Reset marginesu z mobilnej wersji */
         }

         .swiper-custom-navigation .swiper-button-prev {
             left: 10px;
             /* Umiejscowienie w lewym paddingu */
         }

         .swiper-custom-navigation .swiper-button-next {
             right: 10px;
             /* Umiejscowienie w prawym paddingu */
         }

         .swiper-custom-navigation {
             /* Na desktopie ten kontener nie potrzebuje specjalnych stylów flex/margin */
             display: block;
             /* lub domyślnie */
             margin-top: 0;
             padding-bottom: 0;
         }
     }

     /* --- Mobile: Strzałki pod sliderem (np. do 767px) --- */
     @media (max-width: 767px) {
         .swiper-layout-wrapper {
             padding-left: 0;
             /* Bez bocznego paddingu na mobile */
             padding-right: 0;
         }

         .swiper-custom-navigation {
             display: flex;
             justify-content: center;
             /* Wyśrodkowanie przycisków */
             align-items: center;
             margin-top: 15px;
             /* Odstęp od paginacji (która jest pod sliderem) */
             padding-bottom: 10px;
             /* Mały odstęp na dole */
         }

         .swiper-custom-navigation .swiper-button-prev,
         .swiper-custom-navigation .swiper-button-next {
             position: static;
             /* Usuwamy pozycjonowanie absolutne */
             transform: none;
             /* Usuwamy transformację pionową */
             margin: 0 15px;
             /* Odstęp między przyciskami */
         }
     }



     .file-to-download {
         padding: 10px;
         border-radius: 10px;
         align-items: center;
         width: 100%;
         color: var(--file-download-text);
         display: flex;
         /* Użycie flexboxa dla lepszego wyrównania */
         margin-bottom: 1rem;
         /* Dodałem margines */
         /* background-color: rgba(0,0,0,0.1); Dodałem lekkie tło dla odróżnienia w jasnym trybie */
     }


     img.file-to-download-image,
     .file-to-download-image {
         /* Zapewnia, że oba selektory działają */
         width: 90px;
         height: auto;
         /* Dodałem dla proporcji */
         margin-right: 15px;
         /* Odstęp od tekstu */
         flex-shrink: 0;
         /* Zapobiega kurczeniu się obrazka */
     }

     .icon-file-download {
         /* Wydaje się nieużywane, ale zostawiam */
         width: 50px;
         font-size: 30px;
         padding: 0 10px 0 0;
         /* Poprawiony padding */
         height: 54px;
         display: none;
         /* Ukryte */
         margin-right: 10px;
         flex-shrink: 0;
     }

     .file-name-container {
         /* Nowy kontener dla nazwy i opisu */
         flex-grow: 1;
         /* Zajmuje dostępną przestrzeń */
     }

     .file-name {

         margin: 5px;
         padding: 0;
         font-weight: bold;

     }

     .file-name-description {
         color: var(--file-download-description-text);
         font-size: 12px;
     }


     .file-to-download a {
         /* Link obejmujący całość lub tylko przycisk? */
         color: var(--file-download-text);
         /* Dziedziczy, ale można nadpisać */
     }


     .file-to-download-btn {
         /* Przycisk pobierania */
         background-color: var(--file-download-btn-bg);
         color: var(--przedszkoli-bg);
         /* Dopasowanie do koloru tła sekcji przedszkoli */
         border: none;
         font-weight: bold;
         padding: 8px 15px;
         border-radius: 5px;
         /* Dodałem zaokrąglenie */
         margin-left: auto;
         /* Wyrównuje do prawej w flex container */
         text-decoration: none;
         /* Jeśli to link */
         transition: background-color 0.3s, color 0.3s;
     }

     .file-to-download-btn:hover {
         opacity: 0.8;
         /* Lekki efekt hover */
     }

     /* Wycinanki - specjalne obrazki i opisy */
     .wycinanki2-img {
         width: 100px !important;
         /* !important może być problematyczne */
         height: auto;
         border-radius: 8px;
         object-fit: cover;
         margin: 0 auto;
     }

     a.wycinanki2-img {
         /* Link otaczający obrazek */
         border: 2px solid #fff;
         /* Dostosuj kolor do tła */
         display: inline-block;
         /* Aby border działał poprawnie */
     }

     .wycinanki2-description {
         flex: 1;
         font-size: 1.2rem;
         color: var(--file-download-text);
         /* Dopasowanie do reszty */
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 1px;
         display: none;
         /* Ukryte domyślnie */
     }


     /* --- System Zakładek (#tabs) --- */
     #tabs main {
         /* 'main' wewnątrz #tabs? To nietypowe, ale zostawiam */
         min-width: 320px;
         max-width: 100%;
         padding: 0px;
         margin: 0 auto;
         background: var(--tabs-content-bg);
         /* Tło kontenera zakładek */
     }


     #tabs section.tab-content {
         /* Zmieniona nazwa klasy dla klarowności */
         display: none;
         border: 3px solid var(--tabs-content-border-color);
         padding: 20px;
         white-space: pre-wrap;
         word-wrap: break-word;
         border-radius: 10px;
         background-color: var(--tabs-content-bg);
         /* Tło zawartości zakładki */
         margin-top: -3px;
         /* Aby ramka się ładnie połączyła */
     }


     #tabs input[type="radio"] {
         display: none;
     }

     /* Ukrycie radio buttonów */

     #tabs label.tab-label {
         /* Zmieniona nazwa klasy */
         display: inline-block;
         margin: 0 5px -1px 5px;
         /* Dostosowany margines */
         padding: 15px;
         font-weight: 400;
         text-align: center;
         color: var(--tabs-label-text);
         background-color: var(--tabs-label-bg);
         border: 1px solid transparent;
         /* Dla spójności, może być var(--tabs-content-border-color) */
         border-bottom: none;
         /* Usuwamy dolną ramkę dla nieaktywnych */
         border-radius: 8px 8px 0 0;
         /* Zaokrąglenie górnych rogów */
         cursor: pointer;
         transition: background-color 0.3s, color 0.3s;
         width: auto;
         /* Szerokość automatyczna, chyba że jest stała */
         min-width: 100px;
         /* Minimalna szerokość dla czytelności */
     }

     /* Usunięto specyficzne style dla label[for*='1'] itd. na rzecz ogólnych .tab-label */
     /* Jeśli są potrzebne różne szerokości, można je przywrócić */


     #tabs label.tab-label:before {
         /* Ikony w zakładkach */
         font-family: remixicon;
         font-weight: normal;
         margin-right: 8px;
         /* Zwiększony odstęp */
         padding: 0;
         /* Usunięty padding ikony */
     }

     /* Definicje ikon (content) dla konkretnych zakładek, jeśli potrzebne */
     /* np. label[for='tab1']:before { content: '\ea7e'; } */

     #tabs label.tab-label:hover {
         color: var(--tabs-label-hover-text);
         background-color: #e9e9e9;
         /* Lekkie podświetlenie tła */
     }


     #tabs input[type="radio"]:checked+label.tab-label {
         color: var(--tabs-label-active-text);
         background-color: var(--tabs-label-active-bg);
         /* Tło aktywnej zakładki */
         border-color: var(--tabs-label-active-border-color);
         border-bottom: 1px solid var(--tabs-label-active-bg);
         /* Ukrycie dolnej ramki poprzez kolor tła */
         /* border-top: 10px solid var(--tabs-label-active-border-top-color); */
         /* Usunięte, wydaje się zbyt duże */
         font-size: 16px;
         /* Pozostaje bez zmian */
         position: relative;
         /* Dla z-index jeśli potrzeba */
         z-index: 1;
     }


     /* Pokazywanie aktywnej treści zakładki */
     #tab1:checked~#content1,
     #tab2:checked~#content2,
     #tab3:checked~#content3,
     #tab4:checked~#content4 {
         display: block;
     }


     /* ==========================================================================
   7. Klasy Użytkowe (Utility Classes)
   ========================================================================== */

     /* --- Obrazki Opływające --- */
     .img-float-right {
         float: right;
         margin-left: 20px;
         margin-bottom: 10px;
         max-width: 50%;
         /* Zapobiega zbyt dużym obrazkom */
         height: auto;
     }

     .img-float-left {
         float: left;
         margin-right: 20px;
         margin-bottom: 10px;
         max-width: 50%;
         height: auto;
     }

     .clearfix::after {
         content: "";
         clear: both;
         display: table;
     }

     /* --- Przycisk "Do Góry" (.to-top-button) --- */
     .to-top-button {
         position: fixed;
         bottom: 20px;
         right: 20px;
         background-color: #000000;
         color: #FFFFFF;
         width: 50px;
         height: 50px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 24px;
         text-decoration: none;
         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
         opacity: 0;
         visibility: hidden;
         transition: opacity 0.3s, visibility 0.3s, background-color 0.3s, color 0.3s;
         z-index: 1000;
     }
     .to-top-button:hover {
         background-color: #FFA500;
         /* Jasny pomarańczowy */
         color: #000000;
     }

     .to-top-button.show {
         opacity: 1;
         visibility: visible;
     }

     .to-top-button i {
         line-height: 1;
     }

     /* --- Przycisk Ustawień Cookies (.cookie-settings-trigger) --- */
     .cookie-settings-trigger {
         position: fixed;
         bottom: 20px;
         left: 20px;
         background-color: var(--navbar-bg-color);
         /* Użycie zmiennej */
         color: var(--navbar-text);
         width: 50px;
         height: 50px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 24px;
         text-decoration: none;
         z-index: 1001;
         box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
         transition: background-color 0.3s ease, color 0.3s ease;
     }


     .cookie-settings-trigger:hover {
         background-color: var(--button-secondary-hover-bg);
         color: var(--navbar-text);
         /* Tekst może pozostać ten sam */
     }

     .cookie-settings-trigger i {
         line-height: 1;
     }

     /* --- Style dla Klaro! (Cookie Consent) --- */
     .klaro .cookie-modal .cm-modal .cm-klaro {
         /* Light mode */
         background-color: var(--card-bg);
         color: var(--text-color);
         border-radius: 8px;
         /* Dodałem zaokrąglenie */
         box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     }


     .klaro .cookie-modal .cm-modal.cm-klaro {
         background-color: #fff !important;
         background-color: #fff !important;
         color: #fafafa;
         color: var(--light1, #fafafa);
         z-index: 1001;
         box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .2), 5px 5px 10px 0 rgba(0, 0, 0, .19);
         width: 100%;
         max-height: 98%;
         top: 50%;
         -ms-transform: translateY(-50%);
         transform: translateY(-50%);
         position: fixed;
         overflow: auto;
     }

     .klaro .cookie-modal p,
     .klaro .cookie-modal strong,
     .klaro .cookie-modal h1,
     .klaro .cookie-modal h2,
     .klaro .cookie-modal ul,
     .klaro .cookie-modal li,
     .klaro .context-notice p,
     .klaro .context-notice strong,
     .klaro .context-notice h1,
     .klaro .context-notice h2,
     .klaro .context-notice ul,
     .klaro .context-notice li,
     .klaro .cookie-notice p,
     .klaro .cookie-notice strong,
     .klaro .cookie-notice h1,
     .klaro .cookie-notice h2,
     .klaro .cookie-notice ul,
     .klaro .cookie-notice li {
         color: #000 !important;
     }

     /* Można dodać więcej stylów dla przycisków w Klaro, np. */
     .klaro .cm-btn {
         background-color: #000 !important;
         border: 1px solid #ccc !important;
         color: #fff !important;
         border: 1px solid #ccc;
         border-radius: 15px !important;
         padding: 10px 15px !important;
     }

     .klaro .cm-btn:hover {
         /*background-color: var(--button-primary-hover-bg);*/
         background-color: #484848 !important;
     }

     /* ==========================================================================
   8. Media Queries (Responsywność)
   ========================================================================== */
     @media (max-width: 991.98px) {

         /* Medium devices (tablets, less than 992px) */
         .img-float-right,
         .img-float-left {
             float: none !important;
             display: block;
             margin-left: auto !important;
             margin-right: auto !important;
             margin-bottom: 15px !important;
             max-width: 300px;
             /* Ograniczenie szerokości na mniejszych ekranach */
         }

         .navbar-nav {
             /* margin-right: 50px !important; */
             /* Sprawdź, czy to nadal potrzebne */
             text-align: center;
             /* Wycentrowanie linków w mobilnym menu */
         }

         .nav-link {
             margin-left: 0;
             margin-right: 0;
             padding: 0.5rem 1rem;
             /* Lepsze klikanie na mobile */
         }
     }

     @media screen and (max-width: 860px) {

         /* Dla zakładek */
         #tabs label.tab-label {
             font-size: 0;
             /* Ukrywa tekst, zostawia ikonę */
             padding: 12px;
             /* Dostosowanie paddingu dla ikon */
             min-width: auto;
         }

         #tabs label.tab-label:before {
             margin: 0;
             font-size: 18px;
             /* Rozmiar ikony */
         }
     }

     @media screen and (max-width: 480px) {

         /* Zmieniono z 460px dla spójności z breakpointami Bootstrapa */
         #tabs label.tab-label {
             padding: 10px 8px;
             /* Mniejszy padding na bardzo małych ekranach */
         }

         div.button-wag,
         a.button-wag {
             min-width: auto;
             /* Pełna szerokość lub mniejsza stała */
             width: calc(100% - 10px);
             /* Pełna szerokość minus marginesy */
             margin-left: 5px;
             margin-right: 5px;
             float: none;
             /* Wyłączenie float dla układu w kolumnie */
         }

         div.buttony {
             display: flex;
             flex-direction: column;
             align-items: center;
         }
     }

     #kolorowanki-slider-container .swiper-custom-navigation .swiper-button-prev {
         background-color: none;
     }