@media (min-width: 320px) {
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     html {
         scroll-behavior: smooth;
         /* Płynne przewijanie */
     }

     body {
         /* font-family: Arial, sans-serif; */
         font-family: 'Open Sans', sans-serif;
     }

     .main-container {
         width: 100%;
     }

     .header {
         position: fixed;
         top: 0px;
         left: 0;
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: space-between;
         background-color: rgba(255, 255, 255, 1);
         padding: 0px 20px;
         z-index: 1000;
     }

     .header .logo {
         font-size: 24px;
         font-weight: bold;
     }

     .header .logo img {
         height: 45px;
         /* Ustaw wysokość logo */
     }

     .header .menu {
         display: flex;
         justify-content: center;

         /* Wyśrodkowanie linków w poziomie */
         gap: 5px;
         flex: 1;
         /* Dodanie elastyczności, aby menu zajmowało dostępne miejsce */
     }

     .header .menu a {
         text-decoration: none;
         color: #333;
         /* font-weight: bold; */
         font-size: 10px;
         padding: 5px;
         border-radius: 5px;
         text-align: center;
         /* Dodanie zaokrąglenia */
         transition: background-color 0.3s ease;
         /* Płynne przejście koloru */
     }

     .header .menu a:hover {
         background-color: rgba(0, 0, 0, 0.1);
         /* Kolor tła przy najechaniu */
     }

     .header .menu a.active {
         background-color: #67aaea;
         /* Kolor tła dla aktywnej opcji */
         color: white;
         /* Kolor tekstu dla aktywnej opcji */
     }

     .hero-section {
         position: relative;
         width: 100%;
         height: 100vh;
         background: url('/img/wspolpraca-banner.jpg') no-repeat center center/cover;
     }

     /* .hero-overlay {
            position: absolute;
            top: 0;
            left: 15%;
            width: 30%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
        } */

     .hero-overlay {
         position: absolute;
         top: 30%;
         left: 0%;
         width: 100%;
         height: 40%;
         /* background: linear-gradient(to right, rgba(128, 128, 128, 0.5), rgba(0, 123, 255, 0.5));  */
         background-color: rgba(7, 79, 154, 0.5);
         color: white;
         display: flex;
         flex-direction: column;
         justify-content: center;
         /* align-items: center; */
         /* align-items: flex-start; */
         padding: 0px;
         /* overflow: hidden; */
     }



     .hero-overlay h1,
     .hero-overlay-outside {
         margin-bottom: 10px;
         font-size: 50px;
         text-align: center;
         color: white;
     }

     .hero-overlay-outside {
         margin-top: 4%;
         font-size: 60px;
         font-weight: 700;
         text-align: center;
         color: white;
     }

     .hero-overlay p {
         font-size: 28px;
         text-align: center;
     }

     .info-section {
         background-color: white;
         padding: 40px 20px;
         text-align: center;
         margin: 0 10%;
     }



     .info-title {
         font-size: 50px;
         margin-bottom: 30px;
         color: #333;
     }

     .info-columns {
         display: flex;
         justify-content: space-between;
         justify-content: space-around;
         gap: 20px;
         flex-wrap: wrap;
         /* Zapewnia responsywność */
     }

     .info-column {
         flex: 1;
         max-width: 30%;
         /* Każda kolumna zajmuje maksymalnie 30% szerokości */
         text-align: center;
         padding: 20px;
         box-sizing: border-box;
     }

     .info-icon {
         width: 150px;
         /* Ustaw szerokość ikony */
         height: 150px;
         /* Ustaw wysokość ikony */
         margin-bottom: 15px;
     }

     .info-column h2 {
         font-size: 50px;
         margin-bottom: 10px;
         color: black;
     }

     .info-column h4 {
         font-size: 18px;
         margin-bottom: 30px;
         color: black
     }

     .info-column p {
         font-size: 16px;
         color: #666;
         line-height: 1.5;
     }

     .two-column-section {
         margin: 0;
         background-color: white;
         padding: 40px 20px;
         display: flex;

         justify-content: space-between;
         justify-content: space-around;
         gap: 10px;
         flex-wrap: wrap;
         /* Zapewnia responsywność */
     }

     .left-column,
     .right-column {
         flex: 1;
         /* max-width: 40%; */
         /* Każda kolumna zajmuje maksymalnie 45% szerokości */
         box-sizing: border-box;
     }

     .left-column h2 {
         font-family: 'OPEN SANS', sans-serif;
         font-weight: normal;
         font-size: 30px;
         margin-bottom: 15px;
         color: black
     }

     .left-column p {
         font-size: 16px;
         margin-bottom: 20px;
         color: #333;
     }

     .more-button {
         padding: 10px 20px;
         background-color: white;
         color: black;
         border: 2px solid #007BFF;
         border-radius: 20px;
         font-size: 16px;
         font-weight: bold;
         cursor: pointer;
         transition: background-color 0.3s ease;
         margin-top: auto;
         margin: 10px;
     }

     .more-button-wspolpraca {
         position: absolute;
         /* Pozycjonowanie absolutne */
         bottom: 10px;
         /* Odstęp 10px od dołu */
         left: 50%;
         /* Wyśrodkowanie przycisku */
         transform: translateX(-50%);
         /* Przesunięcie o 50% szerokości przycisku, aby był wyśrodkowany */
     }



     .more-button-b2b {
         color: #FFF;
         background-color: #67aaea;
         height: 100%;
         font-weight: 500;
         font-size: 18px;
         padding: 10px;
         border: 2px solid #007BFF;
         border-radius: 20px;
         height: 60px;

     }

     .more-button-b2b:hover {
         background-color: #FFF;
         color: black;
     }


     .more-button:hover {
         background-color: #67aaea;
         color: white;
     }

     .right-column p {
         font-size: 16px;
         margin-bottom: 15px;
         color: #555;
         line-height: 1.5;
     }



     .layered-section {
         background-color: rgb(237, 242, 252);
         /* Błękitne tło */
         height: 1000px;
         /* Wysokość sekcji */
         position: relative;
         overflow: hidden;
         /* Ukrywa elementy wychodzące poza sekcję */
     }

     .background-layer {
         position: relative;
         height: 100%;
         /* Dopasowanie wysokości do sekcji nadrzędnej */
         text-align: center;
         /* Wyśrodkowanie tekstu */
     }

     .background-layer h2 {
         font-size: 50px;
         color: black;
         margin: 0;
         line-height: 100px;
         /* Wyśrodkowanie w pionie */
     }

     .background-image {
         position: absolute;
         /* Pozycjonowanie obrazu */
         bottom: 0;
         /* Przylega do dolnej krawędzi */
         right: 0;
         /* Przylega do prawej krawędzi */
         width: 80%;
         /* Szerokość obrazu */
         height: 80%;
         /* Wysokość obrazu */
         object-fit: cover;
         /* Dopasowanie obrazu */
     }

     .foreground-layer {
         position: absolute;
         bottom: 10px;
         /* Przylega do dolnej krawędzi */
         left: 200px;
         /* Odstęp od lewej krawędzi */
         background-color: white;
         padding: 40px;
         width: 40%;
         height: 40%;
         /* Szerokość sekcji */
         border-radius: 10px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         /* Subtelny cień */
         z-index: 2;
         /* Wyższy z-index, aby nachodziła na obraz */
     }

     .foreground-layer h2 {
         font-size: 50px;
         color: black;
         /* Kolor tekstu */
     }

     .foreground-layer h2,
     .foreground-layer p {
         margin: 20px;
         /* Odstępy między elementami */
         color: #333;
         /* Kolor tekstu */
     }

     .foreground-layer h2 {
         font-size: 50px;
         color: black;
         /* Kolor tekstu */
     }

     #b2b,
     #home,
     #cooperation {
         position: relative;
     }

     #b2b:before,
     #home:before,
     #cooperation:before {
         content: '';
         display: block;
         height: 100px;
         /* Wysokość odstępu */
         margin-top: 0px;
         /* Przesunięcie sekcji w górę */
     }


     .icons-section {
         background-color: #f9f9f9;
         /* Jasne tło */
         padding: 40px 20px;
         text-align: center;
     }

     .icons-section h2 {
         font-size: 50px;
         color: black;
         margin-bottom: 20px;
     }

     .icons-container {
         display: grid;
         grid-template-columns: repeat(4, 200px);
         /* 4 kolumny o szerokości 200px */
         justify-content: center;
         /* Wyśrodkowanie całej siatki */
         gap: 20px;
         /* Odstępy między boxami */
         margin: 10px;
     }

     .icon {
         width: 200px;
         /* Szerokość boxa */
         height: 200px;
         /* Wysokość boxa */
         display: flex;
         justify-content: center;
         align-items: center;
         background-color: white;
         border-radius: 10px;
         /* Zaokrąglenie rogów */
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         /* Subtelny cień */
     }

     .icon img {
         max-width: 80%;
         /* Dopasowanie obrazu do kontenera */
         max-height: 80%;
     }




     .contact-section {
         height: 100vh;
         ;
         position: relative;
         background: url('/img/baner-formularz.jpg') no-repeat center center/cover;
         /* Obraz w tle */
         padding: 0 20px;
         /* Usuń górny i dolny padding */
         color: white;
         text-align: center;
         display: flex;
         /* Użycie Flexbox */
         flex-direction: column;
         /* Ustawienie elementów w kolumnie */
         justify-content: center;
         /* Wyśrodkowanie w pionie */
         align-items: center;
         /* Wyśrodkowanie w poziomie */
     }

     .contact-section h2 {
         font-size: 50px;
         margin-bottom: 20px;
         color: #fff;
     }

     .contact-form {
         background-color: rgba(255, 255, 255, 0.5);
         /* Półprzezroczyste tło */
         padding: 20px;
         border-radius: 15px;
         min-width: 900px;
         max-width: 1400px;
         margin: 0 auto;
         color: #333;
     }

     .form-row {
         display: flex;
         justify-content: space-between;
         gap: 20px;
         margin-bottom: 15px;
     }

     .form-row input,
     .form-row select,
     .form-row textarea {
         flex: 1;
         padding: 10px;
         border: 1px solid #ccc;
         border-radius: 15px;
         font-size: 16px;
         background-color: rgba(255, 255, 255, 0.5);
         /* Półprzezroczyste tło */
         color: #333;
         /* Kolor tekstu */
     }

     textarea {
         resize: none;
         background-color: rgba(255, 255, 255, 0.5);
     }

     button {
         padding: 10px 20px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }

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



     .footer {
         background-color: #fff;
         /* Białe tło */
         padding: 40px 20px;
         width: 100%;
         box-sizing: border-box;
     }

     .footer-content {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         align-items: flex-start;
         gap: 20px;
     }

     .footer-left {
         width: 60%;
         /* Lewa strona zajmuje 60% szerokości */
         padding-left: 10%;
         /* Odsunięcie od lewej krawędzi */
     }

     .footer-logo {
         margin-bottom: 20px;
     }

     .footer-row {
         display: flex;
         justify-content: space-between;
         gap: 20px;
         margin-bottom: 20px;
     }

     .footer-row a {
         text-decoration: none;
         color: grey;
         /* Kolor linków */
         font-weight: bold;
     }

     .footer a:hover {
         text-decoration: underline;
         color: rgb(56, 56, 56);
     }

     .footer-column {
         flex: 1;
     }

     .footer-column h3 {
         font-size: 18px;
         margin-bottom: 10px;
         color: black
     }

     .footer-column p {
         font-size: 14px;
         color: #333;
         line-height: 1.5;
     }

     .footer-contact {
         margin-top: 20px;
         font-size: 14px;
         color: #333;
         width: 300px;
         background-color: rgb(237, 242, 252);
         padding: 30px;
         border-radius: 15px;
     }


     .footer-right {
         margin-right: 0px;
         width: 100%;
         /* Prawa strona zajmuje 50% szerokości */
     }

     .footer-right iframe {
         width: 100%;
         /* Szerokość mapy */
         height: 600px;
         /* Wysokość mapy */
         border: none;
         /* Brak obramowania */
         border-radius: 10px;
         /* Zaokrąglenie rogów */
     }

     .footer-bottom {
         text-align: center;
         margin-top: 20px;
     }

     .footer-bottom p {
         font-size: 14px;
         color: #666;
     }

     .footer-bottom hr {
         margin: 10px 0;
         border: none;
         border-top: 1px solid #ccc;
     }

     .full-width-section {
         width: 100%;
         /* Na całą szerokość */
         background-color: #f9f9f9;
         /* Jasne tło */
         padding: 40px 20px;
         text-align: center;
     }

     .section-title {

         font-size: 50px;
         margin-bottom: 60px;
         color: #333;
     }

     .service-container {
         display: flex;
         width: 80%;
         margin: auto;

         justify-content: space-around;
         /* Rozmieszczenie bloków */
         flex-wrap: wrap;
         /* Zapewnia zawijanie na mniejszych ekranach */
         gap: 20px;
     }


     .service-block {
         background-color: white;
         width: 22%;
         height: 450px;
         padding: 20px;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         /* Subtelny cień */
         position: relative;
         text-align: left;
     }



     .icon-container {
         position: absolute;
         top: -40px;
         /* Pozycjonowanie ikony */
         left: 50%;
         transform: translateX(-50%);
         width: 120px;
         height: 120px;
         /* background-color: #67aaea;s */
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .icon-container img {
         width: 100%;
         /* Dopasowanie ikony */
         height: 100%;
     }

     .service-block h3 {
         margin-top: 70px;
         /* Odstęp od ikony */
         font-size: 24px;
         font-weight: 400;
         color: #333;
     }

     .service-block ul {
         /* list-style: none; */
         padding: 0;
         margin-top: 15px;
     }

     .service-block ul li {
         font-size: 16px;
         color: #000;
         margin: 15px;
         margin-bottom: 10px;
         /* margin: 10px; */
     }


     .promo-section {
         background-color: white;
         /* Białe tło */
         /* height: 100vh; */
         padding: 40px 20px;
         box-sizing: border-box;
         text-align: center;
     }

     .promo-bar {
         position: relative;
         background-color: rgb(191, 182, 176);
         /* Szary pasek */
         height: 100px;
         margin: 0 auto 40px;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
     }

     .promo-icon {
         position: absolute;
         top: -10%;
         transform: translateY(-50%);
         left: 50%;
         /* Możesz dostosować pozycję */
         width: 80px;
         height: 80px;
         background-color: white;
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .promo-icon img {
         width: 100%;
         height: 100%;
     }

     .promo-text {
         font-size: 26px;
         color: white;
         margin-left: 100px;
         /* Odstęp od ikony */
     }

     .promo-blocks {
         display: flex;
         width: 80%;
         margin: auto;
         justify-content: space-around;
         flex-wrap: wrap;
         gap: 20px;
         margin-bottom: 40px;
     }

     .promo-block {
         background-color: white;
         width: 22%;
         padding: 20px;
         border-radius: 10px;
         /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
         text-align: center;
     }

     .promo-block-icon {
         width: 200px;
         height: 200px;
         margin: 0 auto 20px;
         /* background-color: #67aaea; */
         border: 2px solid #007BFF;
         border-radius: 10px;
         display: flex;
         justify-content: center;
         align-items: center;
         /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
     }

     .promo-block-icon img {
         width: 100%;
         height: 100%;

     }

     .promo-block p {
         font-size: 20px;
         color: #000
     }

     .promo-footer {
         margin-top: 20px;
         width: 80%;
         margin: auto;
     }


     .promo-button {
         padding: 10px 20px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }

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

     .promo-footer p {
         font-size: 20px;
         /* color: #666; */
         margin-top: 10px;
         text-align: left;
         line-height: 1.5;
     }

     .promo-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         /* 3 kolumny */
         grid-template-rows: repeat(2, 1fr);
         /* 2 rzędy */
         gap: 20px;
         /* Odstępy między blokami */
         margin: 40px auto;
         height: 50vh;
         ;
         width: 80%;
         /* Szerokość siatki */

     }

     .promo-item {
         background-color: rgb(237, 242, 252);
         /* background-color: #f9f9f9; */
         border: 1px solid #ddd;
         border-radius: 10px;
         padding: 20px;
         text-align: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         font-weight: 400;
         font-size: 20px;
     }

     .promo-item:not(.promo-item-4) {
         display: flex;
         /* Ustawienie Flexboxa */
         justify-content: center;
         /* Wyśrodkowanie w poziomie */
         align-items: center;
         /* Wyśrodkowanie w pionie */

         display: flex;
         /* Ustawienie Flexboxa */
         justify-content: center;
         /* Wyśrodkowanie w poziomie */
         align-items: center;
         /* Wyśrodkowanie w pionie */
         background-color: rgb(237, 242, 252);
         border: 1px solid #ddd;
         border-radius: 10px;
         padding: 20px;
         text-align: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .promo-item-1 {
         grid-column: 1 / 2;
         /* Kolumna 1 */
         grid-row: 1 / 2;
         /* Rząd 1 */
     }

     .promo-item-2 {
         grid-column: 2 / 3;
         /* Kolumna 2 */
         grid-row: 1 / 2;
         /* Rząd 1 */
     }

     .promo-item-3 {
         grid-column: 3 / 4;
         /* Kolumna 3 */
         grid-row: 1 / 3;
         /* Rząd 1 i 2 */
     }

     .promo-item-4 {
         grid-column: 1 / 3;
         /* Kolumna 1 i 2 */
         grid-row: 2 / 3;
         /* Rząd 2 */
     }

     .promo-item-4 p {
         text-align: left;
     }

     .courier-logos {
         display: flex;
         flex-direction: row;
     }

     .courier-logos img {
         max-height: 55px;
         margin: 10px;
     }


     .promo-content {
         width: 80%;
         margin: 40px auto;
         text-align: center;

     }

     .promo-paragraph {
         font-size: 16px;
         color: #333;
         margin-bottom: 20px;
         line-height: 1.5;
         text-align: left;
     }

     .promo-row {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 20px;
         gap: 20px;
     }

     .promo-row-footer {
         background-color: rgb(237, 242, 252);
         justify-content: space-between;
     }

     .promo-row-footer p {
         padding: 20px;
         font-size: 20px;
         color: #333;
         margin-top: 10px;
         text-align: left;
         line-height: 1.5;
     }

     .promo-column {
         flex: 1;
         text-align: left;
     }

     .promo-column img {
         width: 100%;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .promo-button {
         padding: 10px 20px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }

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


     .serwis-content {
         width: 80%;
         margin: 40px auto;
         text-align: center;
         /* border: 2px solid; */
         /* border-image: linear-gradient(to bottom, blue, green) 1; */
         padding: 20px;
         border-radius: 10px;
     }

     .promo-boxes {
         display: flex;
         width: 80%;
         margin: auto;
         justify-content: space-between;
         gap: 20px;
         margin-top: 20px;
     }

     .promo-box {
         position: relative;
         flex: 1;
         padding: 20px;
         width: 100%;
         text-align: center;
         background-color: white;
         /* Wewnętrzne tło boxa */
         border-radius: 50px;
         /* Zaokrąglone rogi */
         box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

         overflow: hidden;
         /* Ukrywa nadmiar pseudo-elementu */
         z-index: 1;
         /* Ustawia zawartość nad pseudo-elementem */
     }



     .promo-box h3 {
         font-size: 24px;
         margin-bottom: 10px;
         color: #000;
     }

     .promo-box p {
         font-size: 16px;
         margin-bottom: 10px;
         color: #000;
         line-height: 1.5;
     }

     .promo-box ul li {
         font-size: 16px;
         margin-bottom: 10px;
         color: #000;
         line-height: 1.5;
         justify-content: left;
     }

     /* .promo-box button {
            padding: 10px 20px;
            background-color: #67aaea;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        } */

     .promo-box button:hover {
         background-color: #0056b3;
     }


     .promo-new-section {
         width: 80%;
         margin: 40px auto;
         text-align: center;
         background-color: rgb(237, 242, 252);
         padding: 50px;
     }

     .promo-new-paragraph {
         font-size: 18px;
         margin-bottom: 20px;
         color: #333;
     }

     .promo-new-blocks {
         display: flex;
         justify-content: center;
         gap: 20px;
     }

     .promo-new-block {
         width: 30%;
         text-align: center;
         background-color: white;
         padding: 20px;
         border-radius: 20px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .promo-new-icon {
         width: 150px;
         height: 150px;
         margin-bottom: 10px;
         border-radius: 20px;
         border: 2px solid #007BFF;
         margin: 10%;
     }

     .banner-section {
         width: 100%;
         height: 50vh;
         /* Cała wysokość ekranu */
         background: url('/img/o-nas-main-banner.jpg') no-repeat center center/cover;
         /* Obraz w tle */
         display: flex;
         justify-content: center;
         /* Wyśrodkowanie w poziomie */
         align-items: center;
         /* Wyśrodkowanie w pionie */
         text-align: center;
     }

     .banner-section h1 {
         font-size: 35px;
         color: white;
         /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); */
         /* Subtelny cień dla tekstu */
     }


     .two-column-section {
         /* width: 100%; */
         /* height: 100%; */
         /* Cała wysokość ekranu */
         display: flex;
         justify-content: center;
         align-items: center;
         background-color: #f9f9f9;
         /* Jasne tło */
         box-sizing: border-box;

     }

     .two-column-box {
         width: 90%;
         height: 100%;
         ;
         /* Szerokość boxa */
         display: flex;
         flex-direction: column;
         gap: 10px;
         background-color: white;
         padding: 10px;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         /* justify-content: center; */
         align-items: center;

     }



     .left-column {
         /* flex: 1; */
         width: 100%;
         display: flex;
         flex-direction: column;
         /* justify-content: center; */
     }

     .left-column h2 {
         font-size: 36px;
         margin-bottom: 20px;
         color: #333;
     }

     .left-column p {

         font-size: 16px;
         margin-bottom: 15px;
         color: #555;
         line-height: 1.5;
     }

     .learn-more-button {
         padding: 10px 20px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
         align-self: flex-start;
     }

     .learn-more-button:hover {
         background-color: #67aaea;
     }

     .right-column {
         flex: 1;
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .right-column img {
         max-width: 100%;
         max-height: 80%;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }


     .full-screen-section {
         width: 100%;
         height: 100%;
         /* Cała wysokość ekranu */
         background: url('/img/o-nas-banner-2.jpg') no-repeat center center/cover;
         /* Obraz w tle */
         display: flex;
         justify-content: center;
         /* Wyśrodkowanie w poziomie */
         align-items: center;
         /* Wyśrodkowanie w pionie */
         position: relative;
         padding: 10px;
     }




     .overlay-box {
         display: flex;
         /* Ustawienie Flexbox */
         flex-direction: column;
         /* Ustawienie elementów w kolumnie */
         justify-content: center;
         /* Wyśrodkowanie w pionie */
         align-items: center;
         /* Wyśrodkowanie w poziomie */
         margin: auto;
         background-color: rgba(255, 255, 255, 0.8);
         /* Półprzezroczyste tło */
         padding: 20px;
         /* Automatyczne wypełnienie */
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         text-align: left;
         width: 90%;
         /* Szerokość boxa */
         /* height: 90%; */
     }

     .overlay-box h2 {
         font-size: 25px;
         margin-bottom: 20px;
         color: #333;
     }

     .overlay-box p {
         font-size: 13px;
         margin-bottom: 15px;
         color: #555;
         line-height: 1.5;
     }



     .full-height-section {
         width: 100%;
         height: 100%vh;
         /* Cała wysokość ekranu */
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         background-color: #f9f9f9;
         /* Jasne tło */
         padding: 20px;
         box-sizing: border-box;
     }

     .full-height-section .section-title {
         font-size: 25px;
         margin-bottom: 20px;
         color: #333;
         text-align: center;
     }

     /* .full-height-section p {
        width: 80%;
        font-size: 16px;
        margin-bottom: 20px;
        color: #333;
        text-align: center;
    } */

     .three-column-layout {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         /* align-items: stretch; */
         /* Ustawia równą wysokość dla wszystkich kolumn */
         gap: 20px;
         width: 100%;
         /* Szerokość całej sekcji */
     }

     .column {
         flex: 1;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         text-align: center;
         /* gap: 15px; */
         background-color: white;
         /* Opcjonalne tło dla kolumn */
         padding: 20px;
         /* Opcjonalne wypełnienie */
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         /* Opcjonalny cień */
         border-radius: 10px;
         /* Opcjonalne zaokrąglenie rogów */
     }

     .column img {
         max-width: 100%;
         border-radius: 10px;
         /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
         margin-bottom: 10px;
     }

     .column p {
         font-size: 16px;
         color: #555;
         line-height: 1.5;
     }

     .full-height-section-p {
         width: 80%;
         font-size: 16px;
         margin-bottom: 20px;
         color: #333;
         text-align: center;
     }

     .column .learn-more-button {
         margin: 10px auto;
         width: 40%;
         padding: 15px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 15px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }



     .icon-section {
         width: 100%;
         margin: 40px auto;
         text-align: center;

     }

     .icon-section-title {
         font-size: 25px;
         margin-bottom: 20px;
         color: #333;
     }

     .icon-row {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         gap: 10px;
         margin-bottom: 20px;
     }

     .icon-box {
         flex: 1;
         background-color: white;
         padding: 10px;
         border-radius: 25px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         text-align: center;
         border: 2px solid #007BFF;
         /* Dodanie obramowania */
     }

     .icon-image {
         width: 100px;
         height: 100px;
         margin-bottom: 10px;
     }

     .icon-box h4 {
         font-size: 20px;
         margin-bottom: 10px;
         color: #67aaea;
     }

     .icon-box p {
         font-size: 16px;
         color: #555;
         line-height: 1.5;
     }

     .icon-section-main {
         background-color: rgb(237, 242, 252);
         padding: 40px;
     }




     .locations-section {
         width: 80%;

         margin: 40px auto;
         text-align: center;
     }

     .locations-title {
         font-size: 25px;
         margin-bottom: 30px;
         color: #333;
     }

     .locations-columns {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         gap: 20px;
         ;
     }

     .location-column {
         flex: 1;
         background-color: white;
         padding: 20px;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         text-align: left;
     }

     .location-column h3 {
         font-size: 24px;
         margin-bottom: 10px;
         color: #007BFF;
     }

     .location-column p {
         font-size: 16px;
         margin-bottom: 10px;
         color: #555;
         line-height: 1.5;
     }

     .location-column a {
         display: inline-block;
         margin-top: 10px;
         font-size: 16px;
         color: #007BFF;
         text-decoration: none;
         font-weight: bold;
     }

     .location-column a:hover {
         text-decoration: underline;
     }

     .location-column iframe {
         width: 95% !important;
     }
 }

 @media (min-width: 480px) {
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     html {
         scroll-behavior: smooth;
         /* Płynne przewijanie */
     }

     body {
         /* font-family: Arial, sans-serif; */
         font-family: 'Open Sans', sans-serif;
     }

     .main-container {
         width: 100%;
     }

     .header {
         position: fixed;
         top: 0px;
         left: 0;
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: space-between;
         background-color: rgba(255, 255, 255, 1);
         padding: 0px 20px;
         z-index: 1000;
     }

     .header .logo {
         font-size: 24px;
         font-weight: bold;
     }

     .header .logo img {
         height: 75px;
         /* Ustaw wysokość logo */
     }

     .header .menu {
         display: flex;
         justify-content: center;
         /* Wyśrodkowanie linków w poziomie */
         gap: 5px;
         flex: 1;
         /* Dodanie elastyczności, aby menu zajmowało dostępne miejsce */
     }

     .header .menu a {
         text-decoration: none;
         color: #333;
         font-weight: bold;
         padding: 5px 10px;
         border-radius: 5px;
         font-size: 12px;
         /* Dodanie zaokrąglenia */
         transition: background-color 0.3s ease;
         /* Płynne przejście koloru */
     }

     .header .menu a:hover {
         background-color: rgba(0, 0, 0, 0.1);
         /* Kolor tła przy najechaniu */
     }

     .header .menu a.active {
         background-color: #67aaea;
         /* Kolor tła dla aktywnej opcji */
         color: white;
         /* Kolor tekstu dla aktywnej opcji */
     }

     .hero-section {
         position: relative;
         width: 100%;
         height: 100vh;
         background: url('/img/wspolpraca-banner.jpg') no-repeat center center/cover;
     }

     /* .hero-overlay {
            position: absolute;
            top: 0;
            left: 15%;
            width: 30%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
        } */

     .hero-overlay {
         position: absolute;
         top: 30%;
         left: 0%;
         width: 100%;
         height: 40%;
         /* background: linear-gradient(to right, rgba(128, 128, 128, 0.5), rgba(0, 123, 255, 0.5));  */
         background-color: rgba(7, 79, 154, 0.5);
         color: white;
         display: flex;
         flex-direction: column;
         justify-content: center;
         /* align-items: center; */
         /* align-items: flex-start; */
         padding: 0px;
         /* overflow: hidden; */
     }



     .hero-overlay h1,
     .hero-overlay-outside {
         margin-bottom: 10px;
         font-size: 50px;
         text-align: center;
         color: white;
     }

     .hero-overlay-outside {
         margin-top: 4%;
         font-size: 60px;
         font-weight: 700;
         text-align: center;
         color: white;
     }

     .hero-overlay p {
         font-size: 28px;
         text-align: center;
     }

     .info-section {
         background-color: white;
         padding: 40px 20px;
         text-align: center;
         margin: 0 10%;
     }

     .info-title {
         font-size: 50px;
         margin-bottom: 30px;
         color: #333;
     }

     .info-columns {
         display: flex;
         justify-content: space-between;
         justify-content: space-around;
         gap: 20px;
         flex-wrap: wrap;
         /* Zapewnia responsywność */
     }

     .info-column {
         flex: 1;
         max-width: 30%;
         /* Każda kolumna zajmuje maksymalnie 30% szerokości */
         text-align: center;
         padding: 20px;
         box-sizing: border-box;
     }

     .info-icon {
         width: 150px;
         /* Ustaw szerokość ikony */
         height: 150px;
         /* Ustaw wysokość ikony */
         margin-bottom: 15px;
     }

     .info-column h2 {
         font-size: 50px;
         margin-bottom: 10px;
         color: black;
     }

     .info-column h4 {
         font-size: 18px;
         margin-bottom: 30px;
         color: black
     }

     .info-column p {
         font-size: 16px;
         color: #666;
         line-height: 1.5;
     }

     .two-column-section {
         margin: 0;
         background-color: white;
         padding: 40px 20px;
         display: flex;

         justify-content: space-between;
         justify-content: space-around;
         gap: 10px;
         flex-wrap: wrap;
         /* Zapewnia responsywność */
     }

     .left-column,
     .right-column {
         flex: 1;
         /* max-width: 40%; */
         /* Każda kolumna zajmuje maksymalnie 45% szerokości */
         box-sizing: border-box;
     }

     .left-column h2 {
         font-size: 30px;
         margin-bottom: 15px;
         color: black
     }

     .left-column p {
         font-size: 16px;
         margin-bottom: 20px;
         color: #333;
     }

     .more-button {
         padding: 10px 20px;
         background-color: white;
         color: black;
         border: 2px solid #007BFF;
         border-radius: 20px;
         font-size: 16px;
         font-weight: bold;
         cursor: pointer;
         transition: background-color 0.3s ease;
         margin-top: auto;
         margin: 15px;
     }

     .more-button-wspolpraca {
         position: absolute;
         /* Pozycjonowanie absolutne */
         bottom: 10px;
         /* Odstęp 10px od dołu */
         left: 50%;
         /* Wyśrodkowanie przycisku */
         transform: translateX(-50%);
         /* Przesunięcie o 50% szerokości przycisku, aby był wyśrodkowany */
     }



     .more-button-b2b {
         color: #FFF;
         background-color: #67aaea;
         height: 100%;
         font-weight: 500;
         font-size: 18px;
         padding: 10px;
         border: 2px solid #007BFF;
         border-radius: 20px;
         height: 60px;

     }

     .more-button-b2b:hover {
         background-color: #FFF;
         color: black;
     }


     .more-button:hover {
         background-color: #67aaea;
         color: white;
     }

     .right-column p {
         font-size: 16px;
         margin-bottom: 15px;
         color: #555;
         line-height: 1.5;
     }



     .layered-section {
         background-color: rgb(237, 242, 252);
         /* Błękitne tło */
         height: 1000px;
         /* Wysokość sekcji */
         position: relative;
         overflow: hidden;
         /* Ukrywa elementy wychodzące poza sekcję */
     }

     .background-layer {
         position: relative;
         height: 100%;
         /* Dopasowanie wysokości do sekcji nadrzędnej */
         text-align: center;
         /* Wyśrodkowanie tekstu */
     }

     .background-layer h2 {
         font-size: 50px;
         color: black;
         margin: 0;
         line-height: 100px;
         /* Wyśrodkowanie w pionie */
     }

     .background-image {
         position: absolute;
         /* Pozycjonowanie obrazu */
         bottom: 0;
         /* Przylega do dolnej krawędzi */
         right: 0;
         /* Przylega do prawej krawędzi */
         width: 80%;
         /* Szerokość obrazu */
         height: 80%;
         /* Wysokość obrazu */
         object-fit: cover;
         /* Dopasowanie obrazu */
     }

     .foreground-layer {
         position: absolute;
         bottom: 10px;
         /* Przylega do dolnej krawędzi */
         left: 200px;
         /* Odstęp od lewej krawędzi */
         background-color: white;
         padding: 40px;
         width: 40%;
         height: 40%;
         /* Szerokość sekcji */
         border-radius: 10px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         /* Subtelny cień */
         z-index: 2;
         /* Wyższy z-index, aby nachodziła na obraz */
     }

     .foreground-layer h2 {
         font-size: 50px;
         color: black;
         /* Kolor tekstu */
     }

     .foreground-layer h2,
     .foreground-layer p {
         margin: 20px;
         /* Odstępy między elementami */
         color: #333;
         /* Kolor tekstu */
     }

     .foreground-layer h2 {
         font-size: 50px;
         color: black;
         /* Kolor tekstu */
     }

     #b2b,
     #home,
     #cooperation {
         position: relative;
     }

     #b2b:before,
     #home:before,
     #cooperation:before {
         content: '';
         display: block;
         height: 100px;
         /* Wysokość odstępu */
         margin-top: 0px;
         /* Przesunięcie sekcji w górę */
     }


     .icons-section {
         background-color: #f9f9f9;
         /* Jasne tło */
         padding: 40px 20px;
         text-align: center;
     }

     .icons-section h2 {
         font-size: 50px;
         color: black;
         margin-bottom: 20px;
     }

     .icons-container {
         display: grid;
         grid-template-columns: repeat(4, 200px);
         /* 4 kolumny o szerokości 200px */
         justify-content: center;
         /* Wyśrodkowanie całej siatki */
         gap: 20px;
         /* Odstępy między boxami */
         margin: 10px;
     }

     .icon {
         width: 200px;
         /* Szerokość boxa */
         height: 200px;
         /* Wysokość boxa */
         display: flex;
         justify-content: center;
         align-items: center;
         background-color: white;
         border-radius: 10px;
         /* Zaokrąglenie rogów */
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         /* Subtelny cień */
     }

     .icon img {
         max-width: 80%;
         /* Dopasowanie obrazu do kontenera */
         max-height: 80%;
     }




     .contact-section {
         height: 100vh;
         ;
         position: relative;
         background: url('/img/baner-formularz.jpg') no-repeat center center/cover;
         /* Obraz w tle */
         padding: 0 20px;
         /* Usuń górny i dolny padding */
         color: white;
         text-align: center;
         display: flex;
         /* Użycie Flexbox */
         flex-direction: column;
         /* Ustawienie elementów w kolumnie */
         justify-content: center;
         /* Wyśrodkowanie w pionie */
         align-items: center;
         /* Wyśrodkowanie w poziomie */
     }

     .contact-section h2 {
         font-size: 50px;
         margin-bottom: 20px;
         color: #fff;
     }

     .contact-form {
         background-color: rgba(255, 255, 255, 0.5);
         /* Półprzezroczyste tło */
         padding: 20px;
         border-radius: 15px;
         min-width: 900px;
         max-width: 1400px;
         margin: 0 auto;
         color: #333;
     }

     .form-row {
         display: flex;
         justify-content: space-between;
         gap: 20px;
         margin-bottom: 15px;
     }

     .form-row input,
     .form-row select,
     .form-row textarea {
         flex: 1;
         padding: 10px;
         border: 1px solid #ccc;
         border-radius: 15px;
         font-size: 16px;
         background-color: rgba(255, 255, 255, 0.5);
         /* Półprzezroczyste tło */
         color: #333;
         /* Kolor tekstu */
     }

     textarea {
         resize: none;
         background-color: rgba(255, 255, 255, 0.5);
     }

     button {
         padding: 10px 20px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }

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



     .footer {
         background-color: #fff;
         /* Białe tło */
         padding: 40px 20px;
         width: 100%;
         box-sizing: border-box;
     }

     .footer-content {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         align-items: flex-start;
         gap: 20px;
     }

     .footer-left {
         width: 60%;
         /* Lewa strona zajmuje 60% szerokości */
         padding-left: 10%;
         /* Odsunięcie od lewej krawędzi */
     }

     .footer-logo {
         margin-bottom: 20px;
     }

     .footer-row {
         display: flex;
         justify-content: space-between;
         gap: 20px;
         margin-bottom: 20px;
     }

     .footer-row a {
         text-decoration: none;
         color: grey;
         /* Kolor linków */
         font-weight: bold;
     }

     .footer a:hover {
         text-decoration: underline;
         color: rgb(56, 56, 56);
     }

     .footer-column {
         flex: 1;
     }

     .footer-column h3 {
         font-size: 18px;
         margin-bottom: 10px;
         color: black
     }

     .footer-column p {
         font-size: 14px;
         color: #333;
         line-height: 1.5;
     }

     .footer-contact {
         margin-top: 20px;
         font-size: 14px;
         color: #333;
         width: 300px;
         background-color: rgb(237, 242, 252);
         padding: 30px;
         border-radius: 15px;
     }


     .footer-right {
         margin-right: 0px;
         width: 100%;
         /* Prawa strona zajmuje 50% szerokości */
     }

     .footer-right iframe {
         width: 100%;
         /* Szerokość mapy */
         height: 600px;
         /* Wysokość mapy */
         border: none;
         /* Brak obramowania */
         border-radius: 10px;
         /* Zaokrąglenie rogów */
     }

     .footer-bottom {
         text-align: center;
         margin-top: 20px;
     }

     .footer-bottom p {
         font-size: 14px;
         color: #666;
     }

     .footer-bottom hr {
         margin: 10px 0;
         border: none;
         border-top: 1px solid #ccc;
     }

     .full-width-section {
         width: 100%;
         /* Na całą szerokość */
         background-color: #f9f9f9;
         /* Jasne tło */
         padding: 40px 20px;
         text-align: center;
     }

     .section-title {

         font-size: 50px;
         margin-bottom: 60px;
         color: #333;
     }

     .service-container {
         display: flex;
         width: 80%;
         margin: auto;

         justify-content: space-around;
         /* Rozmieszczenie bloków */
         flex-wrap: wrap;
         /* Zapewnia zawijanie na mniejszych ekranach */
         gap: 20px;
     }


     .service-block {
         background-color: white;
         width: 22%;
         height: 450px;
         padding: 20px;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         /* Subtelny cień */
         position: relative;
         text-align: left;
     }



     .icon-container {
         position: absolute;
         top: -40px;
         /* Pozycjonowanie ikony */
         left: 50%;
         transform: translateX(-50%);
         width: 120px;
         height: 120px;
         /* background-color: #67aaea;s */
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .icon-container img {
         width: 100%;
         /* Dopasowanie ikony */
         height: 100%;
     }

     .service-block h3 {
         margin-top: 70px;
         /* Odstęp od ikony */
         font-size: 24px;
         font-weight: 400;
         color: #333;
     }

     .service-block ul {
         /* list-style: none; */
         padding: 0;
         margin-top: 15px;
     }

     .service-block ul li {
         font-size: 16px;
         color: #000;
         margin: 15px;
         margin-bottom: 10px;
         /* margin: 10px; */
     }


     .promo-section {
         background-color: white;
         /* Białe tło */
         /* height: 100vh; */
         padding: 40px 20px;
         box-sizing: border-box;
         text-align: center;
     }

     .promo-bar {
         position: relative;
         background-color: rgb(191, 182, 176);
         /* Szary pasek */
         height: 100px;
         margin: 0 auto 40px;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
     }

     .promo-icon {
         position: absolute;
         top: -10%;
         transform: translateY(-50%);
         left: 50%;
         /* Możesz dostosować pozycję */
         width: 80px;
         height: 80px;
         background-color: white;
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .promo-icon img {
         width: 100%;
         height: 100%;
     }

     .promo-text {
         font-size: 26px;
         color: white;
         margin-left: 100px;
         /* Odstęp od ikony */
     }

     .promo-blocks {
         display: flex;
         width: 80%;
         margin: auto;
         justify-content: space-around;
         flex-wrap: wrap;
         gap: 20px;
         margin-bottom: 40px;
     }

     .promo-block {
         background-color: white;
         width: 22%;
         padding: 20px;
         border-radius: 10px;
         /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
         text-align: center;
     }

     .promo-block-icon {
         width: 200px;
         height: 200px;
         margin: 0 auto 20px;
         /* background-color: #67aaea; */
         border: 2px solid #007BFF;
         border-radius: 10px;
         display: flex;
         justify-content: center;
         align-items: center;
         /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
     }

     .promo-block-icon img {
         width: 100%;
         height: 100%;

     }

     .promo-block p {
         font-size: 20px;
         color: #000
     }

     .promo-footer {
         margin-top: 20px;
         width: 80%;
         margin: auto;
     }


     .promo-button {
         padding: 10px 20px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }

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

     .promo-footer p {
         font-size: 20px;
         /* color: #666; */
         margin-top: 10px;
         text-align: left;
         line-height: 1.5;
     }

     .promo-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         /* 3 kolumny */
         grid-template-rows: repeat(2, 1fr);
         /* 2 rzędy */
         gap: 20px;
         /* Odstępy między blokami */
         margin: 40px auto;
         height: 50vh;
         ;
         width: 80%;
         /* Szerokość siatki */

     }

     .promo-item {
         background-color: rgb(237, 242, 252);
         /* background-color: #f9f9f9; */
         border: 1px solid #ddd;
         border-radius: 10px;
         padding: 20px;
         text-align: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         font-weight: 400;
         font-size: 20px;
     }

     .promo-item:not(.promo-item-4) {
         display: flex;
         /* Ustawienie Flexboxa */
         justify-content: center;
         /* Wyśrodkowanie w poziomie */
         align-items: center;
         /* Wyśrodkowanie w pionie */

         display: flex;
         /* Ustawienie Flexboxa */
         justify-content: center;
         /* Wyśrodkowanie w poziomie */
         align-items: center;
         /* Wyśrodkowanie w pionie */
         background-color: rgb(237, 242, 252);
         border: 1px solid #ddd;
         border-radius: 10px;
         padding: 20px;
         text-align: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .promo-item-1 {
         grid-column: 1 / 2;
         /* Kolumna 1 */
         grid-row: 1 / 2;
         /* Rząd 1 */
     }

     .promo-item-2 {
         grid-column: 2 / 3;
         /* Kolumna 2 */
         grid-row: 1 / 2;
         /* Rząd 1 */
     }

     .promo-item-3 {
         grid-column: 3 / 4;
         /* Kolumna 3 */
         grid-row: 1 / 3;
         /* Rząd 1 i 2 */
     }

     .promo-item-4 {
         grid-column: 1 / 3;
         /* Kolumna 1 i 2 */
         grid-row: 2 / 3;
         /* Rząd 2 */
     }

     .promo-item-4 p {
         text-align: left;
     }

     .courier-logos {
         display: flex;
         flex-direction: row;
     }

     .courier-logos img {
         max-height: 55px;
         margin: 10px;
     }


     .promo-content {
         width: 80%;
         margin: 40px auto;
         text-align: center;

     }

     .promo-paragraph {
         font-size: 16px;
         color: #333;
         margin-bottom: 20px;
         line-height: 1.5;
         text-align: left;
     }

     .promo-row {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 20px;
         gap: 20px;
     }

     .promo-row-footer {
         background-color: rgb(237, 242, 252);
         justify-content: space-between;
     }

     .promo-row-footer p {
         padding: 20px;
         font-size: 20px;
         color: #333;
         margin-top: 10px;
         text-align: left;
         line-height: 1.5;
     }

     .promo-column {
         flex: 1;
         text-align: left;
     }

     .promo-column img {
         width: 100%;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .promo-button {
         padding: 10px 20px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }

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


     .serwis-content {
         width: 80%;
         margin: 40px auto;
         text-align: center;
         /* border: 2px solid; */
         /* border-image: linear-gradient(to bottom, blue, green) 1; */
         padding: 20px;
         border-radius: 10px;
     }

     .promo-boxes {
         display: flex;
         width: 80%;
         margin: auto;
         justify-content: space-between;
         gap: 20px;
         margin-top: 20px;
     }

     .promo-box {
         position: relative;
         flex: 1;
         padding: 20px;
         width: 100%;
         text-align: center;
         background-color: white;
         /* Wewnętrzne tło boxa */
         border-radius: 50px;
         /* Zaokrąglone rogi */
         box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

         overflow: hidden;
         /* Ukrywa nadmiar pseudo-elementu */
         z-index: 1;
         /* Ustawia zawartość nad pseudo-elementem */
     }



     .promo-box h3 {
         font-size: 24px;
         margin-bottom: 10px;
         color: #000;
     }

     .promo-box p {
         font-size: 16px;
         margin-bottom: 10px;
         color: #000;
         line-height: 1.5;
     }

     .promo-box ul li {
         font-size: 16px;
         margin-bottom: 10px;
         color: #000;
         line-height: 1.5;
         justify-content: left;
     }

     /* .promo-box button {
            padding: 10px 20px;
            background-color: #67aaea;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        } */

     .promo-box button:hover {
         background-color: #0056b3;
     }


     .promo-new-section {
         width: 80%;
         margin: 40px auto;
         text-align: center;
         background-color: rgb(237, 242, 252);
         padding: 50px;
     }

     .promo-new-paragraph {
         font-size: 18px;
         margin-bottom: 20px;
         color: #333;
     }

     .promo-new-blocks {
         display: flex;
         justify-content: center;
         gap: 20px;
     }

     .promo-new-block {
         width: 30%;
         text-align: center;
         background-color: white;
         padding: 20px;
         border-radius: 20px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .promo-new-icon {
         width: 150px;
         height: 150px;
         margin-bottom: 10px;
         border-radius: 20px;
         border: 2px solid #007BFF;
         margin: 10%;
     }

     .banner-section {
         width: 100%;
         height: 50vh;
         /* Cała wysokość ekranu */
         background: url('/img/o-nas-main-banner.jpg') no-repeat center center/cover;
         /* Obraz w tle */
         display: flex;
         justify-content: center;
         /* Wyśrodkowanie w poziomie */
         align-items: center;
         /* Wyśrodkowanie w pionie */
         text-align: center;
     }

     .banner-section h1 {
         font-size: 45px;
         color: white;
         /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); */
         /* Subtelny cień dla tekstu */
     }


     .two-column-section {
         /* width: 100%; */
         height: 100%;
         /* Cała wysokość ekranu */
         display: flex;
         justify-content: center;
         align-items: center;
         background-color: #f9f9f9;
         /* Jasne tło */
         box-sizing: border-box;

     }

     .two-column-box {
         width: 80%;
         /* Szerokość boxa */
         display: flex;
         gap: 10px;
         background-color: white;
         padding: 10px;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         /* justify-content: center; */
         align-items: center;
         flex-direction: column;


     }

     .left-column {
         /* flex: 1; */
         width: 100%;
         display: flex;
         flex-direction: column;
         /* justify-content: center; */
     }

     .left-column h2 {
         font-size: 36px;
         margin-bottom: 20px;
         color: #333;
     }

     .left-column p {

         font-size: 16px;
         margin-bottom: 15px;
         color: #555;
         line-height: 1.5;
     }

     .learn-more-button {
         padding: 10px 20px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
         align-self: flex-start;
     }

     .learn-more-button:hover {
         background-color: #67aaea;
     }

     .right-column {
         flex: 1;
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .right-column img {
         max-width: 100%;
         max-height: 80%;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }


     .full-screen-section {
         width: 100%;
         height: 80vh;
         /* Cała wysokość ekranu */
         background: url('/img/o-nas-banner-2.jpg') no-repeat center center/cover;
         /* Obraz w tle */
         display: flex;
         justify-content: center;
         /* Wyśrodkowanie w poziomie */
         align-items: center;
         /* Wyśrodkowanie w pionie */
         position: relative;
     }




     .overlay-box {
         display: flex;
         /* Ustawienie Flexbox */
         flex-direction: column;
         /* Ustawienie elementów w kolumnie */
         justify-content: center;
         /* Wyśrodkowanie w pionie */
         align-items: center;
         /* Wyśrodkowanie w poziomie */
         margin: auto;
         background-color: rgba(255, 255, 255, 0.8);
         /* Półprzezroczyste tło */
         padding: 20px;
         /* Automatyczne wypełnienie */
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         text-align: left;
         width: 90%;
         /* Szerokość boxa */
         height: 90%;
     }

     .overlay-box h2 {
         font-size: 36px;
         margin-bottom: 20px;
         color: #333;
     }

     .overlay-box p {
         font-size: 16px;
         margin-bottom: 15px;
         color: #555;
         line-height: 1.5;
     }



     .full-height-section {
         width: 100%;
         height: 100%vh;
         /* Cała wysokość ekranu */
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         background-color: #f9f9f9;
         /* Jasne tło */
         padding: 20px;
         box-sizing: border-box;
     }

     .full-height-section .section-title {
         font-size: 35px;
         margin-bottom: 20px;
         color: #333;
         text-align: center;
     }

     /* .full-height-section p {
        width: 80%;
        font-size: 16px;
        margin-bottom: 20px;
        color: #333;
        text-align: center;
    } */

     .three-column-layout {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         /* align-items: stretch; */
         /* Ustawia równą wysokość dla wszystkich kolumn */
         gap: 20px;
         width: 100%;
         /* Szerokość całej sekcji */
     }

     .column {
         flex: 1;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         text-align: center;
         /* gap: 15px; */
         background-color: white;
         /* Opcjonalne tło dla kolumn */
         padding: 20px;
         /* Opcjonalne wypełnienie */
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         /* Opcjonalny cień */
         border-radius: 10px;
         /* Opcjonalne zaokrąglenie rogów */
     }

     .column img {
         max-width: 100%;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .column p {
         font-size: 16px;
         color: #555;
         line-height: 1.5;
     }

     .full-height-section-p {
         width: 80%;
         font-size: 16px;
         margin-bottom: 20px;
         color: #333;
         text-align: center;
     }

     .column .learn-more-button {
         margin: 10px auto;
         width: 40%;
         padding: 15px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 15px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }



     .icon-section {
         width: 100%;
         margin: 40px auto;
         text-align: center;

     }

     .icon-section-title {
         font-size: 36px;
         margin-bottom: 20px;
         color: #333;
     }

     .icon-row {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         gap: 10px;
         margin-bottom: 20px;
     }

     .icon-box {
         flex: 1;
         background-color: white;
         padding: 10px;
         border-radius: 25px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         text-align: center;
         border: 2px solid #007BFF;
         /* Dodanie obramowania */
     }

     .icon-image {
         width: 100px;
         height: 100px;
         margin-bottom: 10px;
     }

     .icon-box h4 {
         font-size: 20px;
         margin-bottom: 10px;
         color: #67aaea;
     }

     .icon-box p {
         font-size: 16px;
         color: #555;
         line-height: 1.5;
     }

     .icon-section-main {
         background-color: rgb(237, 242, 252);
         padding: 40px;
     }




     .locations-section {
         width: 80%;

         margin: 40px auto;
         text-align: center;
     }

     .locations-title {
         font-size: 36px;
         margin-bottom: 30px;
         color: #333;
     }

     .locations-columns {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         gap: 20px;
         ;
     }

     .location-column {
         flex: 1;
         background-color: white;
         padding: 20px;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         text-align: left;
     }

     .location-column h3 {
         font-size: 24px;
         margin-bottom: 10px;
         color: #007BFF;
     }

     .location-column p {
         font-size: 16px;
         margin-bottom: 10px;
         color: #555;
         line-height: 1.5;
     }

     .location-column a {
         display: inline-block;
         margin-top: 10px;
         font-size: 16px;
         color: #007BFF;
         text-decoration: none;
         font-weight: bold;
     }

     .location-column a:hover {
         text-decoration: underline;
     }

     .location-column iframe {
         width: 95% !important;
     }
 }

 @media (min-width: 620px) {
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     html {
         scroll-behavior: smooth;
         /* Płynne przewijanie */
     }

     body {
         /* font-family: Arial, sans-serif; */
         font-family: 'Open Sans', sans-serif;
     }

     .main-container {
         width: 100%;
     }

     .header {
         position: fixed;
         top: 0px;
         left: 0;
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: space-between;
         background-color: rgba(255, 255, 255, 1);
         padding: 0px 20px;
         z-index: 1000;
     }

     .header .logo {
         font-size: 24px;
         font-weight: bold;
     }

     .header .logo img {
         height: 75px;
         /* Ustaw wysokość logo */
     }

     .header .menu {
         display: flex;
         justify-content: center;
         /* Wyśrodkowanie linków w poziomie */
         gap: 5px;
         flex: 1;
         /* Dodanie elastyczności, aby menu zajmowało dostępne miejsce */
     }

     .header .menu a {
         text-decoration: none;
         color: #333;
         font-weight: bold;
         padding: 5px 10px;
         border-radius: 5px;
         font-size: 12px;
         /* Dodanie zaokrąglenia */
         transition: background-color 0.3s ease;
         /* Płynne przejście koloru */
     }

     .header .menu a:hover {
         background-color: rgba(0, 0, 0, 0.1);
         /* Kolor tła przy najechaniu */
     }

     .header .menu a.active {
         background-color: #67aaea;
         /* Kolor tła dla aktywnej opcji */
         color: white;
         /* Kolor tekstu dla aktywnej opcji */
     }

     .hero-section {
         position: relative;
         width: 100%;
         height: 100vh;
         background: url('/img/wspolpraca-banner.jpg') no-repeat center center/cover;
     }

     /* .hero-overlay {
            position: absolute;
            top: 0;
            left: 15%;
            width: 30%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
        } */

     .hero-overlay {
         position: absolute;
         top: 30%;
         left: 0%;
         width: 100%;
         height: 40%;
         /* background: linear-gradient(to right, rgba(128, 128, 128, 0.5), rgba(0, 123, 255, 0.5));  */
         background-color: rgba(7, 79, 154, 0.5);
         color: white;
         display: flex;
         flex-direction: column;
         justify-content: center;
         /* align-items: center; */
         /* align-items: flex-start; */
         padding: 0px;
         /* overflow: hidden; */
     }



     .hero-overlay h1,
     .hero-overlay-outside {
         margin-bottom: 10px;
         font-size: 50px;
         text-align: center;
         color: white;
     }

     .hero-overlay-outside {
         margin-top: 4%;
         font-size: 60px;
         font-weight: 700;
         text-align: center;
         color: white;
     }

     .hero-overlay p {
         font-size: 28px;
         text-align: center;
     }

     .info-section {
         background-color: white;
         padding: 40px 20px;
         text-align: center;
         margin: 0 10%;
     }

     .info-title {
         font-size: 50px;
         margin-bottom: 30px;
         color: #333;
     }

     .info-columns {
         display: flex;
         justify-content: space-between;
         justify-content: space-around;
         gap: 20px;
         flex-wrap: wrap;
         /* Zapewnia responsywność */
     }

     .info-column {
         flex: 1;
         max-width: 30%;
         /* Każda kolumna zajmuje maksymalnie 30% szerokości */
         text-align: center;
         padding: 20px;
         box-sizing: border-box;
     }

     .info-icon {
         width: 150px;
         /* Ustaw szerokość ikony */
         height: 150px;
         /* Ustaw wysokość ikony */
         margin-bottom: 15px;
     }

     .info-column h2 {
         font-size: 50px;
         margin-bottom: 10px;
         color: black;
     }

     .info-column h4 {
         font-size: 18px;
         margin-bottom: 30px;
         color: black
     }

     .info-column p {
         font-size: 16px;
         color: #666;
         line-height: 1.5;
     }

     .two-column-section {
         margin: 0;
         background-color: white;
         padding: 40px 20px;
         display: flex;

         justify-content: space-between;
         justify-content: space-around;
         gap: 10px;
         flex-wrap: wrap;
         /* Zapewnia responsywność */
     }

     .left-column,
     .right-column {
         flex: 1;
         /* max-width: 40%; */
         /* Każda kolumna zajmuje maksymalnie 45% szerokości */
         box-sizing: border-box;
     }

     .left-column h2 {
         font-size: 30px;
         margin-bottom: 15px;
         color: black
     }

     .left-column p {
         font-size: 16px;
         margin-bottom: 20px;
         color: #333;
     }

     .more-button {
         padding: 10px 20px;
         background-color: white;
         color: black;
         border: 2px solid #007BFF;
         border-radius: 20px;
         font-size: 16px;
         font-weight: bold;
         cursor: pointer;
         transition: background-color 0.3s ease;
         margin-top: auto;
         margin: 20px;
     }

     .more-button-wspolpraca {
         position: absolute;
         /* Pozycjonowanie absolutne */
         bottom: 10px;
         /* Odstęp 10px od dołu */
         left: 50%;
         /* Wyśrodkowanie przycisku */
         transform: translateX(-50%);
         /* Przesunięcie o 50% szerokości przycisku, aby był wyśrodkowany */
     }



     .more-button-b2b {
         color: #FFF;
         background-color: #67aaea;
         height: 100%;
         font-weight: 500;
         font-size: 18px;
         padding: 10px;
         border: 2px solid #007BFF;
         border-radius: 20px;
         height: 60px;

     }

     .more-button-b2b:hover {
         background-color: #FFF;
         color: black;
     }


     .more-button:hover {
         background-color: #67aaea;
         color: white;
     }

     .right-column p {
         font-size: 16px;
         margin-bottom: 15px;
         color: #555;
         line-height: 1.5;
     }



     .layered-section {
         background-color: rgb(237, 242, 252);
         /* Błękitne tło */
         height: 1000px;
         /* Wysokość sekcji */
         position: relative;
         overflow: hidden;
         /* Ukrywa elementy wychodzące poza sekcję */
     }

     .background-layer {
         position: relative;
         height: 100%;
         /* Dopasowanie wysokości do sekcji nadrzędnej */
         text-align: center;
         /* Wyśrodkowanie tekstu */
     }

     .background-layer h2 {
         font-size: 50px;
         color: black;
         margin: 0;
         line-height: 100px;
         /* Wyśrodkowanie w pionie */
     }

     .background-image {
         position: absolute;
         /* Pozycjonowanie obrazu */
         bottom: 0;
         /* Przylega do dolnej krawędzi */
         right: 0;
         /* Przylega do prawej krawędzi */
         width: 80%;
         /* Szerokość obrazu */
         height: 80%;
         /* Wysokość obrazu */
         object-fit: cover;
         /* Dopasowanie obrazu */
     }

     .foreground-layer {
         position: absolute;
         bottom: 10px;
         /* Przylega do dolnej krawędzi */
         left: 200px;
         /* Odstęp od lewej krawędzi */
         background-color: white;
         padding: 40px;
         width: 40%;
         height: 40%;
         /* Szerokość sekcji */
         border-radius: 10px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         /* Subtelny cień */
         z-index: 2;
         /* Wyższy z-index, aby nachodziła na obraz */
     }

     .foreground-layer h2 {
         font-size: 50px;
         color: black;
         /* Kolor tekstu */
     }

     .foreground-layer h2,
     .foreground-layer p {
         margin: 20px;
         /* Odstępy między elementami */
         color: #333;
         /* Kolor tekstu */
     }

     .foreground-layer h2 {
         font-size: 50px;
         color: black;
         /* Kolor tekstu */
     }

     #b2b,
     #home,
     #cooperation {
         position: relative;
     }

     #b2b:before,
     #home:before,
     #cooperation:before {
         content: '';
         display: block;
         height: 100px;
         /* Wysokość odstępu */
         margin-top: 0px;
         /* Przesunięcie sekcji w górę */
     }


     .icons-section {
         background-color: #f9f9f9;
         /* Jasne tło */
         padding: 40px 20px;
         text-align: center;
     }

     .icons-section h2 {
         font-size: 50px;
         color: black;
         margin-bottom: 20px;
     }

     .icons-container {
         display: grid;
         grid-template-columns: repeat(4, 200px);
         /* 4 kolumny o szerokości 200px */
         justify-content: center;
         /* Wyśrodkowanie całej siatki */
         gap: 20px;
         /* Odstępy między boxami */
         margin: 10px;
     }

     .icon {
         width: 200px;
         /* Szerokość boxa */
         height: 200px;
         /* Wysokość boxa */
         display: flex;
         justify-content: center;
         align-items: center;
         background-color: white;
         border-radius: 10px;
         /* Zaokrąglenie rogów */
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         /* Subtelny cień */
     }

     .icon img {
         max-width: 80%;
         /* Dopasowanie obrazu do kontenera */
         max-height: 80%;
     }




     .contact-section {
         height: 100vh;
         ;
         position: relative;
         background: url('/img/baner-formularz.jpg') no-repeat center center/cover;
         /* Obraz w tle */
         padding: 0 20px;
         /* Usuń górny i dolny padding */
         color: white;
         text-align: center;
         display: flex;
         /* Użycie Flexbox */
         flex-direction: column;
         /* Ustawienie elementów w kolumnie */
         justify-content: center;
         /* Wyśrodkowanie w pionie */
         align-items: center;
         /* Wyśrodkowanie w poziomie */
     }

     .contact-section h2 {
         font-size: 50px;
         margin-bottom: 20px;
         color: #fff;
     }

     .contact-form {
         background-color: rgba(255, 255, 255, 0.5);
         /* Półprzezroczyste tło */
         padding: 20px;
         border-radius: 15px;
         min-width: 900px;
         max-width: 1400px;
         margin: 0 auto;
         color: #333;
     }

     .form-row {
         display: flex;
         justify-content: space-between;
         gap: 20px;
         margin-bottom: 15px;
     }

     .form-row input,
     .form-row select,
     .form-row textarea {
         flex: 1;
         padding: 10px;
         border: 1px solid #ccc;
         border-radius: 15px;
         font-size: 16px;
         background-color: rgba(255, 255, 255, 0.5);
         /* Półprzezroczyste tło */
         color: #333;
         /* Kolor tekstu */
     }

     textarea {
         resize: none;
         background-color: rgba(255, 255, 255, 0.5);
     }

     button {
         padding: 10px 20px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }

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



     .footer {
         background-color: #fff;
         /* Białe tło */
         padding: 40px 20px;
         width: 100%;
         box-sizing: border-box;
     }

     .footer-content {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         align-items: flex-start;
         gap: 20px;
     }

     .footer-left {
         width: 60%;
         /* Lewa strona zajmuje 60% szerokości */
         padding-left: 10%;
         /* Odsunięcie od lewej krawędzi */
     }

     .footer-logo {
         margin-bottom: 20px;
     }

     .footer-row {
         display: flex;
         justify-content: space-between;
         gap: 20px;
         margin-bottom: 20px;
     }

     .footer-row a {
         text-decoration: none;
         color: grey;
         /* Kolor linków */
         font-weight: bold;
     }

     .footer a:hover {
         text-decoration: underline;
         color: rgb(56, 56, 56);
     }

     .footer-column {
         flex: 1;
     }

     .footer-column h3 {
         font-size: 18px;
         margin-bottom: 10px;
         color: black
     }

     .footer-column p {
         font-size: 14px;
         color: #333;
         line-height: 1.5;
     }

     .footer-contact {
         margin-top: 20px;
         font-size: 14px;
         color: #333;
         width: 300px;
         background-color: rgb(237, 242, 252);
         padding: 30px;
         border-radius: 15px;
     }


     .footer-right {
         margin-right: 0px;
         width: 100%;
         /* Prawa strona zajmuje 50% szerokości */
     }

     .footer-right iframe {
         width: 100%;
         /* Szerokość mapy */
         height: 600px;
         /* Wysokość mapy */
         border: none;
         /* Brak obramowania */
         border-radius: 10px;
         /* Zaokrąglenie rogów */
     }

     .footer-bottom {
         text-align: center;
         margin-top: 20px;
     }

     .footer-bottom p {
         font-size: 14px;
         color: #666;
     }

     .footer-bottom hr {
         margin: 10px 0;
         border: none;
         border-top: 1px solid #ccc;
     }

     .full-width-section {
         width: 100%;
         /* Na całą szerokość */
         background-color: #f9f9f9;
         /* Jasne tło */
         padding: 40px 20px;
         text-align: center;
     }

     .section-title {

         font-size: 50px;
         margin-bottom: 60px;
         color: #333;
     }

     .service-container {
         display: flex;
         width: 80%;
         margin: auto;

         justify-content: space-around;
         /* Rozmieszczenie bloków */
         flex-wrap: wrap;
         /* Zapewnia zawijanie na mniejszych ekranach */
         gap: 20px;
     }


     .service-block {
         background-color: white;
         width: 22%;
         height: 450px;
         padding: 20px;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         /* Subtelny cień */
         position: relative;
         text-align: left;
     }



     .icon-container {
         position: absolute;
         top: -40px;
         /* Pozycjonowanie ikony */
         left: 50%;
         transform: translateX(-50%);
         width: 120px;
         height: 120px;
         /* background-color: #67aaea;s */
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .icon-container img {
         width: 100%;
         /* Dopasowanie ikony */
         height: 100%;
     }

     .service-block h3 {
         margin-top: 70px;
         /* Odstęp od ikony */
         font-size: 24px;
         font-weight: 400;
         color: #333;
     }

     .service-block ul {
         /* list-style: none; */
         padding: 0;
         margin-top: 15px;
     }

     .service-block ul li {
         font-size: 16px;
         color: #000;
         margin: 15px;
         margin-bottom: 10px;
         /* margin: 10px; */
     }


     .promo-section {
         background-color: white;
         /* Białe tło */
         /* height: 100vh; */
         padding: 40px 20px;
         box-sizing: border-box;
         text-align: center;
     }

     .promo-bar {
         position: relative;
         background-color: rgb(191, 182, 176);
         /* Szary pasek */
         height: 100px;
         margin: 0 auto 40px;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
     }

     .promo-icon {
         position: absolute;
         top: -10%;
         transform: translateY(-50%);
         left: 50%;
         /* Możesz dostosować pozycję */
         width: 80px;
         height: 80px;
         background-color: white;
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .promo-icon img {
         width: 100%;
         height: 100%;
     }

     .promo-text {
         font-size: 26px;
         color: white;
         margin-left: 100px;
         /* Odstęp od ikony */
     }

     .promo-blocks {
         display: flex;
         width: 80%;
         margin: auto;
         justify-content: space-around;
         flex-wrap: wrap;
         gap: 20px;
         margin-bottom: 40px;
     }

     .promo-block {
         background-color: white;
         width: 22%;
         padding: 20px;
         border-radius: 10px;
         /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
         text-align: center;
     }

     .promo-block-icon {
         width: 200px;
         height: 200px;
         margin: 0 auto 20px;
         /* background-color: #67aaea; */
         border: 2px solid #007BFF;
         border-radius: 10px;
         display: flex;
         justify-content: center;
         align-items: center;
         /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
     }

     .promo-block-icon img {
         width: 100%;
         height: 100%;

     }

     .promo-block p {
         font-size: 20px;
         color: #000
     }

     .promo-footer {
         margin-top: 20px;
         width: 80%;
         margin: auto;
     }


     .promo-button {
         padding: 10px 20px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }

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

     .promo-footer p {
         font-size: 20px;
         /* color: #666; */
         margin-top: 10px;
         text-align: left;
         line-height: 1.5;
     }

     .promo-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         /* 3 kolumny */
         grid-template-rows: repeat(2, 1fr);
         /* 2 rzędy */
         gap: 20px;
         /* Odstępy między blokami */
         margin: 40px auto;
         height: 50vh;
         ;
         width: 80%;
         /* Szerokość siatki */

     }

     .promo-item {
         background-color: rgb(237, 242, 252);
         /* background-color: #f9f9f9; */
         border: 1px solid #ddd;
         border-radius: 10px;
         padding: 20px;
         text-align: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         font-weight: 400;
         font-size: 20px;
     }

     .promo-item:not(.promo-item-4) {
         display: flex;
         /* Ustawienie Flexboxa */
         justify-content: center;
         /* Wyśrodkowanie w poziomie */
         align-items: center;
         /* Wyśrodkowanie w pionie */

         display: flex;
         /* Ustawienie Flexboxa */
         justify-content: center;
         /* Wyśrodkowanie w poziomie */
         align-items: center;
         /* Wyśrodkowanie w pionie */
         background-color: rgb(237, 242, 252);
         border: 1px solid #ddd;
         border-radius: 10px;
         padding: 20px;
         text-align: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .promo-item-1 {
         grid-column: 1 / 2;
         /* Kolumna 1 */
         grid-row: 1 / 2;
         /* Rząd 1 */
     }

     .promo-item-2 {
         grid-column: 2 / 3;
         /* Kolumna 2 */
         grid-row: 1 / 2;
         /* Rząd 1 */
     }

     .promo-item-3 {
         grid-column: 3 / 4;
         /* Kolumna 3 */
         grid-row: 1 / 3;
         /* Rząd 1 i 2 */
     }

     .promo-item-4 {
         grid-column: 1 / 3;
         /* Kolumna 1 i 2 */
         grid-row: 2 / 3;
         /* Rząd 2 */
     }

     .promo-item-4 p {
         text-align: left;
     }

     .courier-logos {
         display: flex;
         flex-direction: row;
     }

     .courier-logos img {
         max-height: 55px;
         margin: 10px;
     }


     .promo-content {
         width: 80%;
         margin: 40px auto;
         text-align: center;

     }

     .promo-paragraph {
         font-size: 16px;
         color: #333;
         margin-bottom: 20px;
         line-height: 1.5;
         text-align: left;
     }

     .promo-row {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 20px;
         gap: 20px;
     }

     .promo-row-footer {
         background-color: rgb(237, 242, 252);
         justify-content: space-between;
     }

     .promo-row-footer p {
         padding: 20px;
         font-size: 20px;
         color: #333;
         margin-top: 10px;
         text-align: left;
         line-height: 1.5;
     }

     .promo-column {
         flex: 1;
         text-align: left;
     }

     .promo-column img {
         width: 100%;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .promo-button {
         padding: 10px 20px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }

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


     .serwis-content {
         width: 80%;
         margin: 40px auto;
         text-align: center;
         /* border: 2px solid; */
         /* border-image: linear-gradient(to bottom, blue, green) 1; */
         padding: 20px;
         border-radius: 10px;
     }

     .promo-boxes {
         display: flex;
         width: 80%;
         margin: auto;
         justify-content: space-between;
         gap: 20px;
         margin-top: 20px;
     }

     .promo-box {
         position: relative;
         flex: 1;
         padding: 20px;
         width: 100%;
         text-align: center;
         background-color: white;
         /* Wewnętrzne tło boxa */
         border-radius: 50px;
         /* Zaokrąglone rogi */
         box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

         overflow: hidden;
         /* Ukrywa nadmiar pseudo-elementu */
         z-index: 1;
         /* Ustawia zawartość nad pseudo-elementem */
     }



     .promo-box h3 {
         font-size: 24px;
         margin-bottom: 10px;
         color: #000;
     }

     .promo-box p {
         font-size: 16px;
         margin-bottom: 10px;
         color: #000;
         line-height: 1.5;
     }

     .promo-box ul li {
         font-size: 16px;
         margin-bottom: 10px;
         color: #000;
         line-height: 1.5;
         justify-content: left;
     }

     /* .promo-box button {
            padding: 10px 20px;
            background-color: #67aaea;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        } */

     .promo-box button:hover {
         background-color: #0056b3;
     }


     .promo-new-section {
         width: 80%;
         margin: 40px auto;
         text-align: center;
         background-color: rgb(237, 242, 252);
         padding: 50px;
     }

     .promo-new-paragraph {
         font-size: 18px;
         margin-bottom: 20px;
         color: #333;
     }

     .promo-new-blocks {
         display: flex;
         justify-content: center;
         gap: 20px;
     }

     .promo-new-block {
         width: 30%;
         text-align: center;
         background-color: white;
         padding: 20px;
         border-radius: 20px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .promo-new-icon {
         width: 150px;
         height: 150px;
         margin-bottom: 10px;
         border-radius: 20px;
         border: 2px solid #007BFF;
         margin: 10%;
     }

     .banner-section {
         width: 100%;
         height: 50vh;
         /* Cała wysokość ekranu */
         background: url('/img/o-nas-main-banner.jpg') no-repeat center center/cover;
         /* Obraz w tle */
         display: flex;
         justify-content: center;
         /* Wyśrodkowanie w poziomie */
         align-items: center;
         /* Wyśrodkowanie w pionie */
         text-align: center;
     }

     .banner-section h1 {
         font-size: 45px;
         color: white;
         /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); */
         /* Subtelny cień dla tekstu */
     }


     .two-column-section {
         /* width: 100%; */
         height: 100%;
         /* Cała wysokość ekranu */
         display: flex;
         justify-content: center;
         align-items: center;
         background-color: #f9f9f9;
         /* Jasne tło */
         box-sizing: border-box;

     }

     .two-column-box {
         width: 80%;
         /* Szerokość boxa */
         display: flex;
         gap: 10px;
         background-color: white;
         padding: 10px;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         /* justify-content: center; */
         align-items: center;
         flex-direction: column;


     }

     .left-column {
         /* flex: 1; */
         width: 100%;
         display: flex;
         flex-direction: column;
         /* justify-content: center; */
     }

     .left-column h2 {
         font-size: 36px;
         margin-bottom: 20px;
         color: #333;
     }

     .left-column p {

         font-size: 16px;
         margin-bottom: 15px;
         color: #555;
         line-height: 1.5;
     }

     .learn-more-button {
         padding: 10px 20px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
         align-self: flex-start;
     }

     .learn-more-button:hover {
         background-color: #67aaea;
     }

     .right-column {
         flex: 1;
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .right-column img {
         max-width: 100%;
         max-height: 80%;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }


     .full-screen-section {
         width: 100%;
         height: 80vh;
         /* Cała wysokość ekranu */
         background: url('/img/o-nas-banner-2.jpg') no-repeat center center/cover;
         /* Obraz w tle */
         display: flex;
         justify-content: center;
         /* Wyśrodkowanie w poziomie */
         align-items: center;
         /* Wyśrodkowanie w pionie */
         position: relative;
     }




     .overlay-box {
         display: flex;
         /* Ustawienie Flexbox */
         flex-direction: column;
         /* Ustawienie elementów w kolumnie */
         justify-content: center;
         /* Wyśrodkowanie w pionie */
         align-items: center;
         /* Wyśrodkowanie w poziomie */
         margin: auto;
         background-color: rgba(255, 255, 255, 0.8);
         /* Półprzezroczyste tło */
         padding: 20px;
         /* Automatyczne wypełnienie */
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         text-align: left;
         width: 90%;
         /* Szerokość boxa */
         height: 70%;
     }

     .overlay-box h2 {
         font-size: 36px;
         margin-bottom: 20px;
         color: #333;
     }

     .overlay-box p {
         font-size: 16px;
         margin-bottom: 15px;
         color: #555;
         line-height: 1.5;
     }



     .full-height-section {
         width: 100%;
         height: 100%vh;
         /* Cała wysokość ekranu */
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         background-color: #f9f9f9;
         /* Jasne tło */
         padding: 20px;
         box-sizing: border-box;
     }

     .full-height-section .section-title {
         font-size: 36px;
         margin-bottom: 20px;
         color: #333;
         text-align: center;
     }

     /* .full-height-section p {
        width: 80%;
        font-size: 16px;
        margin-bottom: 20px;
        color: #333;
        text-align: center;
    } */

     .three-column-layout {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         /* align-items: stretch; */
         /* Ustawia równą wysokość dla wszystkich kolumn */
         gap: 20px;
         width: 100%;
         /* Szerokość całej sekcji */
     }

     .column {
         flex: 1;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         text-align: center;
         /* gap: 15px; */
         background-color: white;
         /* Opcjonalne tło dla kolumn */
         padding: 20px;
         /* Opcjonalne wypełnienie */
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         /* Opcjonalny cień */
         border-radius: 10px;
         /* Opcjonalne zaokrąglenie rogów */
     }

     .column img {
         max-width: 100%;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .column p {
         font-size: 16px;
         color: #555;
         line-height: 1.5;
     }

     .full-height-section-p {
         width: 80%;
         font-size: 16px;
         margin-bottom: 20px;
         color: #333;
         text-align: center;
     }

     .column .learn-more-button {
         margin: 10px auto;
         width: 40%;
         padding: 15px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 15px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }



     .icon-section {
         width: 100%;
         margin: 40px auto;
         text-align: center;

     }

     .icon-section-title {
         font-size: 36px;
         margin-bottom: 20px;
         color: #333;
     }

     .icon-row {
         display: flex;
         justify-content: space-between;
         gap: 10px;
         margin-bottom: 20px;
     }

     .icon-box {
         flex: 1;
         background-color: white;
         padding: 10px;
         border-radius: 25px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         text-align: center;
         border: 2px solid #007BFF;
         /* Dodanie obramowania */
     }

     .icon-image {
         width: 100px;
         height: 100px;
         margin-bottom: 10px;
     }

     .icon-box h4 {
         font-size: 20px;
         margin-bottom: 10px;
         color: #67aaea;
     }

     .icon-box p {
         font-size: 16px;
         color: #555;
         line-height: 1.5;
     }

     .icon-section-main {
         background-color: rgb(237, 242, 252);
         padding: 40px;
     }




     .locations-section {
         width: 80%;

         margin: 40px auto;
         text-align: center;
     }

     .locations-title {
         font-size: 36px;
         margin-bottom: 30px;
         color: #333;
     }

     .locations-columns {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         gap: 20px;
         ;
     }

     .location-column {
         flex: 1;
         background-color: white;
         padding: 20px;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         text-align: left;
     }

     .location-column h3 {
         font-size: 24px;
         margin-bottom: 10px;
         color: #007BFF;
     }

     .location-column p {
         font-size: 16px;
         margin-bottom: 10px;
         color: #555;
         line-height: 1.5;
     }

     .location-column a {
         display: inline-block;
         margin-top: 10px;
         font-size: 16px;
         color: #007BFF;
         text-decoration: none;
         font-weight: bold;
     }

     .location-column a:hover {
         text-decoration: underline;
     }

     .location-column iframe {
         width: 95% !important;
     }
 }

 @media (min-width: 768px) {
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     html {
         scroll-behavior: smooth;
         /* Płynne przewijanie */
     }

     body {
         /* font-family: Arial, sans-serif; */
         font-family: 'Open Sans', sans-serif;
     }

     .main-container {
         width: 100%;
     }

     .header {
         position: fixed;
         top: 0px;
         left: 0;
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: space-between;
         background-color: rgba(255, 255, 255, 1);
         padding: 0px 20px;
         z-index: 1000;
     }

     .header .logo {
         font-size: 24px;
         font-weight: bold;
     }

     .header .logo img {
         height: 75px;
         /* Ustaw wysokość logo */
     }

     .header .menu {
         display: flex;
         justify-content: center;
         /* Wyśrodkowanie linków w poziomie */
         gap: 5px;
         flex: 1;
         /* Dodanie elastyczności, aby menu zajmowało dostępne miejsce */
     }

     .header .menu a {
         text-decoration: none;
         color: #333;
         font-weight: bold;
         padding: 5px 10px;
         border-radius: 5px;
         font-size: 14px;
         /* Dodanie zaokrąglenia */
         transition: background-color 0.3s ease;
         /* Płynne przejście koloru */
     }

     .header .menu a:hover {
         background-color: rgba(0, 0, 0, 0.1);
         /* Kolor tła przy najechaniu */
     }

     .header .menu a.active {
         background-color: #67aaea;
         /* Kolor tła dla aktywnej opcji */
         color: white;
         /* Kolor tekstu dla aktywnej opcji */
     }

     .hero-section {
         position: relative;
         width: 100%;
         height: 100vh;
         background: url('/img/wspolpraca-banner.jpg') no-repeat center center/cover;
     }

     /* .hero-overlay {
            position: absolute;
            top: 0;
            left: 15%;
            width: 30%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
        } */

     .hero-overlay {
         position: absolute;
         top: 30%;
         left: 0%;
         width: 100%;
         height: 40%;
         /* background: linear-gradient(to right, rgba(128, 128, 128, 0.5), rgba(0, 123, 255, 0.5));  */
         background-color: rgba(7, 79, 154, 0.5);
         color: white;
         display: flex;
         flex-direction: column;
         justify-content: center;
         /* align-items: center; */
         /* align-items: flex-start; */
         padding: 0px;
         /* overflow: hidden; */
     }



     .hero-overlay h1,
     .hero-overlay-outside {
         margin-bottom: 10px;
         font-size: 50px;
         text-align: center;
         color: white;
     }

     .hero-overlay-outside {
         margin-top: 4%;
         font-size: 60px;
         font-weight: 700;
         text-align: center;
         color: white;
     }

     .hero-overlay p {
         font-size: 28px;
         text-align: center;
     }

     .info-section {
         background-color: white;
         padding: 40px 20px;
         text-align: center;
         margin: 0 10%;
     }

     .info-title {
         font-size: 50px;
         margin-bottom: 30px;
         color: #333;
     }

     .info-columns {
         display: flex;
         justify-content: space-between;
         justify-content: space-around;
         gap: 20px;
         flex-wrap: wrap;
         /* Zapewnia responsywność */
     }

     .info-column {
         flex: 1;
         max-width: 30%;
         /* Każda kolumna zajmuje maksymalnie 30% szerokości */
         text-align: center;
         padding: 20px;
         box-sizing: border-box;
     }

     .info-icon {
         width: 150px;
         /* Ustaw szerokość ikony */
         height: 150px;
         /* Ustaw wysokość ikony */
         margin-bottom: 15px;
     }

     .info-column h2 {
         font-size: 50px;
         margin-bottom: 10px;
         color: black;
     }

     .info-column h4 {
         font-size: 18px;
         margin-bottom: 30px;
         color: black
     }

     .info-column p {
         font-size: 16px;
         color: #666;
         line-height: 1.5;
     }

     .two-column-section {
         margin: 0;
         background-color: white;
         padding: 40px 20px;
         display: flex;

         justify-content: space-between;
         justify-content: space-around;
         gap: 10px;
         flex-wrap: wrap;
         /* Zapewnia responsywność */
     }

     .left-column,
     .right-column {
         flex: 1;
         /* max-width: 40%; */
         /* Każda kolumna zajmuje maksymalnie 45% szerokości */
         box-sizing: border-box;
     }

     .left-column h2 {
         font-size: 30px;
         margin-bottom: 15px;
         color: black
     }

     .left-column p {
         font-size: 16px;
         margin-bottom: 20px;
         color: #333;
     }

     .more-button {
         padding: 10px 20px;
         background-color: white;
         color: black;
         border: 2px solid #007BFF;
         border-radius: 20px;
         font-size: 16px;
         font-weight: bold;
         cursor: pointer;
         transition: background-color 0.3s ease;
         margin-top: auto;
         margin: 20px;
     }

     .more-button-wspolpraca {
         position: absolute;
         /* Pozycjonowanie absolutne */
         bottom: 10px;
         /* Odstęp 10px od dołu */
         left: 50%;
         /* Wyśrodkowanie przycisku */
         transform: translateX(-50%);
         /* Przesunięcie o 50% szerokości przycisku, aby był wyśrodkowany */
     }



     .more-button-b2b {
         color: #FFF;
         background-color: #67aaea;
         height: 100%;
         font-weight: 500;
         font-size: 18px;
         padding: 10px;
         border: 2px solid #007BFF;
         border-radius: 20px;
         height: 60px;

     }

     .more-button-b2b:hover {
         background-color: #FFF;
         color: black;
     }


     .more-button:hover {
         background-color: #67aaea;
         color: white;
     }

     .right-column p {
         font-size: 16px;
         margin-bottom: 15px;
         color: #555;
         line-height: 1.5;
     }



     .layered-section {
         background-color: rgb(237, 242, 252);
         /* Błękitne tło */
         height: 1000px;
         /* Wysokość sekcji */
         position: relative;
         overflow: hidden;
         /* Ukrywa elementy wychodzące poza sekcję */
     }

     .background-layer {
         position: relative;
         height: 100%;
         /* Dopasowanie wysokości do sekcji nadrzędnej */
         text-align: center;
         /* Wyśrodkowanie tekstu */
     }

     .background-layer h2 {
         font-size: 50px;
         color: black;
         margin: 0;
         line-height: 100px;
         /* Wyśrodkowanie w pionie */
     }

     .background-image {
         position: absolute;
         /* Pozycjonowanie obrazu */
         bottom: 0;
         /* Przylega do dolnej krawędzi */
         right: 0;
         /* Przylega do prawej krawędzi */
         width: 80%;
         /* Szerokość obrazu */
         height: 80%;
         /* Wysokość obrazu */
         object-fit: cover;
         /* Dopasowanie obrazu */
     }

     .foreground-layer {
         position: absolute;
         bottom: 10px;
         /* Przylega do dolnej krawędzi */
         left: 200px;
         /* Odstęp od lewej krawędzi */
         background-color: white;
         padding: 40px;
         width: 40%;
         height: 40%;
         /* Szerokość sekcji */
         border-radius: 10px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         /* Subtelny cień */
         z-index: 2;
         /* Wyższy z-index, aby nachodziła na obraz */
     }

     .foreground-layer h2 {
         font-size: 50px;
         color: black;
         /* Kolor tekstu */
     }

     .foreground-layer h2,
     .foreground-layer p {
         margin: 20px;
         /* Odstępy między elementami */
         color: #333;
         /* Kolor tekstu */
     }

     .foreground-layer h2 {
         font-size: 50px;
         color: black;
         /* Kolor tekstu */
     }

     #b2b,
     #home,
     #cooperation {
         position: relative;
     }

     #b2b:before,
     #home:before,
     #cooperation:before {
         content: '';
         display: block;
         height: 100px;
         /* Wysokość odstępu */
         margin-top: 0px;
         /* Przesunięcie sekcji w górę */
     }


     .icons-section {
         background-color: #f9f9f9;
         /* Jasne tło */
         padding: 40px 20px;
         text-align: center;
     }

     .icons-section h2 {
         font-size: 50px;
         color: black;
         margin-bottom: 20px;
     }

     .icons-container {
         display: grid;
         grid-template-columns: repeat(4, 200px);
         /* 4 kolumny o szerokości 200px */
         justify-content: center;
         /* Wyśrodkowanie całej siatki */
         gap: 20px;
         /* Odstępy między boxami */
         margin: 10px;
     }

     .icon {
         width: 200px;
         /* Szerokość boxa */
         height: 200px;
         /* Wysokość boxa */
         display: flex;
         justify-content: center;
         align-items: center;
         background-color: white;
         border-radius: 10px;
         /* Zaokrąglenie rogów */
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         /* Subtelny cień */
     }

     .icon img {
         max-width: 80%;
         /* Dopasowanie obrazu do kontenera */
         max-height: 80%;
     }




     .contact-section {
         height: 100vh;
         ;
         position: relative;
         background: url('/img/baner-formularz.jpg') no-repeat center center/cover;
         /* Obraz w tle */
         padding: 0 20px;
         /* Usuń górny i dolny padding */
         color: white;
         text-align: center;
         display: flex;
         /* Użycie Flexbox */
         flex-direction: column;
         /* Ustawienie elementów w kolumnie */
         justify-content: center;
         /* Wyśrodkowanie w pionie */
         align-items: center;
         /* Wyśrodkowanie w poziomie */
     }

     .contact-section h2 {
         font-size: 50px;
         margin-bottom: 20px;
         color: #fff;
     }

     .contact-form {
         background-color: rgba(255, 255, 255, 0.5);
         /* Półprzezroczyste tło */
         padding: 20px;
         border-radius: 15px;
         min-width: 900px;
         max-width: 1400px;
         margin: 0 auto;
         color: #333;
     }

     .form-row {
         display: flex;
         justify-content: space-between;
         gap: 20px;
         margin-bottom: 15px;
     }

     .form-row input,
     .form-row select,
     .form-row textarea {
         flex: 1;
         padding: 10px;
         border: 1px solid #ccc;
         border-radius: 15px;
         font-size: 16px;
         background-color: rgba(255, 255, 255, 0.5);
         /* Półprzezroczyste tło */
         color: #333;
         /* Kolor tekstu */
     }

     textarea {
         resize: none;
         background-color: rgba(255, 255, 255, 0.5);
     }

     button {
         padding: 10px 20px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }

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



     .footer {
         background-color: #fff;
         /* Białe tło */
         padding: 40px 20px;
         width: 100%;
         box-sizing: border-box;
     }

     .footer-content {
         display: flex;

         justify-content: space-between;
         align-items: flex-start;
         gap: 20px;
     }

     .footer-left {
         width: 60%;
         /* Lewa strona zajmuje 60% szerokości */
         padding-left: 10%;
         /* Odsunięcie od lewej krawędzi */
     }

     .footer-logo {
         margin-bottom: 20px;
     }

     .footer-row {
         display: flex;
         justify-content: space-between;
         gap: 20px;
         margin-bottom: 20px;
     }

     .footer-row a {
         text-decoration: none;
         color: grey;
         /* Kolor linków */
         font-weight: bold;
     }

     .footer a:hover {
         text-decoration: underline;
         color: rgb(56, 56, 56);
     }

     .footer-column {
         flex: 1;
     }

     .footer-column h3 {
         font-size: 18px;
         margin-bottom: 10px;
         color: black
     }

     .footer-column p {
         font-size: 14px;
         color: #333;
         line-height: 1.5;
     }

     .footer-contact {
         margin-top: 20px;
         font-size: 14px;
         color: #333;
         width: 300px;
         background-color: rgb(237, 242, 252);
         padding: 30px;
         border-radius: 15px;
     }


     .footer-right {
         margin-right: 0px;
         width: 100%;
         /* Prawa strona zajmuje 50% szerokości */
     }

     .footer-right iframe {
         width: 100%;
         /* Szerokość mapy */
         height: 600px;
         /* Wysokość mapy */
         border: none;
         /* Brak obramowania */
         border-radius: 10px;
         /* Zaokrąglenie rogów */
     }

     .footer-bottom {
         text-align: center;
         margin-top: 20px;
     }

     .footer-bottom p {
         font-size: 14px;
         color: #666;
     }

     .footer-bottom hr {
         margin: 10px 0;
         border: none;
         border-top: 1px solid #ccc;
     }

     .full-width-section {
         width: 100%;
         /* Na całą szerokość */
         background-color: #f9f9f9;
         /* Jasne tło */
         padding: 40px 20px;
         text-align: center;
     }

     .section-title {

         font-size: 50px;
         margin-bottom: 60px;
         color: #333;
     }

     .service-container {
         display: flex;
         width: 80%;
         margin: auto;

         justify-content: space-around;
         /* Rozmieszczenie bloków */
         flex-wrap: wrap;
         /* Zapewnia zawijanie na mniejszych ekranach */
         gap: 20px;
     }


     .service-block {
         background-color: white;
         width: 22%;
         height: 450px;
         padding: 20px;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         /* Subtelny cień */
         position: relative;
         text-align: left;
     }



     .icon-container {
         position: absolute;
         top: -40px;
         /* Pozycjonowanie ikony */
         left: 50%;
         transform: translateX(-50%);
         width: 120px;
         height: 120px;
         /* background-color: #67aaea;s */
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .icon-container img {
         width: 100%;
         /* Dopasowanie ikony */
         height: 100%;
     }

     .service-block h3 {
         margin-top: 70px;
         /* Odstęp od ikony */
         font-size: 24px;
         font-weight: 400;
         color: #333;
     }

     .service-block ul {
         /* list-style: none; */
         padding: 0;
         margin-top: 15px;
     }

     .service-block ul li {
         font-size: 16px;
         color: #000;
         margin: 15px;
         margin-bottom: 10px;
         /* margin: 10px; */
     }


     .promo-section {
         background-color: white;
         /* Białe tło */
         /* height: 100vh; */
         padding: 40px 20px;
         box-sizing: border-box;
         text-align: center;
     }

     .promo-bar {
         position: relative;
         background-color: rgb(191, 182, 176);
         /* Szary pasek */
         height: 100px;
         margin: 0 auto 40px;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
     }

     .promo-icon {
         position: absolute;
         top: -10%;
         transform: translateY(-50%);
         left: 50%;
         /* Możesz dostosować pozycję */
         width: 80px;
         height: 80px;
         background-color: white;
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .promo-icon img {
         width: 100%;
         height: 100%;
     }

     .promo-text {
         font-size: 26px;
         color: white;
         margin-left: 100px;
         /* Odstęp od ikony */
     }

     .promo-blocks {
         display: flex;
         width: 80%;
         margin: auto;
         justify-content: space-around;
         flex-wrap: wrap;
         gap: 20px;
         margin-bottom: 40px;
     }

     .promo-block {
         background-color: white;
         width: 22%;
         padding: 20px;
         border-radius: 10px;
         /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
         text-align: center;
     }

     .promo-block-icon {
         width: 200px;
         height: 200px;
         margin: 0 auto 20px;
         /* background-color: #67aaea; */
         border: 2px solid #007BFF;
         border-radius: 10px;
         display: flex;
         justify-content: center;
         align-items: center;
         /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
     }

     .promo-block-icon img {
         width: 100%;
         height: 100%;

     }

     .promo-block p {
         font-size: 20px;
         color: #000
     }

     .promo-footer {
         margin-top: 20px;
         width: 80%;
         margin: auto;
     }


     .promo-button {
         padding: 10px 20px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }

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

     .promo-footer p {
         font-size: 20px;
         /* color: #666; */
         margin-top: 10px;
         text-align: left;
         line-height: 1.5;
     }

     .promo-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         /* 3 kolumny */
         grid-template-rows: repeat(2, 1fr);
         /* 2 rzędy */
         gap: 20px;
         /* Odstępy między blokami */
         margin: 40px auto;
         height: 50vh;
         ;
         width: 80%;
         /* Szerokość siatki */

     }

     .promo-item {
         background-color: rgb(237, 242, 252);
         /* background-color: #f9f9f9; */
         border: 1px solid #ddd;
         border-radius: 10px;
         padding: 20px;
         text-align: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         font-weight: 400;
         font-size: 20px;
     }

     .promo-item:not(.promo-item-4) {
         display: flex;
         /* Ustawienie Flexboxa */
         justify-content: center;
         /* Wyśrodkowanie w poziomie */
         align-items: center;
         /* Wyśrodkowanie w pionie */

         display: flex;
         /* Ustawienie Flexboxa */
         justify-content: center;
         /* Wyśrodkowanie w poziomie */
         align-items: center;
         /* Wyśrodkowanie w pionie */
         background-color: rgb(237, 242, 252);
         border: 1px solid #ddd;
         border-radius: 10px;
         padding: 20px;
         text-align: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .promo-item-1 {
         grid-column: 1 / 2;
         /* Kolumna 1 */
         grid-row: 1 / 2;
         /* Rząd 1 */
     }

     .promo-item-2 {
         grid-column: 2 / 3;
         /* Kolumna 2 */
         grid-row: 1 / 2;
         /* Rząd 1 */
     }

     .promo-item-3 {
         grid-column: 3 / 4;
         /* Kolumna 3 */
         grid-row: 1 / 3;
         /* Rząd 1 i 2 */
     }

     .promo-item-4 {
         grid-column: 1 / 3;
         /* Kolumna 1 i 2 */
         grid-row: 2 / 3;
         /* Rząd 2 */
     }

     .promo-item-4 p {
         text-align: left;
     }

     .courier-logos {
         display: flex;
         flex-direction: row;
     }

     .courier-logos img {
         max-height: 55px;
         margin: 10px;
     }


     .promo-content {
         width: 80%;
         margin: 40px auto;
         text-align: center;

     }

     .promo-paragraph {
         font-size: 16px;
         color: #333;
         margin-bottom: 20px;
         line-height: 1.5;
         text-align: left;
     }

     .promo-row {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 20px;
         gap: 20px;
     }

     .promo-row-footer {
         background-color: rgb(237, 242, 252);
         justify-content: space-between;
     }

     .promo-row-footer p {
         padding: 20px;
         font-size: 20px;
         color: #333;
         margin-top: 10px;
         text-align: left;
         line-height: 1.5;
     }

     .promo-column {
         flex: 1;
         text-align: left;
     }

     .promo-column img {
         width: 100%;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .promo-button {
         padding: 10px 20px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }

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


     .serwis-content {
         width: 80%;
         margin: 40px auto;
         text-align: center;
         /* border: 2px solid; */
         /* border-image: linear-gradient(to bottom, blue, green) 1; */
         padding: 20px;
         border-radius: 10px;
     }

     .promo-boxes {
         display: flex;
         width: 80%;
         margin: auto;
         justify-content: space-between;
         gap: 20px;
         margin-top: 20px;
     }

     .promo-box {
         position: relative;
         flex: 1;
         padding: 20px;
         width: 100%;
         text-align: center;
         background-color: white;
         /* Wewnętrzne tło boxa */
         border-radius: 50px;
         /* Zaokrąglone rogi */
         box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

         overflow: hidden;
         /* Ukrywa nadmiar pseudo-elementu */
         z-index: 1;
         /* Ustawia zawartość nad pseudo-elementem */
     }



     .promo-box h3 {
         font-size: 24px;
         margin-bottom: 10px;
         color: #000;
     }

     .promo-box p {
         font-size: 16px;
         margin-bottom: 10px;
         color: #000;
         line-height: 1.5;
     }

     .promo-box ul li {
         font-size: 16px;
         margin-bottom: 10px;
         color: #000;
         line-height: 1.5;
         justify-content: left;
     }

     /* .promo-box button {
            padding: 10px 20px;
            background-color: #67aaea;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        } */

     .promo-box button:hover {
         background-color: #0056b3;
     }


     .promo-new-section {
         width: 80%;
         margin: 40px auto;
         text-align: center;
         background-color: rgb(237, 242, 252);
         padding: 50px;
     }

     .promo-new-paragraph {
         font-size: 18px;
         margin-bottom: 20px;
         color: #333;
     }

     .promo-new-blocks {
         display: flex;
         justify-content: center;
         gap: 20px;
     }

     .promo-new-block {
         width: 30%;
         text-align: center;
         background-color: white;
         padding: 20px;
         border-radius: 20px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .promo-new-icon {
         width: 150px;
         height: 150px;
         margin-bottom: 10px;
         border-radius: 20px;
         border: 2px solid #007BFF;
         margin: 10%;
     }

     .banner-section {
         width: 100%;
         height: 50vh;
         /* Cała wysokość ekranu */
         background: url('/img/o-nas-main-banner.jpg') no-repeat center center/cover;
         /* Obraz w tle */
         display: flex;
         justify-content: center;
         /* Wyśrodkowanie w poziomie */
         align-items: center;
         /* Wyśrodkowanie w pionie */
         text-align: center;
     }

     .banner-section h1 {
         font-size: 45px;
         color: white;
         /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); */
         /* Subtelny cień dla tekstu */
     }


     .two-column-section {
         /* width: 100%; */
         height: 100%;
         /* Cała wysokość ekranu */
         display: flex;
         justify-content: center;
         align-items: center;
         background-color: #f9f9f9;
         /* Jasne tło */
         box-sizing: border-box;

     }

     .two-column-box {
         width: 80%;
         /* Szerokość boxa */
         display: flex;
         gap: 10px;
         background-color: white;
         padding: 10px;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         /* justify-content: center; */
         align-items: center;
         flex-direction: column;


     }

     .left-column {
         /* flex: 1; */
         width: 100%;
         display: flex;
         flex-direction: column;
         /* justify-content: center; */
     }

     .left-column h2 {
         font-size: 36px;
         margin-bottom: 20px;
         color: #333;
     }

     .left-column p {

         font-size: 16px;
         margin-bottom: 15px;
         color: #555;
         line-height: 1.5;
     }

     .learn-more-button {
         padding: 10px 20px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
         align-self: flex-start;
     }

     .learn-more-button:hover {
         background-color: #67aaea;
     }

     .right-column {
         flex: 1;
         display: flex;
         justify-content: center;
         align-items: center;
     }

     .right-column img {
         max-width: 100%;
         max-height: 80%;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }


     .full-screen-section {
         width: 100%;
         height: 100vh;
         /* Cała wysokość ekranu */
         background: url('/img/o-nas-banner-2.jpg') no-repeat center center/cover;
         /* Obraz w tle */
         display: flex;
         justify-content: center;
         /* Wyśrodkowanie w poziomie */
         align-items: center;
         /* Wyśrodkowanie w pionie */
         position: relative;
     }




     .overlay-box {
         display: flex;
         /* Ustawienie Flexbox */
         flex-direction: column;
         /* Ustawienie elementów w kolumnie */
         justify-content: center;
         /* Wyśrodkowanie w pionie */
         align-items: center;
         /* Wyśrodkowanie w poziomie */
         margin: auto;
         background-color: rgba(255, 255, 255, 0.8);
         /* Półprzezroczyste tło */
         padding: 20px;
         /* Automatyczne wypełnienie */
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         text-align: left;
         width: 70%;
         /* Szerokość boxa */
         height: 60%;
     }

     .overlay-box h2 {
         font-size: 36px;
         margin-bottom: 20px;
         color: #333;
     }

     .overlay-box p {
         font-size: 16px;
         margin-bottom: 15px;
         color: #555;
         line-height: 1.5;
     }



     .full-height-section {
         width: 100%;
         height: 100%vh;
         /* Cała wysokość ekranu */
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         background-color: #f9f9f9;
         /* Jasne tło */
         padding: 20px;
         box-sizing: border-box;
     }

     .full-height-section .section-title {
         font-size: 36px;
         margin-bottom: 20px;
         color: #333;
         text-align: center;
     }

     /* .full-height-section p {
        width: 80%;
        font-size: 16px;
        margin-bottom: 20px;
        color: #333;
        text-align: center;
    } */

     .three-column-layout {
         display: flex;
         justify-content: space-between;
         align-items: stretch;
         /* Ustawia równą wysokość dla wszystkich kolumn */
         gap: 20px;
         width: 80%;
         /* Szerokość całej sekcji */
     }

     .column {
         flex: 1;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         text-align: center;
         /* gap: 15px; */
         background-color: white;
         /* Opcjonalne tło dla kolumn */
         padding: 20px;
         /* Opcjonalne wypełnienie */
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         /* Opcjonalny cień */
         border-radius: 10px;
         /* Opcjonalne zaokrąglenie rogów */
     }

     .column img {
         max-width: 100%;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .column p {
         font-size: 16px;
         color: #555;
         line-height: 1.5;
     }

     .full-height-section-p {
         width: 80%;
         font-size: 16px;
         margin-bottom: 20px;
         color: #333;
         text-align: center;
     }

     .column .learn-more-button {
         margin: 10px auto;
         width: 40%;
         padding: 15px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 15px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }



     .icon-section {
         width: 100%;
         margin: 40px auto;
         text-align: center;

     }

     .icon-section-title {
         font-size: 36px;
         margin-bottom: 20px;
         color: #333;
     }

     .icon-row {
         display: flex;
         justify-content: space-between;
         gap: 10px;
         margin-bottom: 20px;
     }

     .icon-box {
         flex: 1;
         background-color: white;
         padding: 10px;
         border-radius: 25px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         text-align: center;
         border: 2px solid #007BFF;
         /* Dodanie obramowania */
     }

     .icon-image {
         width: 100px;
         height: 100px;
         margin-bottom: 10px;
     }

     .icon-box h4 {
         font-size: 20px;
         margin-bottom: 10px;
         color: #67aaea;
     }

     .icon-box p {
         font-size: 16px;
         color: #555;
         line-height: 1.5;
     }

     .icon-section-main {
         background-color: rgb(237, 242, 252);
         padding: 40px;
     }




     .locations-section {
         width: 80%;

         margin: 40px auto;
         text-align: center;
     }

     .locations-title {
         font-size: 36px;
         margin-bottom: 30px;
         color: #333;
     }

     .locations-columns {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         gap: 20px;
         ;
     }

     .location-column {
         flex: 1;
         background-color: white;
         padding: 20px;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         text-align: left;
     }

     .location-column h3 {
         font-size: 24px;
         margin-bottom: 10px;
         color: #007BFF;
     }

     .location-column p {
         font-size: 16px;
         margin-bottom: 10px;
         color: #555;
         line-height: 1.5;
     }

     .location-column a {
         display: inline-block;
         margin-top: 10px;
         font-size: 16px;
         color: #007BFF;
         text-decoration: none;
         font-weight: bold;
     }

     .location-column a:hover {
         text-decoration: underline;
     }
 }

 @media (min-width: 1024px) {
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }

     html {
         scroll-behavior: smooth;
         /* Płynne przewijanie */
     }

     body {
         /* font-family: Arial, sans-serif; */
         font-family: 'Open Sans', sans-serif;
     }

     .main-container {
         width: 100%;
     }

     .header {
         position: fixed;
         top: 0px;
         left: 0;
         width: 100%;
         display: flex;
         align-items: center;
         justify-content: space-between;
         background-color: rgba(255, 255, 255, 1);
         padding: 0px 20px;
         z-index: 1000;
     }

     .header .logo {
         font-size: 24px;
         font-weight: bold;
     }

     .header .logo img {
         height: 75px;
         /* Ustaw wysokość logo */
     }

     .header .menu {
         display: flex;
         justify-content: center;
         /* Wyśrodkowanie linków w poziomie */
         gap: 45px;
         flex: 1;

         /* Dodanie elastyczności, aby menu zajmowało dostępne miejsce */
     }

     .header .menu a {
         text-decoration: none;
         color: #333;
         font-weight: bold;
         padding: 5px 10px;
         border-radius: 5px;
         font-size: 18px;
         /* Dodanie zaokrąglenia */
         transition: background-color 0.3s ease;
         /* Płynne przejście koloru */
     }

     .header .menu a:hover {
         background-color: rgba(0, 0, 0, 0.1);
         /* Kolor tła przy najechaniu */
     }

     .header .menu a.active {
         background-color: #67aaea;
         /* Kolor tła dla aktywnej opcji */
         color: white;
         /* Kolor tekstu dla aktywnej opcji */
     }

     .hero-section {
         position: relative;
         width: 100%;
         height: 100vh;
         background: url('/img/wspolpraca-banner.jpg') no-repeat center center/cover;
     }

     /* .hero-overlay {
            position: absolute;
            top: 0;
            left: 15%;
            width: 30%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
        } */

     .hero-overlay {
         position: absolute;
         top: 30%;
         left: 0%;
         width: 100%;
         height: 40%;
         /* background: linear-gradient(to right, rgba(128, 128, 128, 0.5), rgba(0, 123, 255, 0.5));  */
         background-color: rgba(7, 79, 154, 0.5);
         color: white;
         display: flex;
         flex-direction: column;
         justify-content: center;
         /* align-items: center; */
         /* align-items: flex-start; */
         padding: 0px;
         /* overflow: hidden; */
     }



     .hero-overlay h1,
     .hero-overlay-outside {
         margin-bottom: 10px;
         font-size: 50px;
         text-align: center;
         color: white;
     }

     .hero-overlay-outside {
         margin-top: 4%;
         font-size: 60px;
         font-weight: 700;
         text-align: center;
         color: white;
     }

     .hero-overlay p {
         font-size: 28px;
         text-align: center;
     }

     .info-section {
         background-color: white;
         padding: 40px 20px;
         text-align: center;
         margin: 0 10%;
     }

     .info-title {
         font-size: 50px;
         margin-bottom: 30px;
         color: #333;
     }

     .info-columns {
         display: flex;
         justify-content: space-between;
         justify-content: space-around;
         gap: 20px;
         flex-wrap: wrap;
         /* Zapewnia responsywność */
     }

     .info-column {
         flex: 1;
         max-width: 30%;
         /* Każda kolumna zajmuje maksymalnie 30% szerokości */
         text-align: center;
         padding: 20px;
         box-sizing: border-box;
     }

     .info-icon {
         width: 150px;
         /* Ustaw szerokość ikony */
         height: 150px;
         /* Ustaw wysokość ikony */
         margin-bottom: 15px;
     }

     .info-column h2 {
         font-size: 50px;
         margin-bottom: 10px;
         color: black;
     }

     .info-column h4 {
         font-size: 18px;
         margin-bottom: 30px;
         color: black
     }

     .info-column p {
         font-size: 16px;
         color: #666;
         line-height: 1.5;
     }

     .two-column-section {
         margin: 0;
         background-color: white;
         padding: 40px 20px;
         display: flex;
         justify-content: space-between;
         justify-content: space-around;
         gap: 20px;
         flex-wrap: wrap;
         /* Zapewnia responsywność */
     }

     .left-column,
     .right-column {
         flex: 1;
         max-width: 40%;
         /* Każda kolumna zajmuje maksymalnie 45% szerokości */
         box-sizing: border-box;
     }

     .left-column h2 {
         font-size: 50px;
         margin-bottom: 15px;
         color: black
     }

     .left-column p {
         font-size: 16px;
         margin-bottom: 20px;
         color: #333;
     }

     .more-button {
         padding: 10px 20px;
         background-color: white;
         color: black;
         border: 2px solid #007BFF;
         border-radius: 20px;
         font-size: 16px;
         font-weight: bold;
         cursor: pointer;
         transition: background-color 0.3s ease;
         margin-top: 20px;
         margin: 20px;
     }

     .more-button-wspolpraca {
         position: absolute;
         /* Pozycjonowanie absolutne */
         bottom: 10px;
         /* Odstęp 10px od dołu */
         left: 50%;
         /* Wyśrodkowanie przycisku */
         transform: translateX(-50%);
         /* Przesunięcie o 50% szerokości przycisku, aby był wyśrodkowany */
     }



     .more-button-b2b {
         color: #FFF;
         background-color: #67aaea;
         height: 100%;
         font-weight: 500;
         font-size: 18px;
         padding: 10px;
         border: 2px solid #007BFF;
         border-radius: 20px;
         height: 60px;

     }

     .more-button-b2b:hover {
         background-color: #FFF;
         color: black;
     }


     .more-button:hover {
         background-color: #67aaea;
         color: white;
     }

     .right-column p {
         font-size: 16px;
         margin-bottom: 15px;
         color: #555;
         line-height: 1.5;
     }



     .layered-section {
         background-color: rgb(237, 242, 252);
         /* Błękitne tło */
         height: 1000px;
         /* Wysokość sekcji */
         position: relative;
         overflow: hidden;
         /* Ukrywa elementy wychodzące poza sekcję */
     }

     .background-layer {
         position: relative;
         height: 100%;
         /* Dopasowanie wysokości do sekcji nadrzędnej */
         text-align: center;
         /* Wyśrodkowanie tekstu */
     }

     .background-layer h2 {
         font-size: 50px;
         color: black;
         margin: 0;
         line-height: 100px;
         /* Wyśrodkowanie w pionie */
     }

     .background-image {
         position: absolute;
         /* Pozycjonowanie obrazu */
         bottom: 0;
         /* Przylega do dolnej krawędzi */
         right: 0;
         /* Przylega do prawej krawędzi */
         width: 80%;
         /* Szerokość obrazu */
         height: 80%;
         /* Wysokość obrazu */
         object-fit: cover;
         /* Dopasowanie obrazu */
     }

     .foreground-layer {
         position: absolute;
         bottom: 10px;
         /* Przylega do dolnej krawędzi */
         left: 200px;
         /* Odstęp od lewej krawędzi */
         background-color: white;
         padding: 40px;
         width: 40%;
         height: 40%;
         /* Szerokość sekcji */
         border-radius: 10px;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         /* Subtelny cień */
         z-index: 2;
         /* Wyższy z-index, aby nachodziła na obraz */
     }

     .foreground-layer h2 {
         font-size: 50px;
         color: black;
         /* Kolor tekstu */
     }

     .foreground-layer h2,
     .foreground-layer p {
         margin: 20px;
         /* Odstępy między elementami */
         color: #333;
         /* Kolor tekstu */
     }

     .foreground-layer h2 {
         font-size: 50px;
         color: black;
         /* Kolor tekstu */
     }

     #b2b,
     #home,
     #cooperation {
         position: relative;
     }

     #b2b:before,
     #home:before,
     #cooperation:before {
         content: '';
         display: block;
         height: 100px;
         /* Wysokość odstępu */
         margin-top: 0px;
         /* Przesunięcie sekcji w górę */
     }


     .icons-section {
         background-color: #f9f9f9;
         /* Jasne tło */
         padding: 40px 20px;
         text-align: center;
     }

     .icons-section h2 {
         font-size: 50px;
         color: black;
         margin-bottom: 20px;
     }

     .icons-container {
         display: grid;
         grid-template-columns: repeat(4, 200px);
         /* 4 kolumny o szerokości 200px */
         justify-content: center;
         /* Wyśrodkowanie całej siatki */
         gap: 20px;
         /* Odstępy między boxami */
         margin: 10px;
     }

     .icon {
         width: 200px;
         /* Szerokość boxa */
         height: 200px;
         /* Wysokość boxa */
         display: flex;
         justify-content: center;
         align-items: center;
         background-color: white;
         border-radius: 10px;
         /* Zaokrąglenie rogów */
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         /* Subtelny cień */
     }

     .icon img {
         max-width: 80%;
         /* Dopasowanie obrazu do kontenera */
         max-height: 80%;
     }




     .contact-section {
         height: 100vh;
         ;
         position: relative;
         background: url('/img/baner-formularz.jpg') no-repeat center center/cover;
         /* Obraz w tle */
         padding: 0 20px;
         /* Usuń górny i dolny padding */
         color: white;
         text-align: center;
         display: flex;
         /* Użycie Flexbox */
         flex-direction: column;
         /* Ustawienie elementów w kolumnie */
         justify-content: center;
         /* Wyśrodkowanie w pionie */
         align-items: center;
         /* Wyśrodkowanie w poziomie */
     }

     .contact-section h2 {
         font-size: 50px;
         margin-bottom: 20px;
         color: #fff;
     }

     .contact-form {
         background-color: rgba(255, 255, 255, 0.5);
         /* Półprzezroczyste tło */
         padding: 20px;
         border-radius: 15px;
         min-width: 900px;
         max-width: 1400px;
         margin: 0 auto;
         color: #333;
     }

     .form-row {
         display: flex;
         justify-content: space-between;
         gap: 20px;
         margin-bottom: 15px;
     }

     .form-row input,
     .form-row select,
     .form-row textarea {
         flex: 1;
         padding: 10px;
         border: 1px solid #ccc;
         border-radius: 15px;
         font-size: 16px;
         background-color: rgba(255, 255, 255, 0.5);
         /* Półprzezroczyste tło */
         color: #333;
         /* Kolor tekstu */
     }

     textarea {
         resize: none;
         background-color: rgba(255, 255, 255, 0.5);
     }

     button {
         padding: 10px 20px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }

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



     .footer {
         background-color: #fff;
         /* Białe tło */
         padding: 40px 20px;
         width: 100%;
         box-sizing: border-box;
     }

     .footer-content {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: flex-start;
         gap: 20px;
     }

     .footer-left {
         width: 60%;
         /* Lewa strona zajmuje 60% szerokości */
         padding-left: 10%;
         /* Odsunięcie od lewej krawędzi */
     }

     .footer-logo {
         margin-bottom: 20px;
     }

     .footer-row {
         display: flex;
         justify-content: space-between;
         gap: 20px;
         margin-bottom: 20px;
     }

     .footer-row a {
         text-decoration: none;
         color: grey;
         /* Kolor linków */
         font-weight: bold;
     }

     .footer a:hover {
         text-decoration: underline;
         color: rgb(56, 56, 56);
     }

     .footer-column {
         flex: 1;
     }

     .footer-column h3 {
         font-size: 18px;
         margin-bottom: 10px;
         color: black
     }

     .footer-column p {
         font-size: 14px;
         color: #333;
         line-height: 1.5;
     }

     .footer-contact {
         margin-top: 20px;
         font-size: 14px;
         color: #333;
         width: 300px;
         background-color: rgb(237, 242, 252);
         padding: 30px;
         border-radius: 15px;
     }


     .footer-right {
         margin-right: 0px;
         width: 50%;
         /* Prawa strona zajmuje 50% szerokości */
     }

     .footer-right iframe {
         width: 100%;
         /* Szerokość mapy */
         height: 600px;
         /* Wysokość mapy */
         border: none;
         /* Brak obramowania */
         border-radius: 10px;
         /* Zaokrąglenie rogów */
     }

     .footer-bottom {
         text-align: center;
         margin-top: 20px;
     }

     .footer-bottom p {
         font-size: 14px;
         color: #666;
     }

     .footer-bottom hr {
         margin: 10px 0;
         border: none;
         border-top: 1px solid #ccc;
     }

     .full-width-section {
         width: 100%;
         /* Na całą szerokość */
         background-color: #f9f9f9;
         /* Jasne tło */
         padding: 40px 20px;
         text-align: center;
     }

     .section-title {

         font-size: 50px;
         margin-bottom: 60px;
         color: #333;
     }

     .service-container {
         display: flex;
         width: 80%;
         margin: auto;

         justify-content: space-around;
         /* Rozmieszczenie bloków */
         flex-wrap: wrap;
         /* Zapewnia zawijanie na mniejszych ekranach */
         gap: 20px;
     }


     .service-block {
         background-color: white;
         width: 22%;
         height: 450px;
         padding: 20px;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         /* Subtelny cień */
         position: relative;
         text-align: left;
     }



     .icon-container {
         position: absolute;
         top: -40px;
         /* Pozycjonowanie ikony */
         left: 50%;
         transform: translateX(-50%);
         width: 120px;
         height: 120px;
         /* background-color: #67aaea;s */
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .icon-container img {
         width: 100%;
         /* Dopasowanie ikony */
         height: 100%;
     }

     .service-block h3 {
         margin-top: 70px;
         /* Odstęp od ikony */
         font-size: 24px;
         font-weight: 400;
         color: #333;
     }

     .service-block ul {
         /* list-style: none; */
         padding: 0;
         margin-top: 15px;
     }

     .service-block ul li {
         font-size: 16px;
         color: #000;
         margin: 15px;
         margin-bottom: 10px;
         /* margin: 10px; */
     }


     .promo-section {
         background-color: white;
         /* Białe tło */
         /* height: 100vh; */
         padding: 40px 20px;
         box-sizing: border-box;
         text-align: center;
     }

     .promo-bar {
         position: relative;
         background-color: rgb(191, 182, 176);
         /* Szary pasek */
         height: 100px;
         margin: 0 auto 40px;
         display: flex;
         align-items: center;
         justify-content: center;
         text-align: center;
     }

     .promo-icon {
         position: absolute;
         top: -10%;
         transform: translateY(-50%);
         left: 50%;
         /* Możesz dostosować pozycję */
         width: 80px;
         height: 80px;
         background-color: white;
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .promo-icon img {
         width: 100%;
         height: 100%;
     }

     .promo-text {
         font-size: 26px;
         color: white;
         margin-left: 100px;
         /* Odstęp od ikony */
     }

     .promo-blocks {
         display: flex;
         width: 80%;
         margin: auto;
         justify-content: space-around;
         flex-wrap: wrap;
         gap: 20px;
         margin-bottom: 40px;
     }

     .promo-block {
         background-color: white;
         width: 22%;
         padding: 20px;
         border-radius: 10px;
         /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
         text-align: center;
     }

     .promo-block-icon {
         width: 200px;
         height: 200px;
         margin: 0 auto 20px;
         /* background-color: #67aaea; */
         border: 2px solid #007BFF;
         border-radius: 10px;
         display: flex;
         justify-content: center;
         align-items: center;
         /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
     }

     .promo-block-icon img {
         width: 100%;
         height: 100%;

     }

     .promo-block p {
         font-size: 20px;
         color: #000
     }

     .promo-footer {
         margin-top: 20px;
         width: 80%;
         margin: auto;
     }


     .promo-button {
         padding: 10px 20px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }

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

     .promo-footer p {
         font-size: 20px;
         /* color: #666; */
         margin-top: 10px;
         text-align: left;
         line-height: 1.5;
     }

     .promo-grid {
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         /* 3 kolumny */
         grid-template-rows: repeat(2, 1fr);
         /* 2 rzędy */
         gap: 20px;
         /* Odstępy między blokami */
         margin: 40px auto;
         height: 50vh;
         ;
         width: 80%;
         /* Szerokość siatki */

     }

     .promo-item {
         background-color: rgb(237, 242, 252);
         /* background-color: #f9f9f9; */
         border: 1px solid #ddd;
         border-radius: 10px;
         padding: 20px;
         text-align: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         font-weight: 400;
         font-size: 20px;
     }

     .promo-item:not(.promo-item-4) {
         display: flex;
         /* Ustawienie Flexboxa */
         justify-content: center;
         /* Wyśrodkowanie w poziomie */
         align-items: center;
         /* Wyśrodkowanie w pionie */

         display: flex;
         /* Ustawienie Flexboxa */
         justify-content: center;
         /* Wyśrodkowanie w poziomie */
         align-items: center;
         /* Wyśrodkowanie w pionie */
         background-color: rgb(237, 242, 252);
         border: 1px solid #ddd;
         border-radius: 10px;
         padding: 20px;
         text-align: center;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .promo-item-1 {
         grid-column: 1 / 2;
         /* Kolumna 1 */
         grid-row: 1 / 2;
         /* Rząd 1 */
     }

     .promo-item-2 {
         grid-column: 2 / 3;
         /* Kolumna 2 */
         grid-row: 1 / 2;
         /* Rząd 1 */
     }

     .promo-item-3 {
         grid-column: 3 / 4;
         /* Kolumna 3 */
         grid-row: 1 / 3;
         /* Rząd 1 i 2 */
     }

     .promo-item-4 {
         grid-column: 1 / 3;
         /* Kolumna 1 i 2 */
         grid-row: 2 / 3;
         /* Rząd 2 */
     }

     .promo-item-4 p {
         text-align: left;
     }

     .courier-logos {
         display: flex;
         flex-direction: row;
     }

     .courier-logos img {
         max-height: 55px;
         margin: 10px;
     }


     .promo-content {
         width: 80%;
         margin: 40px auto;
         text-align: center;

     }

     .promo-paragraph {
         font-size: 16px;
         color: #333;
         margin-bottom: 20px;
         line-height: 1.5;
         text-align: left;
     }

     .promo-row {
         display: flex;
         justify-content: space-between;
         align-items: center;
         margin-bottom: 20px;
         gap: 20px;
     }

     .promo-row-footer {
         background-color: rgb(237, 242, 252);
         justify-content: space-between;
     }

     .promo-row-footer p {
         padding: 20px;
         font-size: 20px;
         color: #333;
         margin-top: 10px;
         text-align: left;
         line-height: 1.5;
     }

     .promo-column {
         flex: 1;
         text-align: left;
     }

     .promo-column img {
         width: 100%;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .promo-button {
         padding: 10px 20px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }

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


     .serwis-content {
         width: 80%;
         margin: 40px auto;
         text-align: center;
         /* border: 2px solid; */
         /* border-image: linear-gradient(to bottom, blue, green) 1; */
         padding: 20px;
         border-radius: 10px;
     }

     .promo-boxes {
         display: flex;
         width: 80%;
         margin: auto;
         justify-content: space-between;
         gap: 20px;
         margin-top: 20px;
     }

     .promo-box {
         position: relative;
         flex: 1;
         padding: 20px;
         width: 100%;
         text-align: center;
         background-color: white;
         /* Wewnętrzne tło boxa */
         border-radius: 50px;
         /* Zaokrąglone rogi */
         box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

         overflow: hidden;
         /* Ukrywa nadmiar pseudo-elementu */
         z-index: 1;
         /* Ustawia zawartość nad pseudo-elementem */
     }



     .promo-box h3 {
         font-size: 24px;
         margin-bottom: 10px;
         color: #000;
     }

     .promo-box p {
         font-size: 16px;
         margin-bottom: 10px;
         color: #000;
         line-height: 1.5;
     }

     .promo-box ul li {
         font-size: 16px;
         margin-bottom: 10px;
         color: #000;
         line-height: 1.5;
         justify-content: left;
     }

     /* .promo-box button {
            padding: 10px 20px;
            background-color: #67aaea;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        } */

     .promo-box button:hover {
         background-color: #0056b3;
     }


     .promo-new-section {
         width: 80%;
         margin: 40px auto;
         text-align: center;
         background-color: rgb(237, 242, 252);
         padding: 50px;
     }

     .promo-new-paragraph {
         font-size: 18px;
         margin-bottom: 20px;
         color: #333;
     }

     .promo-new-blocks {
         display: flex;
         justify-content: center;
         gap: 20px;
     }

     .promo-new-block {
         width: 30%;
         text-align: center;
         background-color: white;
         padding: 20px;
         border-radius: 20px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .promo-new-icon {
         width: 150px;
         height: 150px;
         margin-bottom: 10px;
         border-radius: 20px;
         border: 2px solid #007BFF;
         margin: 10%;
     }

     .banner-section {
         width: 100%;
         height: 100vh;
         /* Cała wysokość ekranu */
         background: url('/img/o-nas-main-banner.jpg') no-repeat center center/cover;
         /* Obraz w tle */
         display: flex;
         justify-content: center;
         /* Wyśrodkowanie w poziomie */
         align-items: center;
         /* Wyśrodkowanie w pionie */
         text-align: center;
     }

     .banner-section h1 {
         /* font-size: 7rem; */
         font-family: 'Helvetica World', sans-serif;
         font-size: 100px;
         font-weight: normal;
         color: white;
         /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); */
         /* Subtelny cień dla tekstu */
     }


     .two-column-section {
         /* width: 100%; */
         height: 100vh;
         /* Cała wysokość ekranu */
         display: flex;
         justify-content: center;
         align-items: center;
         background-color: #f9f9f9;
         /* Jasne tło */
         box-sizing: border-box;

     }

     .two-column-box {
         width: 80%;
         /* Szerokość boxa */
         display: flex;
         flex-direction: row;
         gap: 0;
         background-color: white;
         padding: 20px;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         /* justify-content: space-between; */

     }

     .left-column,
     .right-column {
         flex: 0 0 50%;
         max-width: 50%;
         width: 50%;
         box-sizing: border-box;
     }

     .left-column {
         flex: 1;
         display: flex;
         flex-direction: column;
         justify-content: center;
     }

     .left-column h2 {
         font-size: 33px;
         margin-bottom: 20px;
         color: #333;
     }

     .left-column p {
         font-size: 16px;
         margin-bottom: 15px;
         color: #555;
         line-height: 1.5;
     }

     .learn-more-button {
         padding: 10px 20px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 5px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
         align-self: flex-start;
     }

     .learn-more-button:hover {
         background-color: #67aaea;
     }

     .right-column {
         flex: 1;
         display: flex;
         justify-content: right;
         align-items: center;
     }

     .right-column img {
         max-width: 70%;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }


     .full-screen-section {
         width: 100%;
         height: 80vh;
         /* Cała wysokość ekranu */
         background: url('/img/o-nas-banner-2.jpg') no-repeat center center/cover;
         /* Obraz w tle */
         display: flex;
         justify-content: center;
         /* Wyśrodkowanie w poziomie */
         align-items: center;
         /* Wyśrodkowanie w pionie */
         position: relative;
     }




     .overlay-box {
         display: flex;
         /* Ustawienie Flexbox */
         flex-direction: column;
         /* Ustawienie elementów w kolumnie */
         justify-content: center;
         /* Wyśrodkowanie w pionie */
         align-items: center;
         /* Wyśrodkowanie w poziomie */
         margin: auto;
         background-color: rgba(255, 255, 255, 0.8);
         /* Półprzezroczyste tło */
         padding: 100px;
         /* Automatyczne wypełnienie */
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         text-align: left;
         width: 70%;
         /* Szerokość boxa */
         height: 80%;
     }

     .overlay-box h2 {
         font-size: 36px;
         font-family: 'Open Sans', sans-serif;
         font-weight: normal;
         margin-bottom: 20px;
         color: #333;
     }

     .overlay-box p {
         font-size: 18px;
         margin-bottom: 15px;
         color: #555;
         line-height: 1.5;
     }



     .full-height-section {
         width: 100%;
         height: 100%;
         /* Cała wysokość ekranu */
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         background-color: #f9f9f9;
         /* Jasne tło */
         padding: 20px;
         box-sizing: border-box;
     }

     .full-height-section .section-title {
         font-size: 36px;
         font-family: 'Open Sans', sans-serif;
         font-weight: normal;
         margin-bottom: 20px;
         color: #333;
     }

     /* .full-height-section p {
        width: 80%;
        font-size: 16px;
        margin-bottom: 20px;
        color: #333;
        text-align: center;
    } */

     .three-column-layout {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: stretch;
         /* Ustawia równą wysokość dla wszystkich kolumn */
         gap: 20px;
         width: 80%;
         /* Szerokość całej sekcji */
     }

     .column {
         flex: 1;
         display: flex;
         height: auto;
         flex-direction: column;
         justify-content: space-between;
         justify-content: flex-start;
         text-align: center;
         /* gap: 15px; */
         background-color: white;
         /* Opcjonalne tło dla kolumn */
         padding: 20px;
         /* Opcjonalne wypełnienie */
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         /* Opcjonalny cień */
         border-radius: 10px;
         /* Opcjonalne zaokrąglenie rogów */
     }

     .column h3 {
         font-size: 22px;
         font-family: 'Inter', sans-serif;
         font-weight: 600;
         margin-bottom: 10px;

     }

     .column img {
         max-width: 100%;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }

     .column p {
         font-family: 'Open Sans', sans-serif;
         font-weight: 400;
         font-size: 14px;
         color: #555;
         line-height: 1.5;
         margin-bottom: 10px;
     }

     .full-height-section-p {
         width: 80%;
         font-size: 20px;
         margin-bottom: 20px;
         color: #333;
         text-align: center;
     }

     .column .learn-more-button {
         margin: 10px auto;
         width: 40%;
         padding: 15px;
         background-color: #67aaea;
         color: white;
         border: none;
         border-radius: 15px;
         font-size: 16px;
         cursor: pointer;
         transition: background-color 0.3s ease;
     }

     .learn-more-button:hover {
         background-color: #edf2fc;
     }



     .icon-section {
         width: 80%;
         margin: 40px auto;
         text-align: center;

     }

     .icon-section-title {
         font-size: 36px;
         font-family: 'Open Sans', sans-serif;
         font-weight: normal;
         margin-bottom: 20px;
         color: #333;
     }

     .icon-row {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         gap: 100px;
         margin-bottom: 20px;
     }

     .icon-box {
         flex: 1;
         background-color: white;
         padding: 20px;
         border-radius: 25px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         text-align: center;
         border: 2px solid #007BFF;
         /* Dodanie obramowania */
     }

     .icon-image {
         width: 100px;
         height: 100px;
         margin-bottom: 10px;
     }

     .icon-box h4 {
         font-size: 20px;
         margin-bottom: 10px;
         color: #67aaea;
     }

     .icon-box p {
         font-size: 16px;
         color: #555;
         line-height: 1.5;
     }

     .icon-section-main {
         background-color: rgb(237, 242, 252);
         padding: 40px;
     }




     .locations-section {

         width: 80%;
         margin: 40px auto;
         text-align: center;
     }

     .locations-title {
         font-size: 36px;
         font-family: 'Open Sans', sans-serif;
         font-weight: normal;
         margin-bottom: 20px;
         color: #333;
     }

     .locations-columns {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         gap: 20px;
         ;
     }

     .location-column {
         flex: 1;
         background-color: white;
         padding: 20px;
         border-radius: 10px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         text-align: left;
     }

     .location-column h3 {
         font-size: 24px;
         margin-bottom: 10px;
         color: #007BFF;
     }

     .location-column p {
         font-size: 16px;
         margin-bottom: 10px;
         color: #555;
         line-height: 1.5;
     }

     .location-column a {
         display: inline-block;
         margin-top: 10px;
         font-size: 16px;
         color: #007BFF;
         text-decoration: none;
         font-weight: bold;
     }

     .location-column a:hover {
         text-decoration: underline;
     }
 }