@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: #007BFF;
       }

       .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: 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;
           /* 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: 40%;
           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: 30px;
           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: 20px;
           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 10%;
           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: auto;
       }

       .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-wspolpraca:hover {
           background-color: rgb(103, 170, 234);
           color: white;
       }



       .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: #67aaea;
           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: #67aaea;
       }



       .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: 100%;
           /* 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: 35px;
           margin-bottom: 60px;
           color: #333;
       }

       .service-container {
           display: flex;
           width: 80%;
           margin: auto;
           flex-direction: column;
           justify-content: space-around;
           /* Rozmieszczenie bloków */
           flex-wrap: wrap;
           /* Zapewnia zawijanie na mniejszych ekranach */
           gap: 20px;
       }


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



       .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;
           flex-direction: column;
           width: 80%;
           margin: auto;
           justify-content: space-around;
           flex-wrap: wrap;
           gap: 20px;
           margin-bottom: 40px;
       }

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

       .promo-block-icon {
           width: 150px;
           height: 150px;
           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: #67aaea;
       }

       .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: 30px auto;
           height: 100%;
           width: 80%;
           /* Szerokość siatki */
           display: flex;
           flex-direction: column;

       }

       .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;
           width: 100%;
           flex-direction: row;
       }

       .courier-logos img {
           width: 30%;
           height: auto;
           margin: 10px;
           display: none;
       }


       .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;
           flex-direction: column;
           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: #67aaea;
       }


       .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;
           flex-direction: column;
           width: 80%;
           margin: auto;
           justify-content: space-between;
           gap: 20px;
           margin-top: 20px;
       }

       .promo-box {
           /* position: relative; */
           flex: 1;
           padding: 20px;
           width: 100%;
           /* height: 1000px; */
           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: #67aaea;
       }


       .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;
           flex-direction: column;
           justify-content: center;
           gap: 20px;
       }

       .promo-new-block {
           width: 100%;
           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: 120px;
           height: 120px;
           margin-bottom: 10px;
           border-radius: 20px;
           border: 2px solid #007BFF;
           margin: 5%;
       }

       #services,
       #proces-rejestracji,
       #warunki-handlowe,
       #warunki-kredytowe,
       #warunki-serwisowe {
           scroll-margin-top: 100px;
           /* Przesunięcie o 100px */
       }
   }

   @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: 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;
           /* 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: 40%;
           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: 30px;
           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: 20px;
           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 10%;
           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: auto;
       }

       .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-wspolpraca:hover {
           background-color: #67aaea;
           color: white;
       }



       .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: #67aaea;
       }



       .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: 100%;
           /* 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: 35px;
           margin-bottom: 60px;
           color: #333;
       }

       .service-container {
           display: flex;
           width: 80%;
           margin: auto;
           flex-direction: column;
           justify-content: space-around;
           /* Rozmieszczenie bloków */
           flex-wrap: wrap;
           /* Zapewnia zawijanie na mniejszych ekranach */
           gap: 20px;
       }


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



       .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;
           flex-direction: column;
           width: 80%;
           margin: auto;
           justify-content: space-around;
           flex-wrap: wrap;
           gap: 20px;
           margin-bottom: 40px;
       }

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

       .promo-block-icon {
           width: 150px;
           height: 150px;
           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: #67aaea;
       }

       .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: 30px auto;
           height: 100%;
           width: 80%;
           /* Szerokość siatki */
           display: flex;
           flex-direction: column;

       }

       .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;
           /* display: block; */
       }


       .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;
           flex-direction: column;
           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: #67aaea;
       }


       .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;
           flex-direction: column;
           width: 100%;
           margin: auto;
           justify-content: space-between;
           gap: 20px;
           margin-top: 20px;
       }

       .promo-box {
           position: relative;
           flex: 1;
           padding: 20px;
           width: 100%;
           height: 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: #67aaea;
       }


       .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;
           flex-direction: column;
           justify-content: center;
           gap: 20px;
       }

       .promo-new-block {
           width: 100%;
           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: 120px;
           height: 120px;
           margin-bottom: 10px;
           border-radius: 20px;
           border: 2px solid #007BFF;
           margin: 5%;
       }

       #services,
       #proces-rejestracji,
       #warunki-handlowe,
       #warunki-kredytowe,
       #warunki-serwisowe {
           scroll-margin-top: 100px;
           /* Przesunięcie o 100px */
       }
   }


   @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: 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;
           /* 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: 40%;
           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: 30px;
           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: 20px;
           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 10%;
           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: auto;
       }

       .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-wspolpraca:hover {
           background-color: #67aaea;
           color: white;
       }



       .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: #67aaea;
       }



       .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: 35px;
           margin-bottom: 60px;
           color: #333;
       }

       .service-container {
           display: flex;
           width: 80%;
           margin: auto;
           flex-direction: column;
           justify-content: space-around;
           /* Rozmieszczenie bloków */
           flex-wrap: wrap;
           /* Zapewnia zawijanie na mniejszych ekranach */
           gap: 20px;
       }


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



       .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;
           flex-direction: column;
           width: 80%;
           margin: auto;
           justify-content: space-around;
           flex-wrap: wrap;
           gap: 20px;
           margin-bottom: 40px;
       }

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

       .promo-block-icon {
           width: 150px;
           height: 150px;
           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: #67aaea;
       }

       .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: 30px auto;
           height: 100%;
           width: 80%;
           /* Szerokość siatki */
           display: flex;
           flex-direction: column;

       }

       .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;
           /* display: block; */
       }


       .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;
           flex-direction: column;
           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: #67aaea;
       }


       .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;
           flex-direction: column;
           width: 80%;
           height: 80vh;
           margin: auto;
           justify-content: space-between;
           gap: 20px;
           margin-top: 20px;
       }

       .promo-box {
           position: relative;
           flex: 1;
           padding: 20px;
           width: 100%;
           height: 80%;
           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: #67aaea;
       }


       .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;
           flex-direction: column;
           justify-content: center;
           gap: 20px;
       }

       .promo-new-block {
           width: 100%;
           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: 120px;
           height: 120px;
           margin-bottom: 10px;
           border-radius: 20px;
           border: 2px solid #007BFF;
           margin: 5%;
       }

       #services,
       #proces-rejestracji,
       #warunki-handlowe,
       #warunki-kredytowe,
       #warunki-serwisowe {
           scroll-margin-top: 100px;
           /* Przesunięcie o 100px */
       }
   }

   @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;
           font-size: 18px;
           padding: 5px 10px;
           border-radius: 5px;
           /* 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 {
           font-family: 'Open Sans', sans-serif;
           font-weight: 700;
           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-family: 'Open Sans', sans-serif;
           font-weight: 400;
           font-size: 26px;
           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 10%;
           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: 30px;
       }

       .more-button-wspolpraca {
           position: absolute;
           /* Pozycjonowanie absolutne */
           bottom: 30px;
           /* 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-wspolpraca:hover,
       .more-button:hover {
           background-color: #67aaea;
           color: white;
       }




       .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: #67aaea;
       }



       .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: 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: 45px;
           font-family: 'Open Sans', sans-serif;
           font-weight: 500;
           margin-bottom: 80px;
           color: #333;
       }

       .service-container {
           display: flex;
           flex-direction: row;
           width: 90%;

           margin: auto;
           font-family: 'Open Sans', sans-serif;
           font-weight: 700;
           font-size: 40px;
           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: 520px;
           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 {
           font-family: 'Inter', sans-serif;
           margin-top: 100px;
           font-size: 17px;
           font-weight: 700;
           color: #333;
       }

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

       .service-block ul li {
           font-family: 'Inter', sans-serif;
           font-weight: 400;
           font-size: 15px;
           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-family: 'Open Sans', sans-serif;
           font-weight: 400;
           font-size: 26px;
           color: white;
           margin-left: 100px;
       }

       .promo-blocks {
           display: flex;
           flex-direction: row;
           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,
       .promo-footer p {
           font-family: 'Open Sans', sans-serif;
           font-weight: 400;
           font-size: 16px;
           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: #67aaea;
       }

       .promo-footer p {
           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;
           width: 35%;
           height: 100px;
           flex-direction: row;
       }

       .courier-logos img {
           width: 100%;
           height: 100%;
           margin: 10px;
           display: block;
       }

       .courier-logos img {
           flex: 1 1 0;
           height: 80px;
           width: auto;
           max-width: 100%;
           object-fit: contain;
           display: block;
       }


       .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;
           flex-direction: row;
           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 ul li,
       .promo-column p {
           margin: 0px 20px;
           font-size: 20px;
       }

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

       .promo-column h3 {
           margin-bottom: 10px;
       }

       .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: #67aaea;
       }


       .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;
           flex-direction: row;
           width: 80%;
           height: 80%;
           margin: auto;
           justify-content: space-between;
           gap: 20px;
           margin-top: 20px;
       }

       .promo-box {
           position: relative;
           flex: 1;
           padding: 20px;
           width: 100%;
           height: 500px;
           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;
           list-style: none;
       }

       /* .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: #67aaea;
       }


       .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;
           flex-direction: row;
           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-block p {
           font-size: 20px;
           ;
       }

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

       #services,
       #proces-rejestracji,
       #warunki-handlowe,
       #warunki-kredytowe,
       #warunki-serwisowe {
           scroll-margin-top: 100px;
           /* Przesunięcie o 100px */
       }
   }