.table {
            margin: 0; /*  */
            padding:0; /*  */
            border-collapse: collapse; /* nie ma być odstepów */
            /* background-color: lightyellow;  */
            /* border: 1px solid #000000; */
            /* border-collapse:separate;  */
        }
        .dark-blue {
            background-color: #B4C6E7; /* Kolor tła dla wiersza */
            color: black; /* Kolor tekstu */
        }

        
        /* Styl dla wiersza o klasie "light-blue" */
        .light-blue {
            background-color: #EBF0F9; /* Kolor tła dla wiersza */
            color: black; /* Kolor tekstu */
        }

        .border1 {
            border: 1px solid #000000; /* Kolor tła dla wiersza */
        }

        .border2 {
            border-bottom: 1px solid #000000; /* Kolor tła dla wiersza */
        }

        .text20{
            color:black;
            margin-left:30px;
            font-size:17px;
        }

        .tr-odstep {
            height: 20px; /* odstęp pomiędzy wierszami */
            background-color: lightyellow;
        }

        .shadow-effect {
            -webkit-box-shadow: 7px 8px 24px 0px rgba(66, 68, 90, 1);
            -moz-box-shadow: 7px 8px 24px 0px rgba(66, 68, 90, 1);
            box-shadow: 7px 8px 24px 0px rgba(66, 68, 90, 1);
        }

        .shadow-effect-up {
            -webkit-box-shadow: inset -3px -7px 9px 0px rgba(66, 68, 90, 1);
            -moz-box-shadow: inset -3px -7px 9px 0px rgba(66, 68, 90, 1);
            box-shadow: inset -3px -7px 9px 0px rgba(66, 68, 90, 1);
        }

        .shadow-effect-button {
            -webkit-box-shadow: inset -3px -7px 9px 0px rgba(66, 68, 90, 1);
            -moz-box-shadow: inset -3px -7px 9px 0px rgba(66, 68, 90, 1);
            box-shadow: inset -3px -7px 9px 0px rgba(66, 68, 90, 1);
        }

        .shadow-effect-ramka {
            -webkit-box-shadow: inset -3px -7px 9px 0px rgba(66, 68, 90, 1);
            -moz-box-shadow: inset -3px -7px 9px 0px rgba(66, 68, 90, 1);
            box-shadow: inset -3px -7px 9px 0px rgba(66, 68, 90, 1);
        }

        .text-shadow-effect-black {
            text-shadow: 4px 4px 6px rgba(66, 68, 90, 1);
        }

        .text-shadow-effect-yellow {
            text-shadow: 4px 4px 6px rgba(255, 255, 0, 1);
        }

        .text-shadow-effect-red {
            text-shadow: 2px -2px 6px rgba(189, 114, 183, 1);
        }

        /* kontener z kilkoma polami tekstowymi - pierwsza wersja*/
        .container10 {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: flex-start;
            align-content: flex-start;
        }

        /* kontener z kilkoma polami tekstowymi - centrowany*/
       .container2 {
            display: flex;
            flex-direction: row;      /* Ustawiamy kierunek flex na kolumnę */
            flex-wrap: wrap;
            justify-content: center; /* Centrowanie zawartości w pionie */
            align-items: center; /* Centrowanie zawartości w poziomie */
             /* height: 100vh; Wysokość kontenera na całą wysokość widoku */
        }

       .container3 {
            display: flex;
            flex-direction: row;      /* Ustawiamy kierunek flex na kolumnę */
            flex-wrap: wrap;
            justify-content: center; /* Centrowanie zawartości w pionie */
             /* Centrowanie zawartości w poziomie align-items: center; */
             /* height: 100vh; Wysokość kontenera na całą wysokość widoku */
             width:100%;
             height:100%;
        }

        .container4 {
            display: flex;
            flex-direction: row; /* Ustawiamy kierunek flex na kolumnę */
            flex-wrap: wrap;
            justify-content:left; /*  */
            align-items:baseline; /*  */
            /* height: 100vh; Wysokość kontenera na całą wysokość widoku */
        }

        
        /*  ------  */

        .text-box-td {
            width: 350px;
            /*height: 100px;*/
            background-color: white;
            margin: 10px;
            padding: 5px;
        }
        /* ......... */

        /*zaokrąglone krawędzie*/
        .border-radius {
            border-radius: 10px 10px 10px 10px;
        }

        
        /*gradient tła*/
        .gradient-blue {
            border-radius: 20px 20px 20px 20px;
            background-color: rgba(89, 131, 252, 1);
            background-image: linear-gradient(90deg, rgba(89, 131, 252, 1) 0%, rgba(41, 53, 86, 1) 100%);
            color:white;
        }

        .gradient-blue-kolowe {
            background-color: rgba(89, 131, 252, 1);
            background-image: radial-gradient(circle, rgba(89, 131, 252, 1) 53%, rgba(41, 53, 86, 1) 94%);
        }

        /*przekształcanie*/
        .text-box-td:hover {
            background-color:aqua;
            color:white;
            transition: all 0.5s linear;

        }

        .padding10 {
            margin: 10px;
        }

        /*grid do div - kolumny w wierszach zawsze są wyświetlane obok siebie - nie sa responsywne*/
        .container-grid {
            display: grid;
            grid-template-columns: auto auto; /* Dwie kolumny o szerokościach automatycznych */
            grid-gap: 10px; /* Odstęp między kolumnami */
            border: 1px solid black;
            background-color:aqua;
        }

        .column-grid {
            padding: 5px;
          /* width:49%;     */
          /*  border: 1px solid black;       */
        }
        /*      */

        /*grid do div - responsywne*/
        .container-grid2 {
            display: flex;
            flex-wrap: wrap;
            background-color:aqua;
            border: 1px solid black;
        }

        .column-grid2 {
            width: 50%; /* Dwie kolumny na większych ekranach */
            padding: 10px;
            margin-top:1px;
            margin-bottom:1px;
            box-sizing: border-box; /* Żeby padding nie zwiększał szerokości kolumny */
               /* border: 1px solid black;     */
        }

        .column-grid-color1 {
            background-color: lightcyan; /* Ustaw kolor dla kolumny 1 */
        }

        .column-grid-color2 {
            background-color:rgba(242, 243, 250, 1.00); /* Ustaw kolor dla kolumny 2 */
        }

        .separator {
            width: 100%;
            height: 1px;
            background-color: black; /* lightgray */
            margin: 0; /* Dodatkowy margines dla oddzielenia */
        }
        /*      */

        /* wypunktowania w opisie lekcji     */
        
        /*      */

        .wyjasnienia-height {
            min-height:10em;    /* nie jest używana - musi być w style - ustawiona min wysokość dla wyjaśnień przy zdaniach 1 */
        }

        .flags-container {
            position: fixed;
            top: 10px;
            right: 10px;
            z-index: 1000; /* Zapewnia, że kontener będzie na wierzchu innych elementów */
        }

        .bottom-container {
            position: fixed;
            bottom: 1px; /* Odległość od dołu strony */
            left: 2%;
             /* transform: translateX(-50%); - do wyśrodkowania*/
             /* z-index: 1; Upewnia się, że kontener będzie na wierzchu innych elementów */
            width: auto; /* Dostosowanie szerokości kontenera */
             /* background-color: #f1f1f1; Opcjonalne tło kontenera */
            padding: 10px; /* Opcjonalne wypełnienie wewnątrz kontenera */
            text-align: center; /* Wycentrowanie tekstu w kontenerze */
            color:white;
            z-index: 0;
            margin-bottom:0px;
        }

        .bottom-container1 {
            position: absolute;
            bottom: 0; /* Ustawienie na dole kontenera nadrzędnego */

             /* position: fixed; Odległość od dołu strony */
             /* bottom: 5px; Odległość od dołu strony */
            left: 2%;
             /* transform: translateX(-50%); - do wyśrodkowania*/
             /* z-index: 1000; Upewnia się, że kontener będzie na wierzchu innych elementów */
            width: auto; /* Dostosowanie szerokości kontenera */
             /* background-color: #f1f1f1; Opcjonalne tło kontenera */
            padding: 1px; /* Opcjonalne wypełnienie wewnątrz kontenera */
            text-align: center; /* Wycentrowanie tekstu w kontenerze */
            color:white;
            margin-top:20px;        /* margin-top:15px; Wycentrowanie tekstu w kontenerze */
            z-index: 0;
        }
                
        .scrollable-container {
             /* width: 300px; Szerokość kontenera */
            height: 400px; /* Wysokość kontenera */
            overflow-y: scroll; /* Pionowy pasek przewijania */
            border: 1px solid #ccc; /* Obramowanie dla lepszej widoczności */
            padding: 10px; /* Wewnętrzne odstępy */
            box-sizing: border-box; /* Uwzględnij padding i border w szerokości i wysokości kontenera */
            margin-top:5px;
            margin-bottom:15px;
        }

        .scrollable-container-opisy {
                 /* width: 300px; Szerokość kontenera */
               width:100%; height:100%; position:relative;  
                
                
                overflow-y: auto; /* width:99%; height:99%; position:fixed; Pionowy pasek przewijania */
                border: 1px solid #ccc; /* Obramowanie dla lepszej widoczności */
                 /* padding: 10px; Wewnętrzne odstępy */
                box-sizing: border-box; /* Uwzględnij padding i border w szerokości i wysokości kontenera */
                 /* margin-top:5px; margin-bottom:15px; Pionowy pasek przewijania */
                
            }

        .container_tabela { /* formatowanie tekstu z głośniekiem */
            display: flex;
            align-items: center; /* Wyśrodkowanie pionowe */
            justify-content: space-between; /* Obrazek po prawej stronie */
            gap: 10px; /* Odstęp między tekstem a obrazkiem */
            padding: 10px; /* Dodaj trochę wewnętrznego marginesu */
            border: 1px solid #ddd; /* Opcjonalna ramka */
            border-radius: 5px; /* Zaokrąglone rogi */
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Delikatny cień */
        }

        .container_tabela img { /* formatowanie tekstu z głośniekiem */
            width: 20px; /* Szerokość obrazka */
            height: 20px; /* Wysokość obrazka */
            object-fit: contain; /* Dopasowanie obrazka */
        }

        .text_tabela { /* formatowanie tekstu z głośniekiem */
            flex-grow: 1; /* Tekst zajmuje dostępne miejsce */
        }

        /* snip0015 - tekst na banerze */
        @import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);       /* na obrazki po najechaniu rozwija się tekst */
        
        figure.snip0015 {
          font-family: 'Raleway', Arial, sans-serif;
          color: #fff;
          position: relative;
          overflow: hidden;
          margin: 5px;
          min-width: 220px;
          max-width: 315px;
                /* max-height: 310px; 220px */
          width: 100%;
          background: #000000;
          text-align: center;
        }
        figure.snip0015 * {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
        }
        figure.snip0015 img {
          opacity: 1;
          width: 100%;
          -webkit-transition: opacity 0.35s;
          transition: opacity 0.35s;    /* 0.35s */
        }
        figure.snip0015 figcaption {
          position: absolute;
          bottom: 0;
          left: 0;
          padding: 2em 2em;    /* 3em 3em; */
          width: 100%;
          height: 100%;
        }
        figure.snip0015 figcaption::before {
          position: absolute;
          top: 50%;
          right: 15px;      /* 30px mmm zmiana chyba nic nie daje*/
          bottom: 50%;
          left: 15px;       /* 30px chyba nic nie daje */
          border-top: 1px solid rgba(255, 255, 255, 0.8);
          border-bottom: 1px solid rgba(255, 255, 255, 0.8);
          content: '';
          opacity: 0;
          background-color: #ffffff;        /* #ffffff */
          -webkit-transition: all 0.4s;
          transition: all 0.4s;
          -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
        }
        figure.snip0015 h2,
        figure.snip0015 p {
          margin: 0 0 5px;
          opacity: 0;
          -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
          transition: opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
                     /* overflow: auto; */
        }
        figure.snip0015 h2 {
           /* word-spacing: -0.15em; */
          font-weight: 300;
           /* text-transform: uppercase; */
          -webkit-transform: translate3d(0%, 50%, 0);
          transform: translate3d(0%, 50%, 0);
          -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
        }
        figure.snip0015 h2 span {
          font-weight: 800;
        }
        figure.snip0015 p {
          font-weight: 200	;
          -webkit-transition-delay: 0s;
          transition-delay: 0s;
          /* dodane  overflow: auto; */
        }
        figure.snip0015 a {
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          position: absolute;
          color: #ffffff;       /* ffffff */
        }
        figure.snip0015:hover img {
          opacity: 0.15;        /* 0.35 */
        }
        figure.snip0015:hover figcaption h2 {
          opacity: 1;
          -webkit-transform: translate3d(0%, 0%, 0);
          transform: translate3d(0%, 0%, 0);
          -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
        }
        figure.snip0015:hover figcaption p {
          opacity: 1;                     /* 0.9 */
          -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
          /* dodane  overflow: auto;*/
        }
        figure.snip0015:hover figcaption::before {
          background: rgba(255, 255, 255, 0);           /* rgba(255, 255, 255, 0) */
          top: 15px;            /* 30px poprawka 2 też chyba nic nie daje*/
          bottom: 15px;          /* 30px */
          opacity: 1;
          -webkit-transition-delay: 0s;
          transition-delay: 0s;
        }

        .scrollable-paragraph:hover {
            overflow: auto; /* pokazanie paska przewijania przy hover */
        }

        /* koniec snip0015 - tekst na banerze */

        /* snip1361 - tekst z dołu na baner */
        @import url(https://fonts.googleapis.com/css?family=Oswald);            /* na obrazki najeżdża ramka z tekstem */
        @import url(https://fonts.googleapis.com/css?family=Quattrocento);
        .snip1361 {
          font-family: 'Quattrocento', Arial, sans-serif;
          position: relative;
          overflow: hidden;
          margin: 5px;             /* 10 */
          min-width: 230px;
          max-width: 315px;
          width: 100%;
          color: #141414;
          text-align: left;
          line-height: 1.2em;   /* 1.4  */
          font-size: 16px;
        }
        .snip1361 * {
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          -webkit-transition: all 0.35s ease;
          transition: all 0.35s ease;
        }
        .snip1361 img {
          max-width: 100%;
          vertical-align: top;
        }
        .snip1361 figcaption {
          position: absolute;
          top: calc(85%);       /* 77  */
          width: 100%;
          background-color: #ffffff;
          padding: 10px 20px 65px;
          overflow: auto;   /* dodane  overflow: auto;*/
        }
        .snip1361 figcaption:before {
          position: absolute;
          content: '';
          z-index: 2;
          bottom: 100%;
          left: 0;
          width: 100%;
          height: 80px;
          background-image: -webkit-linear-gradient(top, transparent 0%, #ffffff 100%);
          background-image: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
          overflow: auto;   /* dodane  overflow: auto;*/
        }
        .snip1361 h3,
        .snip1361 p {
          margin: 0 0 10px;
        }
        .snip1361 h3 {
          font-weight: 300;
          font-size: 1.4em;
          line-height: 1.2em;
          font-family: 'Oswald', Arial, sans-serif;
          /* text-transform: uppercase;*/
        }
        .snip1361 p {
          font-size: 0.9em;
          letter-spacing: 1px;
          opacity: 0.9;
          overflow: auto;   /* dodane  overflow: auto;*/
        }
        .snip1361 a {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          z-index: 2;
        }
        .snip1361:hover figcaption,
        .snip1361.hover figcaption {
          top: 80px;
          overflow: auto;   /* dodane  overflow: auto;*/
        }
        /* koniec snip1361 - tekst z dołu na baner */

        .top-aligned {
            display: flex;
            flex-direction: column;
            justify-content: flex-start; /* Wyrównanie zawartości do góry */ 
            vertical-align:top;
        }

        .film-max{
            max-height:400px;
        }

        .text-box-oferty {
                 /* width: 48%; */
            height: 23px;               /* 24px */
            /* background-color: white; */
            padding: 8px;
            margin:5px;
            font-size: 14px;
            font-weight:bold;
            background:white;
          }

        .text-box-oferty-cyber {
                 /* width: 48%; */
            height: 23px;               /* 24px */
            /* background-color: white; */
            padding: 5px;
            margin:3px;
            font-size: 12px;
            font-weight:bold;
            background:white;
          }
        
        @media (min-width: 1200px) {
          .text-overlay {
            position: absolute; /* Ustawienie pozycji na absolute, aby można było dowolnie pozycjonować w obrębie rodzica */
            top: 5%; /* Wyśrodkowanie w pionie */
            left: 5%; /* Wyśrodkowanie w poziomie */
             /* transform: translate(-10%, -10%); Doprecyzowanie wyśrodkowania */
            background-color: rgba(0, 0, 0, 0.2); /* Transparentne tło (rgba), gdzie czwarty parametr to przezroczystość (0 - przezroczyste, 1 - nieprzezroczyste) */
            padding: 10px; /* Dodatkowy odstęp wewnątrz */
            color: white; /* Kolor tekstu */
            font-size: 60px; /* Rozmiar czcionki */
            text-shadow: 5px 5px 0px black; /* Dodanie cienia (3px w dół, 3px w prawo, cień czarny) */
          }

            .text-oferty1{
            color:white;
            font-size:16px;
          }

          .text-oferty2{
            color:white;
            font-size:14px;
          }

          .text-oferty3{
            color:white;
            font-size:18px;
          }

          .text-oferty4{
            color:white;
            font-size:24px;
            font-weight:500;
          }

          .div_class1 {
            font-size: 28px;
            text-align: center;
            font-weight:bold;
          }

          .div-class-temat {
            font-size: 28px;
            text-align: center;
            font-weight:normal;
          }

          .responsive-img {
          width: 250px;
          height:150px;
          text-align: center;
          display: inline-block; /* Ustawienie obrazka jako elementu blokowego */
          padding-top:5px;
          }
          .td-tytul {
          font-size: 14px;
          text-align: center;
          margin:0;
          padding:10px; 
          vertical-align: middle;
          }
          .td-opis {
          font-size: 12px;
          text-align: left;
          margin:0;
          padding:10px;
          vertical-align:top;
          }
          
          .td-obrazek {
            text-align: center;        /*  */
            vertical-align: middle;    /*  */
            width:25%;
          }

          .text-box-td-33 {
            width: 48%;
            /*height: 100px;*/
            /* background-color: white; */
            margin: 10px;
          }
          .kolumny2-left {
            width: 50%;
            margin: 0px 0px 0px 0px;
            padding:2px;                /*zmieniłem z 3px aby dobrze układały sie w dwóch kolumnach - przestało działac  - 2px jeszcze działa */
            float:left;
            text-align:left;
            vertical-align:top;
            
            /*padding:0px 5px 0px 0px;*/
            /*height: 100px;*/
            /* background-color: white; */
          }

          .kolumny2-right {
            width: 50%;
            /*width: 49%;*/
            /*flex-grow: 1;*/
            float:right;
            margin:0px 0px 0px 0px;
            padding:2px;
            text-align:left;
            vertical-align:top;
            /*height: 100px;*/
            /* background-color: white; */
          }
          
          .kolumny3-left {
            width: 31%;
            margin: 0px 0px 0px 0px;
            padding:3px;
            float:left;
            text-align:left;
            vertical-align:top;
            background-color: #EBF0F9;
            /*padding:0px 5px 0px 0px;*/
            /*height: 100px;*/
            /* background-color: white; */
          }


        }

        /* Dla ekranów większych lub równych md, ale mniejszych niż lg */
        @media (min-width: 992px) and (max-width: 1199px) {
          .text-overlay {
            position: absolute; /* Ustawienie pozycji na absolute, aby można było dowolnie pozycjonować w obrębie rodzica */
            top: 5%; /* Wyśrodkowanie w pionie */
            left: 5%; /* Wyśrodkowanie w poziomie */
             /* transform: translate(-10%, -10%); Doprecyzowanie wyśrodkowania */
            background-color: rgba(0, 0, 0, 0.2); /* Transparentne tło (rgba), gdzie czwarty parametr to przezroczystość (0 - przezroczyste, 1 - nieprzezroczyste) */
            padding: 10px; /* Dodatkowy odstęp wewnątrz */
            color: white; /* Kolor tekstu */
            font-size: 48px; /* Rozmiar czcionki */
            text-shadow: 4px 4px 0px black; /* Dodanie cienia (3px w dół, 3px w prawo, cień czarny) */
          }

          .text-oferty1{
            color:white;
            font-size:17px;
          }

          .text-oferty2{
            color:white;
            font-size:14px;
          }

          .text-oferty3{
            color:white;
            font-size:20px;
          }

          .text-oferty4{
            color:white;
            font-size:22px;
          }

          .div_class1 {
            font-size: 24px;
            font-weight:bold;
            text-align: center;
            vertical-align: middle;
          }

          .div-class-temat {
            font-size: 24px;
            text-align: center;
            font-weight:bold;
            vertical-align: middle;
          }

          .responsive-img {
          width:250px;
          height:150px;
          text-align: center;
          display: inline-block; /* Ustawienie obrazka jako elementu blokowego */
          padding-top:5px;
          }
          .td-tytul {
          font-size: 15px; 
          text-align: center;
          margin:0;
          padding:10px;
          vertical-align: middle;
          }
          .td-opis {
          font-size: 12px;
          text-align: left;
          margin:0;
          padding:10px; 
          vertical-align: top;
          }
          .td-obrazek {
            text-align: center;        /*  */
            vertical-align: middle;    /*  */
            width:23%;
          }
          .td-zdanie {
          text-align: left;     /* formatowanie zdań lub zdań z wyjasnieniem - 1,2 zdania i opisu / reszta musi być w style */
          
          }

          
          .text-box-td-33 {
            width: 48%;
            /*height: 100px;*/
           /* background-color: white; */
            margin: 10px;
            
          }
          .kolumny2-left {
            width: 50%;
            /*height: 100px;*/
            /* background-color: white; */
            margin: 0px 0px 0px 0px;
            padding:2px;
            float:left;
            vertical-align:top;
            text-align:left;
          }
          .kolumny2-right {
            width: 50%;
            /*width: 49%;*/
            /*flex-grow: 1;*/
            float:right;
            margin:0px 0px 0px 0px;
            padding:2px;
            text-align:left;
            vertical-align:top;
            /*height: 100px;*/
            /* background-color: white; */
          }

          .kolumny3-left {
            width: 31%;
            margin: 0px 0px 0px 0px;
            padding:3px;
            float:left;
            text-align:left;
            vertical-align:top;
            background-color: #EBF0F9;
            
            /*padding:0px 5px 0px 0px;*/
            /*height: 100px;*/
            /* background-color: white; */
          }

                    
        }

        

        /* Dla ekranów większych lub równych sm, ale mniejszych niż md */
        @media (min-width: 768px) and (max-width: 991px) {
          .text-overlay {
            position: absolute; /* Ustawienie pozycji na absolute, aby można było dowolnie pozycjonować w obrębie rodzica */
            top: 4%; /* Wyśrodkowanie w pionie */
            left: 4%; /* Wyśrodkowanie w poziomie */
             /* transform: translate(-10%, -10%); Doprecyzowanie wyśrodkowania */
            background-color: rgba(0, 0, 0, 0.2); /* Transparentne tło (rgba), gdzie czwarty parametr to przezroczystość (0 - przezroczyste, 1 - nieprzezroczyste) */
            padding: 10px; /* Dodatkowy odstęp wewnątrz */
            color: white; /* Kolor tekstu */
            font-size: 34px; /* Rozmiar czcionki */
            text-shadow: 2px 2px 0px black; /* Dodanie cienia (3px w dół, 3px w prawo, cień czarny) */
          }

          .text-oferty1{
            color:white;
            font-size:15px;
          }

          .text-oferty2{
            color:white;
            font-size:13px;
          }

          .text-oferty3{
            color:white;
            font-size:17px;
          }

          .text-oferty4{
            color:white;
            font-size:18px;
          }
            
          .div_class1 {
            font-size: 18px;
            font-weight:normal;
            text-align: center;
            vertical-align: middle;
          }
          .div-class-temat {
            font-size: 18px;
            text-align: center;
            font-weight:bold;
            vertical-align: middle;
          }
          .responsive-img {
          width: 200px;
          height:120px;
          text-align: center;
          display: inline-block; /* Ustawienie obrazka jako elementu blokowego */
          padding-top:5px;
          }
          .td-tytul {
          font-size: 15px;
          text-align: center; 
          margin:0;
          padding:10px;
          vertical-align: middle;
          }
          .td-opis {
          font-size: 12px;
          text-align: left;
          margin:0; 
          padding:10px;
          vertical-align: top;
          }
          .td-obrazek {
            text-align: center;        /*  */
            vertical-align: middle;    /*  */
          }
          .text-box-td-33 {
            width: 100%;
            /*height: 100px;*/
           /* background-color: white; */
            margin: 10px;
            
          }
          .kolumny2-left {
            width: 50%;
            /*height: 100px;*/
            /* background-color: white; */
            margin: 0px 0px 0px 0px;
            padding:2px;
            float:left;
            vertical-align:top;
            text-align:left;
          }

          .kolumny2-right {
            width: 50%;
            /*width: 49%;*/
            /*flex-grow: 1;*/
            float:right;
            margin:0px 0px 0px 0px;
            padding:2px;
            text-align:left;
            vertical-align:top;
            /*height: 100px;*/
            /* background-color: white; */
          }

          .kolumny3-left {
            width: 45%;
            margin: 0px 0px 0px 0px;
            padding:3px;
            float:left;
            text-align:left;
            vertical-align:top;
            background-color: #EBF0F9;
            /*padding:0px 5px 0px 0px;*/
            /*height: 100px;*/
            /* background-color: white; */
          }

          .bottom-container {
            position: fixed;
            bottom: 1px; /* Odległość od dołu strony */
            left: 2%;
             /* transform: translateX(-50%); - do wyśrodkowania*/
             /* z-index: 1; Upewnia się, że kontener będzie na wierzchu innych elementów */
            width: auto; /* Dostosowanie szerokości kontenera */
             /* background-color: #f1f1f1; Opcjonalne tło kontenera */
            padding: 10px; /* Opcjonalne wypełnienie wewnątrz kontenera */
            text-align: center; /* Wycentrowanie tekstu w kontenerze */
            color:white;
            z-index: 0;
            margin-bottom:-10px;
        }

                    
        }

        @media (max-width: 768px) {
          .text-overlay {
            position: absolute; /* Ustawienie pozycji na absolute, aby można było dowolnie pozycjonować w obrębie rodzica */
            top: 2%; /* Wyśrodkowanie w pionie */
            left: 2%; /* Wyśrodkowanie w poziomie */
             /* Doprecyzowanie wyśrodkowania transform: translate(-10%, -10%);*/
            background-color: rgba(0, 0, 0, 0.2); /* Transparentne tło (rgba), gdzie czwarty parametr to przezroczystość (0 - przezroczyste, 1 - nieprzezroczyste) */
            padding: 10px; /* Dodatkowy odstęp wewnątrz */
            color: white; /* Kolor tekstu */
            font-size: 18px; /* Rozmiar czcionki */
            text-shadow: 2px 2px 0px black; /* Dodanie cienia (3px w dół, 3px w prawo, cień czarny) */
          } 
            
          .text-oferty1{
            color:white;
            font-size:15px;
          }

          .text-oferty2{
            color:white;
            font-size:13px;
          }

          .text-oferty3{
            color:white;
            font-size:17px;
          }

          .text-oferty4{
            color:white;
            font-size:18px;
          }

          .div_class1 {
            font-size: 18px;
            font-weight:normal;
            text-align: center;
            vertical-align: middle;
          }
          .div-class-temat {
            font-size: 18px;
            text-align: center;
            font-weight:bold;
            vertical-align: middle;
          }
          .responsive-img {
          width: 150px;
          height:94px;
          text-align: left;
          display: inline-block; /* Ustawienie obrazka jako elementu blokowego */
          padding-top:5px;
          }
          .td-tytul {
          font-size: 16px; 
          text-align: center;
          margin:0;
          padding:10px;
          vertical-align: middle;
          }
          .td-opis {
          font-size: 12px; 
          text-align: left;
          margin:0;
          padding:10px;
          vertical-align: top;
          }
          .td-obrazek {
            text-align: center;        /*  */
            vertical-align: middle;    /*  */
          }
          .text-box-td-33 {
            width: 100%;
            /*height: 100px;*/
            /* background-color: white; */
            margin: 10px;
            
          }

          .kolumny2-left, .kolumny2-right {
            width: 100%;
            margin:10px 0px 0px 0px;
            text-align:left;
            
            /*height: 100px;*/
            /* background-color: white; */
          }

          .column-grid2 {
            width: 100%; /* Pełna szerokość na mniejszych ekranach */
          }

          .przykladowa-klasa1 {
            min-height: initial;    /* usuwanie wpisu min-height: initial;  */
          }

          .kolumny3-left {
            width: 95%;
            margin: 0px 0px 0px 0px;
            padding:3px;
            float:left;
            text-align:left;
            vertical-align:top;
            background-color: #EBF0F9;
            /*padding:0px 5px 0px 0px;*/
            /*height: 100px;*/
            /* background-color: white; */
          }

          .bottom-container {
            position: fixed;
            bottom: 1px; /* Odległość od dołu strony */
            left: 2%;
             /* transform: translateX(-50%); - do wyśrodkowania*/
             /* z-index: 1; Upewnia się, że kontener będzie na wierzchu innych elementów */
            width: auto; /* Dostosowanie szerokości kontenera */
             /* background-color: #f1f1f1; Opcjonalne tło kontenera */
            padding: 10px; /* Opcjonalne wypełnienie wewnątrz kontenera */
            text-align: center; /* Wycentrowanie tekstu w kontenerze */
            color:white;
            z-index: 0;
            margin-bottom:-10px;
        }
          
        }

        @media only screen and (min-width: 320px) and (max-width: 812px) and (orientation: landscape) {
            .scrollable-container {
                 /* width: 300px; Szerokość kontenera */
                height: 200px; /* Wysokość kontenera */
                overflow-y: scroll; /* Pionowy pasek przewijania */
                border: 1px solid #ccc; /* Obramowanie dla lepszej widoczności */
                padding: 10px; /* Wewnętrzne odstępy */
                box-sizing: border-box; /* Uwzględnij padding i border w szerokości i wysokości kontenera */
                margin-top:5px;
                margin-bottom:15px;
            }
        }

        .custom_container_2col {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            width: 100%;
            box-sizing: border-box;
        }

.custom-column-2col {
    flex: 1;
    min-width: 300px;
    padding: 15px;
    background-color: #f8f9fa;
    border: 2px solid #007bff;
    border-radius: 10px;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
    font-family: Arial, sans-serif;
    color: #333;
    text-align: justify;
    display: flex; /* dodane */
    flex-direction: column;
    align-items: flex-start;
}

            /* Inna kolorystyka dla drugiej kolumny */
            .custom-column-2col:nth-child(2) {
                background-color: #e9f5ff;
                border-color: #0056b3;
            }

        /* Dla telefonów (ekrany poniżej 768px) */
        @media (max-width: 768px) {
            .custom_container_2col {
                flex-direction: column;
            }
        }

        .custom_container2_2col {
            display: flex;
            flex-wrap: wrap;
            gap: 10px; /* 20px */
            width: 100%;
            box-sizing: border-box;
        }

.custom-column2-2col {
    flex: 1;
    min-width: 300px;
    padding: 5px;
    background-color: #EBF0F9; /* poprzednia jasny kolor #f8f9fa; */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
    font-family: Arial, sans-serif;
    color: #333;
    text-align: justify;
    display: flex; /* dodane */
    flex-direction: column;
    align-items: flex-start;
}

        /* Dla telefonów (ekrany poniżej 768px) */
        @media (max-width: 768px) {
            .custom_container2_2col {
                flex-direction: column;
            }
        }

        @media (max-width: 600px) {
            .mobile-row {
                display: flex;
                flex-direction: column;
                width: 100%;
            }

            .mobile-cell {
                display: block;
                width: 100% !important;
                box-sizing: border-box;
            }
        }

.author-box-final {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background-color: #f4f6fa;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    padding: 8px 10px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
}

.author-info-final {
    flex: 1 1 auto;
    color: #333;
    margin: 0;
}

.author-button-final {
    background-color: #007bff;
    border: none;
    color: white;
    padding: 4px 12px;
    font-size: 13px;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
}

    .author-button-final:hover {
        background-color: #0056b3;
    }

@media (max-width: 600px) {
    .author-box-final {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    .author-info-final,
    .author-button-final {
        width: 100%;
        margin: 0;
    }

    .author-button-final {
        margin-top: 4px;
        align-self: flex-start;
    }
}