body{
background: url(images/bgimage.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Ukrywamy przycisk na komputerze */
.menu-toggle {
    display: none;
}
.content {
    background-color: #ffffff;
    width: 100%; /* Zmienione z 1024px */
    max-width: 1024px; /* Zachowa stary wygląd na komputerze */
    height: auto; /* Zmienione z 650px - treść musi się rozwijać w dół */
    margin: auto;
    position: relative; /* Zmienione z absolute, żeby strona nie "pływała" na komórce */
    box-shadow: 0 0 15px -2px #727272;
    overflow: hidden;
}

.header {
    background: url(images/image1.jpg) no-repeat center; 
    background-size: cover; /* Ważne: obrazek tła dopasuje się do szerokości */
    width: 100%;
    height: auto;
    min-height: 250px;
    z-index: 1;
    position: relative;
}

.logo{
width: 180px;
height: 200px;
margin: auto;
position: absolute;
left:0; right:0; /* wyrównanie w poziomie */
z-index: 999;
}
.menu1{
padding-top: 45px !important;
float: left;
}
.menu2{
padding-top: 58px !important;
float: right;
}
.menu2 ul{
list-style: square url("images/sqorange.png");
margin: 0;
padding: 0;
}
.menu2 li{
padding-left: 15px;
margin-bottom: 3px;
margin-top: 3px;
width: 140px;
list-style-position: inside;
background-color: #ffffff;
filter:alpha(opacity=90);
opacity: 0.9;
-moz-opacity:0.9;
}
.menu1 ul{
list-style: square url("images/sqblue.png");
margin: 0;
padding: 0;
}
.menu1 li{
padding-left: 15px;
margin-bottom: 3px;
margin-top: 3px;
width: 280px;
list-style-position: inside;
background-color: #ffffff;
filter:alpha(opacity=90);
opacity: 0.9;
-moz-opacity:0.9;
}
.title-page h1{
font-family: 'Arial Narrow', sans-serif;
font-weight: bold;
font-size: 20px;
letter-spacing: 1px;
position: absolute;
margin: 0;
padding-bottom: 3px;
padding-top: 2px;
text-align: center;
top: 220px;
width: 100%; /* Zamiast 1024px */
box-sizing: border-box; /* Ważne, żeby padding nie rozpychał szerokości */
height: 28px;
color: #007d59;
filter:alpha(opacity=85);
opacity: 0.85;
-moz-opacity:0.85;
border-bottom-style: solid;
border-color: #007d59;
border-width: 1px;
background-color: white;
}
#icon1{
width:10px;
height:10px;
margin-right: 5px;
margin-bottom: 2px;
}
.menu1 a {
padding-left: 8px;
text-decoration: none;
color: #122f4b;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
font-size: 18px;
letter-spacing: -1px;
}
.menu1 li:hover {
filter:alpha(opacity=95);
opacity: 0.95;
-moz-opacity:0.95;
}
.menu1 a:hover {
color: #102b45;
}
.menu2 a {
padding-left: 8px;
text-decoration: none;
color: #3b2606;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity:1;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
font-size: 18px;
letter-spacing: -1px;
}
.menu2 a:hover{
color: #3d280a;
}
.menu2 li:hover {
filter:alpha(opacity=95);
opacity: 0.95;
-moz-opacity:0.95;
}

.main-content, .main-content2 {
    width: 100%;
    max-width: 1024px;
    height: auto;
    display: flex; /* Włącza elastyczny układ */
    flex-wrap: wrap; /* Pozwala elementom przejść do nowej linii na telefonie */
    overflow-y: visible; /* Zapobiega podwójnym paskom przewijania */
}
.text {
    flex: 1; /* Zabierze tyle miejsca, ile potrzebuje (ok. 700px) */
    min-width: 300px; /* Nie pozwoli się zwęzić poniżej tej wartości na małych ekranach */
    padding: 20px;
    text-align: justify;
}
.text h2{
font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 15px;
letter-spacing: 0px;
text-align: justify;
font-weight: normal;
margin-bottom: 13px;
margin-top: 0px;
}
.text p {
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px; /* Oczko mniejszy niż nagłówki h2 */
    /*line-height: 1.6; /* Większy odstęp między liniami dla lepszej czytelności */
    text-align: justify;
    /*color: #333; /* Ciemnoszary, łagodniejszy dla oka niż czysty czarny */
    margin-bottom: 13px; /* Odstęp pod akapitem */
    margin-top: 0px;
}
.text li {
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 5px;
}
.text2 {
    width: 100%;  /*Zajmie całą szerokość dostępnego miejsca */
    padding-top: 20px;
    padding-bottom: 20px;
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 20px; /* Wielkość z Twojego wcześniejszego spana */
    letter-spacing: 2px;
    text-align: center; /* Wyśrodkowanie napisu */
    color: #122f4b; /* Kolor pasujący do menu */
    display: block;
    float: none; /* Czyścimy stary float */
}
.contact {
    margin-top: 20px;
    position: relative; /* Zmienione z absolute */
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /*font-size: 15px;
    text-align: left;  Zmień na left, żeby na komórce lepiej wyglądało pod adresem */
    width: 100%; /* Zajmie całą dostępną szerokość w divie .text */
}
.video-container {
    width: 90%;
    max-width: 800px; /* Nie chcemy, żeby wideo było gigantyczne na komputerze */
    margin: 30px auto; /* Centrowanie i odstęp */
    box-shadow: 0 0 15px -2px #727272;
    background: #000;
    line-height: 0; /* Usuwa zbędne luki pod wideo */
}

.video-container video {
    width: 100%;
    height: auto; /* Wideo samo zachowa swoje proporcje */
    display: block;
}

#pasek{
height: 60px;
}

.map {
    margin-top: 20px;
    padding: 20px;
    flex: 1; /* Mapa zajmie prawą stronę na komputera */
    min-width: 300px; /* Na telefonie przeskoczy pod spód */
    text-align: center;
}

.map img {
    max-width: 100%; /* Zdjęcie mapy nie wyjdzie poza ekran */
    height: auto;
    box-shadow: 0 0 5px 1px #727272;
}

.images {
    height: auto; /* Zmiana z 360px */
    min-width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
	padding:20px
}
.images-r{
padding: 20px;
/*height: 360px; */
}
.imgtxt{
width: 215px;
height: auto;
clear: right;
float: right;
margin-right: 15px;
margin-bottom: 10px;
box-shadow: 0 0 5px 1px #727272;
}
.imgtxt2{
width: 215px;
height: 161px;
margin: 5px;
}
.realizacja-box{
float: left;
width:225px;
height:198px;
margin-left: 12px;
margin-bottom: 10px;
border-style: solid;
border-color: #d0d0d0;
border-width: 1px;
background-color: #f9f9f9;
}
.realizacja-box:hover{
border-color: #676767;
background-color: #f9f9f9;
}
.realizacja-opis{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
font-size: 18px;
color: #122f4b;
letter-spacing: -1px;
text-align: center;
}

@media screen and (max-width: 768px) {
/* 1. Wyśrodkowanie przycisku MENU pod logo */
    .images {
    height: auto; /* Zmiana z 360px */
    min-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
	padding:0px
}
	.menu-toggle {
        display: block;
        margin: 20px auto; /* Centrowanie przycisku w poziomie */
        width: 100%;
        text-align: center;
        cursor: pointer;
        font-family: 'Open Sans', sans-serif;
        color: #007d59;
        position: relative; /* Zmiana z absolute, by był w bloku pod logo */
        right: 0; top: 0;
		font-size: 18px;        /* Tutaj sterujesz wielkością (np. 22px, 24px) */
		padding: 5px 0;        /* Wyższy przycisk, żeby pasował do dużej czcionki */
		/* TŁO I KOLORY - dopasowane do Twojego menu */
        background-color: #007d59; /* Twoja zieleń (jeśli używasz innej, podmień kod hex) */
        color: #ffffff;            /* Biały tekst */
        border-radius: 10px;        /* Delikatne zaokrąglenie, jeśli pasuje do stylu */
        font-family: 'Open Sans', sans-serif;
        font-weight: bold;
        text-transform: uppercase; /* Duże litery jak w menu */
    }

    /* 2. Układanie list menu centralnie */
    .menu1, .menu2 {
        display: none; 
        float: none;      /* Usuwamy pływanie do lewej/prawej */
        width: 100%;
        margin: 0 auto;
        text-align: center; /* Centrowanie tekstu wewnątrz li */
    }

    /* 3. Naprawa szerokości elementów listy */
    .menu1 li, .menu2 li {
        width: 90% !important; /* Na telefonie zajmują całą szerokość */
        margin: 10px 0;
        list-style-position: inside;
		border: solid;
		border-color: #007d59;
		border-width: 5px;
		border-radius: 10px;
    }

    /* 4. Wyśrodkowanie linków */
    .menu1 a, .menu2 a {
        display: block;
        padding: 2px 0;
        font-size: 18px; /* Nieco większe na telefonie dla wygody */
    }

    /* Klasa aktywująca menu */
    .menu-active {
        display: table !important;
        flex-direction: column;
        align-items: center; /* To klucz do wyśrodkowania całego bloku */
    }

    .logo {
        display: block;    /* Zmieniamy z inline na blok, aby marginesy działały */
        float: none;       /* Wyłączamy pływanie do lewej/prawej */
        margin: 0 auto;    /* Magiczne wyśrodkowanie w poziomie */
        max-width: 90%;    /* Zabezpieczenie, żeby logo nie wystawało poza ekran */
        height: auto;
        padding-top: 20px;		/* Opcjonalny odstęp od góry ekranu */
		position: relative;
	}

    .header {
		background: url(images/image1.jpg) no-repeat;
		background-size: inherit;
        text-align: center; /* Dodatkowe zabezpieczenie dla elementów wewnątrz headera */
    }

    .title-page h1 {
        position: relative;
        top: 0;
        width: 100%;
    }

    .imgtxt {
        float: none; /* Zdjęcia pod tekstem, a nie obok */
        display: block;
        margin: 10px auto;
        width: 90%;
        height: auto;
    }
    
    table {
        width: 100% !important; /* Tabele z danymi technicznymi muszą się zwęzić */
        font-size: 12px;
    }
	.contact {
        position: relative;
        left: 0;
        text-align: center; /* Na telefonie lepiej wyśrodkować dane kontaktowe */
    }
    
    .contact td {
        /* display: table-cell !important;  Wymuszamy zachowanie komórki tabeli */
    }

    .map {
        position: relative;
        right: 0;
        width: 100%;
        margin-bottom: 30px;
    }
	
	
}