body {
		font-family: 12px Montserrat, sans-serif;
		background-color: #fff; 
		padding: 10px;
		margin: 10px;
		border-radius: 5px;
		border: 2px solid #f4f4f4;
		-moz-box-shadow: 0px 0px 12px #f4f4f4;
		-webkit-box-shadow: 0px 0px 12px #f4f4f4;
		box-shadow: 0px 0px 12px #f4f4f4;
	}

	header  { width: 100%;  height: auto; padding-bottom: 10px; }
	section { 
		width: 100%;
		display: block;
		margin: 0 auto;
	}
	footer  { width: 100%; height: auto; border-top: 1px solid lightgray; }

	p { font: 12px Montserrat, sans-serif; color: black; text-align: right; }
	textarea { font: 14px Montserrat, sans-serif; }

	.arrow {
		display: block;
		width: fit-content;
		max-width: 90%;          /* Zapobiega wychodzeniu poza ekran */
		margin: 16px auto;       /* Auto = margines z lewej i prawej + odstęp góra/dół */
		background: #3498db;
		color: white;
		padding: 10px 16px;
		font-size: 18px;
		text-align: center;
		border-radius: 6px;
		white-space: normal;     /* <<< POZWALA NA ZAWIJANIE TEKSTU */
		word-wrap: break-word;   /* <<< Łamie bardzo długie słowa, np. bez spacji */
		line-height: 1.4;
		box-sizing: border-box;
	}

	h1, h2 {
		font-size: 14px;
		margin: 5px;
		padding: 0;
		margin-left: 15px;
	}

	p {
		font-size: 14px;
		margin: 5px; 
		text-align: left;
	}

	section pre {
		clear: both;
		font-family: Montserrat, sans-serif;
		white-space: normal;
	  
		display: flex;
		width: fit-content;
		
		width: 60%;
		margin: 2em auto;
		line-height: 2em;
		text-indent: 1.5em;
		text-align: justify;
	}

	.noIdent {
		font-family: Montserrat, sans-serif;
		font-size: 16px;
		line-height: 1.8;

		text-indent: 0;
		white-space: normal;
		width: 60%;
		margin: 0 auto;
	}

	.noSelect {
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
	}

	.floatL {
		float: left;
	}

	.clear {
		clear: both;
	}

	/****************************************************************/
	/*                        article                               */
	/****************************************************************/

	.article-content {
		margin: 15px auto;
		padding: 10px;
		width: fit-content;
		text-align: center;
	}

	.article-content form {
		text-align: left;
		padding-bottom: 20px;
	}

	.article-title {
		margin: 5px;
		display: inline-block;
		vertical-align: bottom;
	}

	.article-column-2 {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
	}

	.article-column-4, .article-column {
		-webkit-column-count: 4;
		-moz-column-count: 4;
		column-count: 4;
	}

	.article-column img {
		display: inline-block;
		vertical-align: top;
		margin-bottom: 35px;
		max-width: 100%; 
		width: 100%;
	}

	.article-column img:hover {
		-moz-box-shadow: 0px 0px 2px #000;
		-webkit-box-shadow: 0px 0px 2px #000;
		box-shadow: 0px 0px 2px #000;
	}

	.article-title h4 {
		width: 200px;
		margin: 4px;
		padding: 0 10px;
		text-align: center;
	}

	.article-title p {
		margin: 3px;
		text-align: center;
		width: 200px;
		background-color: #3498db; 
		padding: 10px; 
		color: white; 
		border-radius: 3px;
		font-size: 14px;
		height: 17px;
	}

	@media only screen and (max-width: 1023px) {
		.article-column {
			-webkit-column-count: 3;
			-moz-column-count: 3;
			column-count: 3;
		}
		
		section pre {
			width: 80%;
		}
		
		.noIdent {
			width: 80%;
		}
	}

	@media only screen and (max-width: 720px) {
		.article-column {
			-webkit-column-count: 2;
			-moz-column-count: 2;
			column-count: 2;
		}

		.article-title p {
			width: auto;
		}
		
		section pre {
			width: 90%;
		}
		
		.noIdent {
			width: 90%;
		}
	}


	@media only screen and (max-width: 480px) {
		
		section {
			margin: 0 auto;
            padding-top: 48px;			
		}
		
		.article-content{
			width: auto;
			margin: 0 auto;
		}
		
		.article-column {
			-webkit-column-count: 1;
			-moz-column-count: 1;
			column-count: 1;
			margin: 0px;
			text-align: center;
		}
		
		.article-title h4 {
			width: auto;
		}
		
		.article-title p {
			width: 90%;
			font-size: 16px;
			margin: 5px auto;
		} 
		
		.sendBTN {
			width: 100%;
		}
	}

	/****************************************************************/
	/*                  Contact form                                */
	/****************************************************************/

	input[type=text], input[type=email], select, textarea {
		width: 100%;
		padding: 12px;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
		margin-top: 6px;
		margin-bottom: 16px;
		resize: vertical;
	}

	input[type=submit] {
		background-color: #4a4a4a;
		color: white;
		padding: 12px 20px;
		border: none;
		border-radius: 4px;
		cursor: pointer;
	}

	.contact {
		padding: 50px 5%;
	}

	/****************************************************************/
	/*                        form validate                         */
	/****************************************************************/

	:root {
		--color-main-red: rgb(230, 0, 0);
		--color-main-green: rgb(95, 255, 143);
	}

	form input,textarea {
		border: 1px solid lightgray;
		outline: none;
	}

	form input:invalid:focus, textarea:invalid:focus {
		border-bottom-color: var(--color-main-red);
		box-shadow: 0 2px 0 0 var(--color-main-red);
	}

	form input:not(:invalid):focus, textarea:not(:invalid):focus {
		border-bottom-color: var(--color-main-green);
		box-shadow: 0 2px 0 0 var(--color-main-green);
	}

	/****************************************************************/
	/*                  Language naviation                          */
	/****************************************************************/

	.langnav {
		text-align: center;
		overflow: hidden;
		margin: 0 auto;
		display: flex;
		width: fit-content;
		text-align: center;
	}

	.langnav a {
		float: left;
		display: block;
		color: #606060;
		text-align: center;
		padding: 5px 16px;
		text-decoration: none;
		font-size: 14px;
		border-radius: 3px;
		text-align: center;
	}

	.langnav a:hover {
		background-color: #3498db;
		color: white;
	} 

	/****************************************************************/
	/*                  Main naviation                              */
	/****************************************************************/

	.topnav {
		display: flex;		
		overflow: hidden;
		position: relative;
		width: 100%;
		justify-content: center; /* zamiast center */
		align-items: center;
	}

	.topnav a {
		font-weight: 100;
		justify-content: center; /* WYŚRODKOWANIE */
		float: left;
		display: flex;
		color: #404040;
		text-align: center;
		padding: 10px 8px;
		text-decoration: none;
		font-size: 15px;
		border-radius: 3px;
	}

	.topnav .submenu-arrow {
		display: flex;
		height: 1.2em;
		margin: 10px auto;
		font-size: 16px;
	}

	.topnav .active {
		color: #3498db;
	} 

	.topnav a:hover {
		background-color: #3498db;
		color: white;
	}

	.topnav .icon {
		background: #3498db;          /* Czarny przycisk hamburgera */
		color: white;               /* Kolor ikony (np. ☰) */
		display: none;             /* Upewnij się, że to blok (np. <span>) */
		position: fixed;         /* Przypnij do rogu */
		right: 0px;                   /* Odległość od prawej krawędzi */
		top: 0;                     /* Odległość od górnej krawędzi */
		float: right;
		font-size: 24px;
		padding: 4px 10px;
		cursor: pointer;
		z-index: 1001;
	}
	
.mobile-menu {
	display: none;
	flex-direction: column;
	width: 100%;
	text-decoration: none;
	color: #111;
	background-color: #fff;
	z-index: 1000;

	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;           /* zajmuje cały ekran w pionie */
	overflow-y: auto;        /* umożliwia przewijanie */
}
	
	.mobile-menu.open {
	    display: flex;
	}

	@media screen and (max-width: 650px) 
	{	
		body {
			font-family: Montserrat, sans-serif;
			padding: 0;
			margin: 0;
			border: none;
			border-radius: 0;
			box-shadow: none;
		}	
		
		.topnav {
			overflow: hidden;
			position: relative;
			width: 100%;
		}
		
		.topnav a,
		.topnav .icon {
			height: 48px;               /* ustalona wysokość */
			line-height: 48px;          /* centrowanie tekstu/ikony */
			padding: 0 16px;            /* poziome odstępy */
			display: flex;
			align-items: center;
		}
		
		.topnav.responsive { position: relative; }
		.topnav.responsive .icon {
			position: absolute;
			right: 0;
			top: 0;
		}
		.topnav.responsive a {
			float: none;
			display: block;
			text-align: left;
			color: #333;
			
		}
		
		.mobile-menu.open {
		  display: flex;
		}
		
		.desktop-menu {
			display: none;
		}
		
		.topnav .icon {
			display: flex; 
		}
	  
		.topnav.responsive a:hover {
			float: none;
			display: block;
			text-align: left;
			background-color: #3498db;
			color: white;
		}
		
		.mobile-menu .sub-menu {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			width: 100%;
			padding-left: 1em;
		}
		
		.mobile-menu a {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			width: 100%;
			padding-left: 1em;
		}		
		
		.mobile-menu .sub-menu a {
			width: 100%;
			padding: 8px 16px;
			box-sizing: border-box;
		}
		
		article {
			padding: 0;
		}

		.article-row {
			padding: 15px;
			display: flex;
			width: fit-content;
			text-align: center;
			margin: 0 auto;
		}
		
		.article-title {
			display: block;
			height: auto; 
			padding-bottom: 10px;
		}
		
		.langnav a {
			font-size: 18px;
		}
	}

	.sub-menu {
		display: flex;                /* Ustawienie Flexboxa */
		justify-content: center;      /* Wyśrodkowanie w poziomie */
		align-items: center;          /* Wyśrodkowanie w pionie (opcjonalnie) */
		width: 100%;                  /* Upewnij się, że zajmuje całą szerokość */
		max-width: 100%;              /* Zapobiega zawężeniu przez fit-content */
		flex-wrap: wrap;              /* Zawijanie do nowej linii */
		column-gap: 16px; 			  /* poziomo */
		row-gap: 4px;                 /* pionowo – zmień wedle potrzeb */                    
		margin: 0 auto;               /* Centrum, jeśli szerokość byłaby mniejsza */
		box-sizing: border-box;       /* Padding nie zwiększa szerokości */
	}
	
	.sub-menu a {
		padding: 10px 8px;              
	}
	
	.main-menu {
		display: flex;
		justify-content: center;  /* Wyśrodkowanie poziome */
		align-items: center;      /* (opcjonalnie) pionowe wyśrodkowanie */
		flex-wrap: wrap;          /* Zawijanie linków jeśli nie mieszczą się w jednej linii */
		column-gap: 16px; 			  /* poziomo */
		row-gap: 4px;                 /* pionowo – zmień wedle potrzeb */                    
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		box-sizing: border-box;

	}

	/****************************************************************/
	/*                  Footer                                      */
	/****************************************************************/

	.footnav {
		color: gray;
		font-size: 14px;
		margin: 0 auto;
		display: flex;
		width: fit-content;
		text-align: center;
	}

	.footer-col {
		width: auto;
		display: inline-table;
		padding: 10px 12px;
		vertical-align: top;
		height: auto;
	}

	.footer-col a {
		border-radius: 3px;
	}

	.footnav p {
		margin-bottom: 0;
		color: gray;
	}

	.footnav a {
		font-weight: 600;
		float: left;
		display: block;
		text-align: left;
		text-decoration: none;
		color: gray;
		padding: 3px;
	}

	.footnav a:hover {
		background-color: #3498db;
		color: white;
		font-weight: 600;
	}

	.erp a {
		padding: 0;
		margin: 0;	
		color: gray;
		padding: 6px;
	}

	.erp a:hover {
		background-color: #3498db;
		color: white;
	} 

	.footnav h3 {
		position: relative;
		margin-bottom: 10px;
		padding: 5px;
		font-size: 16px;
		border-bottom : 1px solid lightgray;
		text-align: left;
	}

	.footnav .avatar {
		-moz-box-shadow: 0px 0px 0px #000;
		-webkit-box-shadow: 0px 0px 0px #000;
		box-shadow: 0px 0px 0px #000;
		width: 200px; 
		height: 200px;
		border: 4px solid #3498db;
		border-radius: 50%;
	}

	.footnav-social a {
		padding: 5px 10px;
		font-size: 36px;
		border-radius: 3px;
	}

	.footnav-menu a {
		padding-left: 5px;
		font-size: 11px;
		border-radius: 3px;
	}

	.copyright {
		color: gray;
		text-align: center;
		padding: 5px;
		border-top: 1px solid lightgray;
	}

	.copyright span {
		white-space: nowrap;
		display: inline-block;
	}

	@media screen and (max-width: 480px) {
		
		.footnav {
			display: flex;
			font-size: 17px;
		}
		
		.footer-col h3 {
			text-align: center;
			width: 100%;
			margin: 0;
			padding: 5px 10px;
			margin: 5px;
		}
		
		.footer-col p {
			text-align: center;
			width: 100%;
		}
		
		.footnav-menu a {
			text-align: center;
			width: 100%;
			margin: 0;
			padding: 10px;
		}
	}

	/****************************************************************/
	/*                  <a>                                         */
	/****************************************************************/

	.alink {
		color: gray;
		font-family: Montserrat, sans-serif;
		font-size: 16px;
	}

	.alink:hover {
		color: black;
	}

	a {
		color: #fff;
	}

	a:link {
		text-decoration: none;
	}

	a:hover {
		text-decoration: none;
		color: #000; 
	}

	a:hover::before {
		text-decoration: none;
		background: red; 
	}

	p .arrow {
		font-size: 14px;
		position: static;
		top: 0;
		left: 0;
		padding: 0;
		margin: 0;
		float: left;
	}

	.gallery {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		position: relative;
	}

	.gallery a {
		width: 270px;
		height: 205px;
		position: relative; /* Ustaw linki na pozycję względną */
	}

	.gallery img {
		width: 100%;
		max-width: 270px;
		height: auto;
		border-radius: 5px;
		transition: filter 0.3s ease-in-out; /* Dodaj przejście dla przyciemniania obrazu */
	}

	.gallery img:hover {
		filter: brightness(30%); /* Przyciemnij obraz po najechaniu myszką */
	}

	.description {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%; /* Ustawienie szerokości opisu na 100% szerokości obrazu */
		height: 100%; /* Ustawienie wysokości opisu na 100% wysokości obrazu */
		padding: 10px;
		border-radius: 5px;
		background-color: rgba(0, 0, 0, 0.7);
		color: white;
		opacity: 0;
		transition: opacity 0.3s ease-in-out;
		box-sizing: border-box; /* Upewnij się, że padding nie powiększa wymiarów opisu */
	}

	.gallery a:hover .description {
		opacity: 1;
	}


	<style>
	  #svg_erp {
		width: 500px;
		height: 200px;
		margin: 2em auto;
		display: block;
	  }
	  
	  .svg_text {
		font-family: Montserrat, sans-serif;
		font-size: 10px;
		fill: gray;
		white-space: normal;
		transition: fill 0.3s ease; /* Dodanie płynnego przejścia dla zmiany koloru */
	  }
	  
	  #gear_1 {
		width: 100px;
		height: 100px;
		fill: #ececec;
		transition: fill 0.3s ease; /* Dodanie płynnego przejścia dla zmiany koloru */
	  }
	  
	  #gear_2 {
		width: 200px;
		height: 100px;
		fill: #ececec;
		transition: fill 0.3s ease; /* Dodanie płynnego przejścia dla zmiany koloru */
	  }
	  
	  .greyPolygon {
		fill: gray;
		stroke: gray;
		stroke-width: 1;
		border-radius: 3px;
		transition: fill 0.3s ease, stroke 0.3s ease; /* Dodanie płynnego przejścia dla zmiany koloru */
	  }

	  .greyPolygon:hover {
		fill: lightgray; /* Zmiana koloru po najechaniu myszką */
		stroke: lightgray; /* Zmiana koloru po najechaniu myszką */
	  }

	  /* Dodanie zmiany koloru na niebieski po najechaniu na rect_1, rect_2, rect_3 */
	  #rect_1:hover,
	  #rect_2:hover,
	  #rect_3:hover {
		stroke: black;
		
	  }
	 
	/* svg chart */ 

	/* Styl kontenera */
	.svg-container {
		position: absolute; /* Ustawiamy pozycję absolutną, aby dokładnie pokrywało SVG */
		top: 0;
		left: 0;
		width: 400px; /* Szerokość SVG */
		height: 170px; /* Wysokość SVG */
	}

	/* Styl hiperłącza */
	.hover-link {
		position: absolute; /* Ustawiamy pozycję absolutną, aby dokładnie pokrywało SVG */
		top: 0;
		left: 0;
		width: 100%; /* Pełna szerokość kontenera */
		height: 100%; /* Pełna wysokość kontenera */
		text-decoration: none;
		cursor: pointer;
	}

	/* Styl tekstu wewnątrz hiperłącza */
	.link-text {
		position: absolute; /* Ustawiamy pozycję absolutną, aby tekst dokładnie pokrywał się z hiperłączem */
		top: 30%; /* Ustawiamy na środku pionowo */
		left: 30%; /* Ustawiamy na środku poziomo */
		transform: translate(-50%, -50%); /* Wyśrodkowujemy tekst */
		font: 12px Montserrat, sans-serif;
		font-weight: normal;
		color: gray; /* Domyślny kolor tekstu */
		font-family: Arial, sans-serif;
		font-size: 16px;
		font-weight: bold;
	}

	/* Zmiana koloru tekstu po najechaniu */
	.hover-link:hover .link-text {
		color: #3498db;
	}