/* Czcionki Fira Sans */

/* Regular */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400; /* Regular weight */
  src: local('Fira Sans Regular'), local('FiraSans-Regular'),
       url('fonts/FiraSans-Regular.ttf') format('truetype') 
}

/* Italic */
@font-face {
  font-family: 'Fira Sans';
  font-style: italic;
  font-weight: 400; /* Regular weight for italic */
  src: local('Fira Sans Italic'), local('FiraSans-Italic'),
       url('fonts/FiraSans-Italic.ttf') format('truetype')
}

/* Medium */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 500; /* Medium weight */
  src: local('Fira Sans Medium'), local('FiraSans-Medium'),
       url('fonts/FiraSans-Medium.ttf') format('truetype')
}

/* SemiBold */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 600; /* SemiBold weight */
  src: local('Fira Sans SemiBold'), local('FiraSans-SemiBold'),
       url('fonts/FiraSans-SemiBold.ttf') format('truetype')
}

/* Bold */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 700; /* Bold weight */
  src: local('Fira Sans Bold'), local('FiraSans-Bold'),
       url('fonts/FiraSans-Bold.ttf') format('truetype')
}

/* Extra Bold */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 800; /* Extra Bold weight */
  src: local('Fira Sans Extra Bold'), local('FiraSans-ExtraBold'),
       url('fonts/FiraSans-ExtraBold.ttf') format('truetype')
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
	--glowny-niebieski: rgb(0, 70, 129);
	--dodatkowy-niebieski: rgb(0, 45, 94);
	--ciemnoszary: rgb(30, 30, 30);
	--braz: rgb(114, 31, 52);
	--jasnoniebieski: rgb(62, 192, 240);
	--jasnoniebieski-banner: rgb(0, 128, 200);
	--kolor-przycisku: rgb(0, 128, 200);
	--szaretlo: rgb(222, 223, 224);
	--szerokosc: 1400px;
	--szerokosc-wezsza: 1200px;
	--marginesy: 101px;
	--odstepy-sekcji: calc(164px * 0.8);
	--zaokraglenie-zdj: 16px;
	--zaokraglenie-przycisku: 15px;
}

body {
    font-family: "Fira Sans", sans-serif;
	font-weight: 400;
    line-height: 1.6;
    color: black;
}

h2 {
	font-size: 26px;
	line-height: 31px;
	font-weight: 800;
	color: var(--glowny-niebieski);
	margin-bottom: 10px;
}

h2.tytul-sekcji {
	text-align: center;
	margin: 0 0 80px 0;
}

h3 {
	font-size: 18px;
	line-height: 25px;
	font-weight: 800;
	color: var(--glowny-niebieski);
	margin-bottom: 10px;
	margin-top: 10px;
}

span.jasne {
	color: var(--jasnoniebieski);
}

header .gornybanner span.jasne {
	color: var(--jasnoniebieski-banner);
}

span.braz {
	color: var(--braz);
}



header .nawigacja {
	padding: 0 var(--marginesy);
	display: flex;
	gap: 30px;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 151px;
}

header .nawigacja .logo {
	max-width: 260px;
	flex-basis: 260px;
	width: 100%;
	object-fit: contain;
}

header .nawigacja .logo img {
	max-width: 100%;
}

@media (max-width: 1300px) {
	header .nawigacja .wypelniacz  {
		display: none;
	}
}

header .nawigacja nav {
	display: flex;
	flex-direction: row;
	gap: 50px;
}

header .nawigacja nav a {
	text-decoration: none;
	font-weight: 700;
	font-size: 16px;
	color: var(--dodatkowy-niebieski);
	transition: color .2s;
}

header .nawigacja nav a:hover {
	color: var(--braz);
}

header .gornybanner {
	position: relative;
	height: calc(100vh - 151px);
	background: url("img/naglowek.jpg");
	background-size: cover;
	background-position: 90% 20%;
	overflow-x: hidden;
}

header .gornybanner:before {
	content: ' ';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 700px;
	background: linear-gradient(90deg, rgba(229, 227, 227, 1), rgba(229, 227, 227, 1), 90% ,rgba(255, 255, 255, 0));
	opacity: 0.85;
}

header .gornybanner .gornytekst {
	position: absolute;
	left: var(--marginesy);
	top: 50%;
	transform: translatey(-50%);
	font-weight: 700;
	font-size: min(95px, 16vw);
	line-height: min(95px, 16vw);
	color: var(--glowny-niebieski);
}

header .gornybanner .gornytekst .przycisk-ankieta {
	display: inline-block;
	margin-top: 20px;
	color: white;
	background: var(--kolor-przycisku);
	border-radius: var(--zaokraglenie-przycisku);
	padding: 10px 30px;
	font-size: min(33px, 6vw);
	line-height: min(33px, 6vw);
	font-weight: 800; 
	text-decoration: none;
	transition: background .2s;
}

header .gornybanner .gornytekst .przycisk-ankieta:hover {
	background: var(--jasnoniebieski);
}

main section {
	padding: var(--odstepy-sekcji) var(--marginesy);
}

main section.szaretlo {
	background: var(--szaretlo);
}

main section > div {
	max-width: var(--szerokosc);
	margin: 0 auto;
	display: flex;
	flex-direction: row;
}

main section div.tekst_zdj {
	max-width: var(--szerokosc);
	margin: 0 auto;
	gap: var(--odstepy-sekcji);
	align-items: center;
}

main section div.tekst_zdj div.tekst p {
	font-size: 21px;
	color: var(--glowny-niebieski);
	line-height: 34px;
	text-align: justify;
}

main section div.tekst_zdj div.tekst p strong{
	font-size: 26px;
	color: var(--braz);
	line-height: 31px;
}

main section div.tekst_zdj > img {
	width: 400px;
	max-width: 100%;
	height: auto;
	border-radius: var(--zaokraglenie-zdj);
}

main section:has(div.listprezesa) {
	padding: calc(113px * 0.6) var(--marginesy);
}

main section div.listprezesa {
	gap: var(--odstepy-sekcji);
	align-items: center;
}

main section div.listprezesa div.portret {
	position: relative;
	width: 380px;
	height: 380px;
	flex: 0 0 380px;
}

main section div.listprezesa div.portret img {
	width: 100%;
	height: auto;
	border-radius: 100%;
	border: solid 5px var(--glowny-niebieski);
}

main section div.listprezesa div.portret:after {
	content: ' ';
	display: block;
	position: absolute;
	width: calc(100% * 1.05);
	height: calc(100% * 1.05);
	left: 50%;
	top: 50%;
	transform: translatex(-50%) translatey(-50%);
	border-radius: 100%;
	border: solid 5px var(--glowny-niebieski);
}

main section div.listprezesa div.tresclistu p {
	font-size: 13px;
	font-style: italic;
	color: black;
	line-height: 22px;
	margin-bottom: 10px;
	text-align: justify;
}

main section div.listprezesa div.tresclistu p.podpis {
	font-style: normal;
	font-weight: 600;
	font-size: 18px;
	margin-top: 22px;
	margin-bottom: 2px;
	color: var(--glowny-niebieski);
}

main section div.listprezesa div.tresclistu p.stanowisko {
	font-style: normal;
	font-size: 12px;
}

main section div.listprezesa div.tresclistu img.odreczny {
	width: 160px;
	height: auto;
}

main section div.inicjatywy {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 160px;
}

main section div.inicjatywy div.inicjatywa img {
	object-fit: cover;
	width: 100%;
	height: calc(241px * 0.8);
	border-radius: var(--zaokraglenie-zdj);
}

main section div.inicjatywy div.inicjatywa div.opis p {
	font-size: 13px;
	line-height: 25px;
	text-align: justify;
}

main section:has(div.kontakt) {
	padding: calc(143px * 0.6) var(--marginesy);
}

main section div.kontakt {
	justify-content: space-between;
	gap: 80px;
	align-items: center;
}

main section div.kontakt h2 {
	font-size: 34px;
	line-height: 38px;
	margin-bottom: 20px;
}

main section div.kontakt a.przycisk {
	display: inline-block;
	margin-top: 20px;
	color: white;
	background: var(--kolor-przycisku);
	border-radius: var(--zaokraglenie-przycisku);
	padding: 5px 30px;
	font-size: 33px;
	font-weight: 800; 
	text-decoration: none;
	transition: background .2s;
}

main section div.kontakt a.przycisk:hover {
	background: var(--jasnoniebieski);
}

main section div.kontakt > img {
	max-width: min(700px, 60%);
	height: auto;
	border-radius: var(--zaokraglenie-zdj);
	
}

@media (max-width: 980px) {
	* {
		--marginesy: 30px;
		--odstepy-sekcji: calc(120px * 0.8);
	}
	
	header .nawigacja {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}
	
	header .nawigacja img.logo {
		max-width: 300px;
		flex-basis: unset;
	}
	
	header .nawigacja nav a {
		text-align: center;
		font-size: 14px;
	}
	
	header div.gornybanner div.gornytekst {
		/*top: 60px;*/
	}
	
		main section > div {
		flex-direction: column;
	}
	
	main section div.tekst_zdj {
		gap: calc(var(--odstepy-sekcji) * 0.6);
	}
	
	main section div.tekst_zdj div.tekst p {
		font-size: calc(21px * 0.8);
		line-height: calc(34px * 0.8);
	}

	main section div.tekst_zdj div.tekst p strong{
		font-size: calc(26px * 0.8);
		line-height: calc(31px * 0.8);
	}
	
	main section div.listprezesa {
		gap: 60px;
	}
	
	main section div.listprezesa div.portret {
		width: 300px;
		height: 300px;
		flex: 0 0 300px;
	}
	
	main section div.inicjatywy {
		grid-template-columns: 1fr;
		gap: 80px
	}
	
	main section div.kontakt > img {
		max-width: 100%;
	}
}