/* CSS dla bloku baner-start */
.baner-start {
	height: 85vh;
}
.nakladka-baner-start{
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.5) 16.54%, rgba(0, 0, 0, 0) 32.45%);

}
.nakladka-baner-start-3{
	background: linear-gradient(220.77deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 76.85%);

}

.nakladka-baner-start-4 {
		background: linear-gradient(220.77deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 76.85%);

}
.baner-start .social{
	width: fit-content !important;
}
.baner-start .baner-start-h1{
	font-size: 30px !important;
}
.baner-karuzela-start .tekst-baner{
	width: 45% !important;
}

.baner-start h1 {
    font-size: 50px !important;
    margin-bottom: 20px;
}
.w-70{
    width: 70% !important;
}

/* Animacje tekstu w sliderze */
/* .baner-karuzela-start .swiper-slide .tekst-baner {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.8s ease, transform 1.8s ease;
    pointer-events: none;
}

.baner-karuzela-start .swiper-slide-active .tekst-baner {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
} */



/* Cały blok pojawia się delikatnie */
.baner-karuzela-start .swiper-slide .tekst-baner {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 1.2s ease, transform 1.2s ease;
    pointer-events: none;
}

.baner-karuzela-start .swiper-slide-active .tekst-baner {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


/* --- Animacja poszczególnych elementów --- */

/* Wszystkie elementy startują ukryte */
.baner-karuzela-start .tekst-baner h1,
.baner-karuzela-start .tekst-baner p,
.baner-karuzela-start .tekst-baner a {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 1s ease, transform 1s ease;
}

/* H1 – pierwszy, lekki delay */
.baner-karuzela-start .swiper-slide-active .tekst-baner h1 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

/* Opis – wchodzi po nagłówku */
.baner-karuzela-start .swiper-slide-active .tekst-baner p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.45s;
}

/* Link – ostatni, z najdelikatniejszym ruchem */
.baner-karuzela-start .swiper-slide-active .tekst-baner a {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.7s;
}






/* Opcjonalne – wygaszenie sąsiednich slajdów */
.baner-karuzela-start .swiper-slide-prev .tekst-baner,
.baner-karuzela-start .swiper-slide-next .tekst-baner {
    opacity: 0.2;
    transform: translateY(10px);
}

/* Dodatkowe wygładzenie nagłówków i opisów */
.baner-karuzela-start .tekst-baner h1,
.baner-karuzela-start .tekst-baner p,
.baner-karuzela-start .tekst-baner a {
    transition: opacity 0.9s ease, transform 0.9s ease;
}

/* Po aktywacji slajdu – lekkie opóźnienia dla warstw */
.baner-karuzela-start .swiper-slide-active .tekst-baner h1 {
    transition-delay: 0.9s;
}

.baner-karuzela-start .swiper-slide-active .tekst-baner p {
    transition-delay: 0.25s;
}

.baner-karuzela-start .swiper-slide-active .tekst-baner a {
    transition-delay: 0.4s;
}



@media screen and (max-width: 992px) {
	.baner-start {
		height: 70vh; /* Zwiększam wysokość na tablet */
		min-height: 500px; /* Zwiększam minimalną wysokość */
	}
	
	.baner-start h1{
    	font-size: 1.5rem !important; /* Mniejszy tytuł */
		line-height: 1.3;
	}
	
	.tekst-baner-start{
		width: 85% !important; /* Więcej miejsca na tekst */
		padding: 0 15px;
		position: absolute !important; 
		bottom: 20px !important; /* Więcej miejsca od dołu */
	}
	
	.baner-start p{
		font-size: 13px !important;
		line-height: 1.5;
	}
	
	.tekst-50{
		width: 100% !important;
		padding: 0px 15px !important;
	}
	
    .baner-karuzela-start .tekst-baner {
    	width: 90% !important;
	}
	
	/* Lepsze pozycjonowanie na mobile */
	.tekst-baner-start {
		position: absolute !important;
		bottom: 10px !important;
		left: 10px !important;
		right: 10px !important;
		width: auto !important;
	}
	
	/* Mniejsze social ikony */
	.social a {
		font-size: 14px;
		margin-right: 10px;
	}
	
	/* Kontener główny na mobile */
	.container-fluid.d-flex {
		min-height: auto;
	}
}

@media screen and (max-width: 768px) {
	.baner-start {
		height: 65vh; /* Zwiększam wysokość */
		min-height: 450px; /* Zwiększam minimalną wysokość */
	}
	
	.baner-start h1 {
		font-size: 1.25rem !important;
	}
	
	.baner-start p {
		font-size: 12px !important;
		line-height: 1.4;
	}
	
	.tekst-baner-start {
		bottom: 25px !important; /* Więcej miejsca od dołu */
		padding: 0 15px;
		width: 90% !important; /* Więcej przestrzeni na tekst */
	}
}

@media screen and (max-width: 576px) {
	.baner-start {
		height: 60vh; /* Zwiększam wysokość na małych telefonach */
		min-height: 400px; /* Zwiększam minimalną wysokość */
	}
	
	.baner-start h1 {
		font-size: 1.1rem !important;
		margin-bottom: 15px; /* Więcej odstępu */
	}
	
	.baner-start p {
		font-size: 11px !important;
		margin-top: 10px !important;
		line-height: 1.4;
	}
	
	.tekst-baner-start {
		bottom: 20px !important; /* Więcej miejsca od dołu */
		padding: 0 10px;
		width: 95% !important; /* Maksymalna szerokość tekstu */
	}
	
	.social {
		margin-top: 15px !important; /* Więcej odstępu */
	}
	
	.social a {
		font-size: 12px;
		margin-right: 8px;
	}
	
	/* Dodatkowe miejsce na bardzo długie listy */
	.baner-start .whitededyk p {
		margin-bottom: 8px;
	}
}