/* this unsets the wordpress formatting */
/* the regular content windows now foes to the edges */
.container.main-page {
	margin: 0;
	padding: 0;
	border: 0;
}

#main{
 width: 100%;
 margin: 0;
 padding: 0;
 left: 0;
 top: 0;
}

.page-title {
	display: none;
}

/* additional wordpress customization */
.container.header-container {
	position: sticky;
	top: 0;
	width: 100%;
	background-color: white;
	z-index: 999; 
}

/* this pages custom styling */

.banner {
	width: 100vw !important;
	height: 450px !important;
	max-width: none !important;
	margin: 0;
	padding: 0;

	position: relative;
 	overflow: hidden;
}

.banner img {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;

	display: block;
	position: relative;
	object-fit: cover;
}

.top-white-fade {
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 50%; 
	background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); 
	pointer-events: none;
	z-index: 2;
}



/* --- Base Slide Configurations --- */
/* only handles 3 images */
.banner.slideshow img {
	position: absolute;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	
	/* Start all images hidden */
	opacity: 0; 
	
	/* Name of animation | total loop duration | curve | infinite loop */
	animation: cssSlideshow 30s linear infinite; 
}

/* --- Staggered Timing Delays --- 
   Total duration = 12s. Each image stays visible for 4s. */
.banner.slideshow img:nth-child(1) {
	animation-delay: 0s;
}
.banner.slideshow img:nth-child(2) {
	animation-delay: 10s;
}
.banner.slideshow img:nth-child(3) {
	animation-delay: 20s;
}

/* --- The Crossfade Loop Logic --- */
@keyframes cssSlideshow {
	0% { opacity: 0; }
	8% { opacity: 1; }  /* Fade-in step */
	33% { opacity: 1; } /* Remains fully visible */
	41% { opacity: 0; } /* Fade-out step */
	100% { opacity: 0; }/* Stays hidden until loop restarts */
}