/* Ensure the body doesn't add unwanted margins for a true full-width effect */
body {
    overflow-x: hidden; /* Prevent horizontal scrollbar during slide transitions */
}

.slider-container {
    position: relative;
    width: 100vw; /* Full Viewport Width */
    height: 100vh; /* Adjust the height as needed for your hero section */
    overflow: hidden;	
	transition: all .5s;
	transition-delay: 0s;
}
.noscroll .slider-track, .noscroll .slider-container{
	width: 97vw;
	transition-delay: .3s;
}
.slider-track {
    display: flex;
    width: 300vw; /* 3 slides * 100vw */
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); /* Smoother transition */
	transition: all .5s;
	transition-delay: 0s;
}
.noscroll .slider-track {
	width: 290vw;
	transition-delay: .2s;
}

.slide {
    width: 100vw; /* Each slide takes up the full viewport width */
    /*flex-shrink: 0;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    padding: 0 5%;
	box-sizing: border-box;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

/* Backgrounds for visual distinction */
.slide:nth-child(1) { background-image: linear-gradient(to right, #00c6ff, #0072ff); }
.slide:nth-child(2) { background-image: linear-gradient(to right, #ff7e5f, #feb47b); }
.slide:nth-child(3) { background-image: linear-gradient(to right, #1d976c, #93f9b9); }

.slide-content h2 { 
	font-size: 2.75rem; 
	margin-bottom: 15px;
	font-weight: 900;
}
.slide-content p { font-size: 1.25rem; max-width: 800px; }

/* --- Navigation Arrows --- */
.slider-arrow {
    position: absolute;
	bottom: 0;
    height: calc(100vh - 100px);
    /*transform: translateY(-50%); halves the height */
    /*background-color: rgba(255, 255, 255, 0.2);*/
	background-color: unset;
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
    z-index: 30;
}
.slider-track:hover .slider-arrow {
	opacity: 1;
}
.slider-arrow img {
    filter: invert(1);
	transition: all .25s;
	position: relative;
	right: 0;
	top: -50px;
}
@media (max-width: 640px) {
	.slider-arrow img {
		display: none;
	}
}

.slider-arrow.prev-arrow img {
    transform: scaleX(-1);
}
.slider-arrow:hover {
	opacity: 1 !important;
}
.slider-arrow:hover img, .slider-arrow:focus img {
	right: -3px;
	background-color: rgba(255, 255, 255, 0.4);
}
.slider-arrow.prev-arrow:hover img, .slider-arrow.prev-arrow:focus img {
	right: 3px;
}
.prev-arrow { 
	left: 0;
}
.next-arrow { 
	right: 14px; 
}

/* --- Filling Pagination Dots --- */
.slider-pagination {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    gap: 12px;
}

.pagination-dot {
    width: 70px;
    height: 10px;
    transform: skew(-25deg, 0deg);
    border: 2px solid #FFF /*rgb(210 43 0)*/;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.pagination-dot.active {
    transform: skew(-25deg, 0deg);
}

.pagination-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%; /* Starts empty */
    height: 100%; 
    background-color: #FFF /*rgb(210 43 0)*/; /* Fill color */
    transition: width 0s linear; /* Controlled by JS for animation */
}

/* Ensure the fill is visible on the active dot */
.pagination-dot.active .pagination-fill {
    width: 100%; /* Initially full for active slide when the animation starts */
}

/* slide bg's */

.slide.one {
	/*background-image: linear-gradient(255deg, rgb(0 78 255 / 11%), rgb(2 16 28 / 99%)), url(/_img/hero-shore-blur-cloudbase.jpg);
	background-image: linear-gradient(255deg, rgb(0 0 0 / 12%), rgb(2 16 28 / 77%)), url(/_img/hero-field_michael-pointner.jpg);*/
	background-image: linear-gradient(255deg, rgb(0 7 24 / 53%), rgb(0 7 28 / 13%)), url(/_img/hero-filip-mroz.jpg);
}

.slide.two {
	/*background-image: linear-gradient(255deg, rgb(0 78 255 / 11%) , rgb(2 16 28 / 99%)), url(/_img/hero-city.jpg);*/
	background-image: linear-gradient(255deg, rgb(0 78 255 / 11%) , rgb(2 16 28 / 99%)), url(/_img/hero-path_johannes-plenio.jpg);
	background-image: linear-gradient(114deg, rgb(0 58 187 / 37%), rgb(0 0 0 / 88%)), url(/_img/hero-toronto_juan-rojas.jpg);
}
/*.pagination-dot.active[data-target-slide="2"] .clouds {
  display: block;
}*/

.slide.three {
	/*background-image: linear-gradient(255deg, rgb(0 78 255 / 11%) , rgb(2 16 28 / 59%)), url(/_img/forest.jpg);*/
	/*background-image: linear-gradient(255deg, rgb(0 78 255 / 11%) , rgb(2 16 28 / 99%)), url(/_img/hero-path_johannes-plenio.jpg);*/
	background-image: linear-gradient(255deg, rgb(0 7 24 / 53%), rgb(0 7 28 / 13%)), url(/_img/hero-3.jpg);
	background-image: linear-gradient(255deg, rgb(0 0 0 / 5%), rgb(2 16 28 / 14%)), url(/_img/hero-masahiro-miyagi.jpg);
}
.dark .overlay.top {
    background: linear-gradient(to bottom, black 5%, rgba(0, 0, 0, 0.738) 26%, rgba(0, 0, 0, 0.591) 34%, rgba(0, 0, 0, 0.392) 47%, rgba(0, 0, 0, 0.298) 56.5%, rgba(0, 0, 0, 0.194) 65%, rgba(0, 0, 0, 0.126) 73%, rgba(0, 0, 0, 0.075) 80.2%, rgba(0, 0, 0, 0.042) 86.1%, rgba(0, 0, 0, 0.021) 91%, rgba(0, 0, 0, 0.008) 95.2%, rgba(0, 0, 0, 0.002) 98.2%, transparent 100%);
    top: 0;
    opacity: 0.7;
    height: 208px;
	z-index: 1;
}
.dark .overlay.bottom {
    background: linear-gradient(to top, black 5%, rgba(0, 0, 0, 0.738) 26%, rgba(0, 0, 0, 0.591) 34%, rgba(0, 0, 0, 0.392) 47%, rgba(0, 0, 0, 0.298) 56.5%, rgba(0, 0, 0, 0.194) 65%, rgba(0, 0, 0, 0.126) 73%, rgba(0, 0, 0, 0.075) 80.2%, rgba(0, 0, 0, 0.042) 86.1%, rgba(0, 0, 0, 0.021) 91%, rgba(0, 0, 0, 0.008) 95.2%, rgba(0, 0, 0, 0.002) 98.2%, transparent 100%);
    bottom: 0;
    opacity: 0.7;
    height: 50vh;
	z-index: 1;
}

/* lights 
div.s1a {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background: #FFF;
	position: absolute;
    bottom: 20%;
    left: 45.95%;
    filter: blur(3px);
}
*/