:root {
	/* Kolory */
	--color-background: #050a26;
	--color-white: #ffffff;
	--color-box-background: rgba(28, 48, 113, 0.2);
	--color-box-shadow: rgba(0, 12, 23, 0.6);

	/* Style boxów */
	--border-radius-box: 16px;
	--padding-box: 32px;
	--gap-wrapper: 32px;
	--margin-title-to-box: 16px;

	/* Font sizes z clamp() */
	--font-h1: clamp(2rem, 4vw, 2.8125rem); /* min 32px, preferowane 4% szerokości, max 45px */
	--font-h2: clamp(1.75rem, 3vw, 2.3125rem); /* min 28px, preferowane 3% szerokości, max 37px */
	--font-h3: clamp(1.5rem, 2.5vw, 1.625rem); /* min 24px, preferowane 2.5% szerokości, max 26px */
	--font-h4: clamp(1.25rem, 2vw, 1.375rem); /* min 20px, preferowane 2% szerokości, max 22px */
	--font-p: clamp(0.875rem, 1.5vw, 1rem); /* min 14px, preferowane 1.5% szerokości, max 16px */
}

body {
	background-color: var(--color-background);
	color: var(--color-white);
	margin: 0;
	padding: 0;
	background-image: url('../../img/main/niebieski_2\ 1.png');
	background-position: bottom right;
	background-repeat: no-repeat;
	background-size: contain;
	position: relative;
}

h1 {
	font-size: var(--font-h1);
	font-weight: 600;
}

h2 {
	font-size: var(--font-h2);
	font-weight: 600;
	margin-bottom: 0px;
}

h3 {
	font-size: var(--font-h3);
	font-weight: 400;
}

h4 {
	font-size: var(--font-h4);
	font-weight: 600;
}

p {
	font-size: var(--font-p);
	color: var(--color-white);
}

.flare {
	position: absolute;
	bottom: 0;
}

.strong {
	font-weight: 600;
}

.header-section {
	background-image: url('../../img/main/top.jpg');
	background-size: cover;
	background-position: center right;
	height: 640px;
	display: flex;
	align-items: center;
}

.header-section h2 {
	font-weight: 400;
}

.x-kom {
	height: 32px;
	transition: 0.3s cubic-bezier(0.31, 1.11, 0.99, 1.01);
}

.x-kom:hover {
	opacity: 0.9;
}

.txt-wrapper {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: start;
}

.steps-section {
	padding: 80px 0;
}

.section-title h2 {
	font-size: 2.3125rem; /* 37px */
	font-weight: 600;
	text-align: center;
	margin-bottom: 48px;
}

.steps-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap-wrapper);
	justify-content: center;
}

.step {
	flex: 1 1 calc(33.333% - var(--gap-wrapper)); /* Desktop: trzy kroki w rzędzie */
	max-width: calc(33.333% - var(--gap-wrapper));
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.step-title {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 64px;
}

.step-title img {
	width: 40px;
	height: 40px;
}

.step-title h4 {
	font-size: 1.375rem; /* 22px */
	font-weight: 600;
	color: var(--color-white);
	margin: 0;
}

.step-box {
	background: var(--color-box-background);
	box-shadow: 0px 30px 40px 0px var(--color-box-shadow);
	border-radius: var(--border-radius-box);
	padding: var(--padding-box);
	margin-top: var(--margin-title-to-box);
	width: 100%;
	height: 100%;
}

.step-box .strong {
	font-size: 1rem; /* 16px */
	font-weight: 600;
	margin-bottom: 16px;
	display: block;
}

.icon-box {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}

.icon-box img {
	width: 28px;
	height: auto;
}

.icon-box p {
	font-size: 1rem; /* 16px */
	margin: 0;
}

.mb-none {
	margin-bottom: 0px;
}

/* Responsywność */
.gift-container {
	padding-bottom: 80px;
	position: relative;
}

.gift-container .gfx {
	position: absolute;
	right: 10%;
	top: 10%;
	animation: float 3s ease-in-out infinite;
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-10px);
	}
	100% {
		transform: translatey(0px);
	}
}

.section-title h2 {
	font-size: var(--font-h2);
	font-weight: 600;
	text-align: center;
	margin-bottom: 48px;
}

.gift-wrapper {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	align-items: center;
	gap: 64px; /* Desktop i tablet */
	flex-wrap: wrap; /* Pozwala na przejście do kolumny na mobile */
}

.gift-wrapper img {
	flex: 1 1 45%; /* Zmniejszamy szerokość kolumny obrazka */
	max-width: 45%; /* Obrazek zajmuje 45% szerokości kontenera */
	border-radius: 16px; /* Zaokrąglone rogi obrazka */
	object-fit: cover;
	max-width: 512px;
	box-shadow: 0px 30px 40px 0px var(--color-box-shadow);
}

.gift-txt {
	flex: 1 1 45%; /* Zmniejszamy szerokość kolumny tekstu */
	max-width: 45%; /* Tekst zajmuje 45% szerokości kontenera */
}

.gift-txt h3 {
	font-size: var(--font-h3); /* Rozmiar tekstu zgodny z h3 */
	margin-bottom: 16px;
}

.gift-txt ul {
	list-style: disc; /* Domyślny styl listy */
	padding-left: 20px;
	margin-bottom: 16px;
}

.gift-txt ul li {
	font-size: var(--font-h3); /* Rozmiar fontu jak h3 */
	margin-bottom: 8px;
}

.gift-txt a.cta {
	display: inline-block;
	margin-top: 16px;
	text-decoration: none;
}

.baner-container {
	position: relative;
}

.baner-wrapper {
	display: flex;
	gap: 32px;
	justify-content: center;
}

.baner img {
	transition: transform 0.3s ease;
	border-radius: 16px;
	box-shadow: 0px 30px 40px 0px var(--color-box-shadow);
}

.baner img:hover {
	transform: translateY(-3px);
}

.baner-container {
	margin-bottom: 80px;
}

.baner-container .gfx {
	position: absolute;
	left: 4%;
	top: -10%;
}

/* Media Queries */

@media (max-width: 1800px) {
	.header-section {
		background-position: center right -200px;
	}

	.gift-container .gfx {
		right: 3%;
		top: 20%;
	}
}

@media (max-width: 1400px) {
	.header-section {
		height: 560px;
		background-position: center right -270px;
	}

	body {
		background-image: url('../../img/main/niebieski_2\ 1.png');
		background-position: top 400px right;
		background-repeat: no-repeat;
		background-size: 100%;
		position: relative;
	}

	.gift-container .gfx {
		right: 5%;
		top: 60%;
	}

	.baner-container .gfx {
		display: none;
	}
}

@media (max-width: 1200px) {
	.header-section {
		height: 700px;
		background-image: url('../../img/main/top-tablet.jpg');
		background-position: center right;
		background-repeat: no-repeat;
		align-items: start;
		padding-top: 80px;
	}

	.gift-wrapper img {
		max-width: 400px;
	}

	body {
		background-image: url('../../img/main/niebieski_2\ 1.png');
		background-position: top 400px right;
		background-repeat: no-repeat;
		background-size: 150%;
		position: relative;
	}
}

@media (max-width: 992px) {
	.step {
		flex: 1 1 100%; /* Tablet: jeden krok w rzędzie */
		max-width: 100%;
	}

	.gift-wrapper {
		flex-direction: column; /* Kolumnowy układ na mobile */
		gap: 32px; /* Mniejszy odstęp między elementami */
	}

	.gift-wrapper img,
	.gift-txt {
		max-width: 100%; /* Elementy zajmują pełną szerokość */
		flex: 1 1 100%; /* Dostosowanie do układu w kolumnie */
	}

	.gift-txt {
		text-align: center;
	}

	.gift-container .gfx {
		right: 2%;
		top: 30%;
	}

	.baner-wrapper {
		flex-wrap: wrap;
	}

	body {
		background-image: url('../../img/main/niebieski_2\ 1.png');
		background-position: top 50% right;
		background-repeat: no-repeat;
		background-size: 200%;
		position: relative;
	}
}

@media (max-width: 768px) {
	.gift-container .gfx {
		display: none;
	}
}

@media (max-width: 576px) {
	.header-section {
		height: 700px;
		background-image: url('../../img/main/top-mobile.jpg');
		background-position: center;
		background-repeat: no-repeat;
		align-items: start;
		padding-top: 80px;
		text-align: center;
	}

	.txt-wrapper {
		align-items: center;
		gap: 20px;
	}
}