﻿* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Inter Medium (normalna grubość) */
@font-face {
	font-family: 'Inter';
	src: url('./fonts/Inter_28pt-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

/* Inter Bold (pogrubiona) */
@font-face {
	font-family: 'Inter';
	src: url('./fonts/Inter_28pt-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}

:root {
	--fontPrimary: 'Open Sans', sans-serif;
	--fontSecondary: 'Inter', Arial, sans-serif;

	--fontLarge: 40px;
	--fontBig: 36px;
	--fontRegular: 24px;
	--fontMedium: 20px;
	--fontSmall: 16px;
	--fontExtraSmall: 14px;

	--primary: #0f5484;
	--primaryHover: #0d3262;
	--info: #8bd2f5;
}

html {
	font-size: 62.5%;
}

body {
	font-family: var(--fontSecondary);
	font-weight: 500; /* użyje Inter_28pt-Medium */
}

p,
li {
	margin: 0;
	font-size: var(--fontSmall);
	font-family: var(--fontSecondary);
}

footer p,
li {
	font-weight: normal;
}

.text-info {
	color: #8bd2f5;
}

.text-primary {
	color: var(--primary) !important;
}

.btn {
	min-width: 258px;
	line-height: 41px;
	border-radius: 15px;
	font-size: var(--fontExtraSmall);
	font-weight: 600;
	transition: 0.4s;
}

.btn-secondary {
	color: black !important;
	background-color: white !important;
}

.btn-secondary:hover {
	color: white !important;
	background-color: black !important;
}

.btn-primary {
	background: var(--primary);
}

.btn-primary:hover {
	background: var(--primaryHover);
}

.ktIconMain {
	width: 130px;
	height: 130px;
}

.ktWrapper {
	position: relative;
	padding: 6rem 1rem;
	max-width: 425px;
	margin: 0 20px;
}

.ktCircle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 300px;
	height: 300px;
	margin-top: 40px;
	transform: translate(-50%, -50%);
	background-color: #fbfbf7;
	border-radius: 50%;
	z-index: -1;
}

.ktHeader {
	padding-top: 50px;
	width: 100%;
	height: 670px;
	background-image: url('./images/tlo.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

.ktLink {
	color: white;
	transition: color 0.3s;
}

	.ktLink:hover {
		color: black;
	}


/* ---------- BOX 1 ---------- */
.ktBoxTop {
	background: rgba(255, 255, 255, 0.95);
	padding: 25px 45px;
	margin: 0 20px;
	border-radius: 24px;
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18), 0 25px 55px rgba(0, 0, 0, 0.12);
}

.ktBoxTop h2 span {
	color: #54beea;
}

/* ---------- BOX 2 (NIEBIESKI, ZAOKRĄGLONY) ---------- */
.ktBoxBottom {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 25px;
	margin: 0 20px;
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18), 0 25px 55px rgba(0, 0, 0, 0.12);
}

.ktTitle {
	background: #0a4a7f;
	color: #fff;
	padding: 30px 45px;
	border-start-end-radius: 20px;
	border-start-start-radius: 20px;
	font-size: 20px;
}

.ktBoxBottomPadding {
	padding: 30px 45px;
}

.ktBoxBottom p {
	font-size: 16px;
	color: #222;
	margin-bottom: 15px;
}

.ktPaddingVetical {
	padding: 60px 0;
}

.ktPaddingVeticalBig {
	padding: 160px 0 60px;
}

.ktLargeText {
	font-size: var(--fontLarge);
}

.ktBigText {
	font-size: var(--fontBig);
}

.ktRegularText {
	font-size: var(--fontRegular);
}

.ktMediumText {
	font-size: var(--fontMedium);
}

.ktSmallText {
	font-size: var(--fontSmall);
}

.ktExtraSmallText {
	font-size: var(--fontExtraSmall);
}

.ktFontFamilyPrimary {
	font-family: var(--fontPrimary);
}

.ktFontFamilySecondary {
	font-family: var(--fontSecondary);
}

.ktSecondColor {
	background-color: #0f5484;
}

.ktMaxWidth {
	width: 100%;
	max-width: 1200px;
}

.ktSocial {
	max-width: 50px;
	height: auto;
}

@media (max-width: 992px) {
	.ktHeader {
		height: auto;
		min-height: 670px;
		padding-top: 30px;
		padding-bottom: 50px;
		background-size: cover;
		background-position: top center;
	}

	.ktPaddingVeticalBig {
		padding: 60px 0 60px;
	}
}

@media (max-width: 768px) {
	:root {
		--fontLarge: 32px;
		--fontBig: 24px;
		--fontRegular: 20px;
		--fontMedium: 16px;
		--fontSmall: 14px;
		--fontExtraSmall: 12px;
	}

	.ktBoxTop {
		padding: 15px 25px;
		margin: 0 20px;
	}

	.ktIconMain {
		width: 100px;
		height: 100px;
	}

	.ktTitle {
		padding: 15px 25px;
	}

	.ktBoxBottomPadding {
		padding: 15px 25px;
	}
}

@media (max-width: 568px) {
	.ktBoxTop {
		padding: 15px;
		margin: 0 10px;
	}

	.ktTitle {
		padding: 15px;
	}

	.ktBoxBottomPadding {
		padding: 15px;
	}

	.ktBoxBottom {
		margin: 0 10px;
	}
}
