.realization-single {
	position: relative;
	height: 84vh;
}

	.realization-single .circle {
		position: absolute;
		left: 10vw;
		bottom: 0;
		transform: translatey(50%);
		height: auto;
		width: 40%;
		aspect-ratio: 1/1;
		border-radius: 50%;
		background-color: var(--white-1);
		z-index: 1;
		text-align: center;
		
		overflow: hidden;

		display: flex;
		justify-content: center;
	}

		.realization-single .circle .circle-content {
			padding: 8rem 10rem;
		}

		.realization-single .circle .title-2 {
			margin-bottom: 3rem;
			word-spacing: 9999px; 
		}

	.realization-single .navigation {
		position: absolute;
		bottom: -8vh;
		right: 10vw;
		transform: translatey(50%);
		display: flex;
		gap: 2rem;
		z-index: 1;
	}

		.realization-single .navigation a {
			padding: .5rem 2rem;
			display: flex;
			align-items: center;
			box-shadow: 0 0 1.6rem 0 rgba(0,0,0, .08);
			font-weight: 900;
			color: var(--font-color-1);
			border-radius: 999px;
			transition: .3s;
		}
		.realization-single .navigation a:hover {
			box-shadow: 0 0 2rem 0 rgba(0,0,0, .4);
		}

			.realization-single .navigation a img {
				height: 1.8rem;
				width: auto;
				object-fit: contain;
				margin-right: 1rem;
			}
			.realization-single .navigation a:last-child img {
				transform: rotate(180deg);
			}

	.realization-single .exit {
		position: absolute;
		display: block;
		right: 5vw;
		top: 5rem;
		z-index: 1;
		transition: .3s;
		transform-origin: scale(1.05);
	}
	.realization-single .exit:hover {
		transform: scale(1.1);
	}

		.realization-single .exit img {
			height: 3rem;
			width: auto;
			object-fit: contain;		
		}


/* --- Główny kontener slidera na cały ekran --- */
.realization-slider {
    position: absolute; /* Lub absolute, jeśli ma być wewnątrz jakiegoś kontenera */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* 100% wysokości okna przeglądarki */
    background-color: #000; /* Czarne tło na wypadek, gdyby obrazki się ładowały */
}

/* --- Styl slajdów i obrazków wewnątrz --- */
.realization-slider .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

.realization-slider .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* KLUCZOWE: Obrazek wypełni slajd bez zniekształceń, nadmiar zostanie przycięty */
}

/* --- Stylizacja nawigacji (strzałki) --- */
/*.realization-slider .swiper-button-next,
.realization-slider .swiper-button-prev {
    color: #ffffff; 
}*/
.realization-slider .swiper-button-next::after,
.realization-slider .swiper-button-prev::after {
    display: none;
	
}

.realization-slider .swiper-button-next,
.realization-slider .swiper-button-prev {
    width: 4rem;
    height: 4rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
	transition: .3s;
	transform-origin: center;
}
.realization-slider .swiper-button-next:hover {
	transform: scale(1.05);
}
.realization-slider .swiper-button-prev:hover {
	transform: rotate(180deg) scale(1.05);
}

.realization-slider .swiper-button-prev {
    background-image: url('/wp-content/uploads/2025/08/JFAlmm5U-scaled.png');
	left: 5vw;
	right: auto;
	transform: rotate(180deg);
}

.realization-slider .swiper-button-next {
    background-image: url('/wp-content/uploads/2025/08/JFAlmm5U-scaled.png');
	left: auto;
	right: 5vw;
}

/* --- Stylizacja paginacji (kropki) --- */
.realization-slider .swiper-pagination {
    /* Umieszczamy kropki na górze, a nie na dole */
    top: 1.5rem; /* Odstęp od góry */
    bottom: auto !important; /* Wyłączamy domyślne pozycjonowanie na dole */
}

.realization-slider .swiper-pagination-bullet {
    /* Zwiększamy widoczność kropek na tle zdjęć */
    background-color: #ffffff;
    width: 14px;
    height: 14px;
	border: 1px solid #DCA595;
	opacity: 1;
}

.realization-slider .swiper-pagination-bullet-active {
    /* Aktywna kropka jest bardziej widoczna */
    opacity: 1;
	background-color: #DCA595;
	border: 1px solid #ffffff;
}

@media screen and (max-width: 1500px) {
	.realization-single .circle .title-2 {
		font-size: 3.6rem;
	}
	.realization-single .circle .circle-content {
		padding: 4rem 8rem;
	}
}

@media screen and (max-width: 1400px) {
	.realization-single .circle .circle-content {
		padding: 4rem 4rem;
	}
}

@media screen and (max-width: 1200px) {
	.realization-single {
		height: unset;
		display: flex;
		flex-wrap: wrap;
	}
	
		.realization-single .title-2 {
			margin: 4rem 10vw;
			padding-right: 60px;
		}
	
	.realization-single .exit {
		top: 5rem;
	}
	
	.realization-slider {
		position: relative;
		height: 60vh;
	}
	
		.realization-single .circle {
			position: relative;
			left: unset;
			bottom: unset;
			transform: unset;
			width: 100%;
			text-align: left;
			overflow: unset;
			border-radius: unset;
			aspect-ratio: unset;
		}
	
			.realization-single .circle .circle-content {
				padding: 4rem 10vw;
			}
	
	.realization-single .navigation {
		position: relative;
		bottom: unset;
		right: unset;
		transform: unset;
		padding: 0 10vw 10vh 10vw;
	}
}

@media screen and (max-width: 992px) {

}

@media screen and (max-width: 768px) {

}

@media screen and (max-width: 576px) {
	.realization-slider {
		height: 50vh;
	}
	
	.realization-slider .swiper-pagination {
		top: auto;
		bottom: 2rem !important;
	}
}

@media screen and (max-height: 400px) {

	
	
/* ===== HD READY - 1280x720 ===== */
@media screen and (min-width: 1280px) and (max-width: 1365px) {
	
	
    .realization-single .circle .circle-content {
		padding: 4rem 6rem;}
	}

/* ===== FULL HD - 1920x1080 ===== */
@media screen and (min-width: 1366px) and (max-width: 1920px) {
.realization-single .circle .circle-content {
	padding: 8rem 8rem;}
}


/* ===== WQHD - 2560x1440 ===== */
@media screen and (min-width: 1921px) and (max-width: 2560px) {
	
	}

/* ===== 4K UHD - 3840x2160 ===== */
@media screen and (min-width: 2500px) {
	.realization-single .circle .circle-content {
		padding: 10rem 16rem !important;}
	}