@charset "utf-8";
/* CSS Document */
 
		body {
			padding-top: 80px; /* Adjust this value to match navbar height */		  
			}
		
		hr {  
			border: none;   
			height: 2px;  
			background-color: #CE424D;
			}

		.bg-plexus0 {  background-color: #343a40; 	}
		.bg-plexus1 {  background-color: #45363A;	}
		.bg-plexus2 {  background-color: #D2D2F2;	}
		.bg-plexus3 {  background-color: #EEEEFA;	}		
		.text-plexus0 { color: #ffffff; }
		.text-plexus1 { color: #343a40; }
		.text-plexus2 { color: #E9E9FC; }	
		.highlight-line {
			border: none;
			height: 2px;
			background-color: #53536C; /* Example: your bg-plexus1 colour */
			}

/*Nav Bar Stuff*/
		.nav-item  {		
			background-color: #343a40; /*bg-dark*/
			color: #FFFFFF;
			font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
			word-spacing: 0px;
			text-indent: 0px;
			font-weight: bold;
			font-variant: small-caps;
			letter-spacing: 0px;
			white-space: normal;
			font-size: large;
			padding-left: 60px;
			padding-right: 60px;
			margin-top: 19px;
			}

/* Add to your CSS */
[id] {
  scroll-margin-top: 100px;
}

/*Plexus Card*/
		.plexus-card {
		  	margin-bottom: 2rem;
		  	padding: 0.7rem;
			background-color: #E9D6DB;
		  	border: 1px solid #ddd;
		  	border-radius: 0.5rem;
			box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
		  	text-align: left;
			}
		 .plexus-card:hover {
			transform: translateY(-10px);
			box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
			background-color: #f9f4e2;
			border-color: #FFCB10;
			transition: all 0.3s ease;
			cursor: pointer;
			}
/*Plexus Card2*/		
		.plexus-card2 {
			margin-bottom: 2rem;
			padding: 0.7rem;
			background-color: #E9D6DB;
			border: 1px solid #ddd;
			border-radius: 0.5rem;
			box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
			text-align: left;
			}
		.card-img-square {
		  	width: 100%;
		  	aspect-ratio: 1 / 1; /* Makes the image square */
		  	object-fit: cover;   /* Ensures the image fills the square without distortion */
		  	border-radius: 0.5rem; /* Optional: match the card's rounded corners */
			}
 /*Sermon card */
		.sermon-card {
			display: flex;
			align-items: center;
			margin-bottom: 2rem;
			}
		.sermon-splash {
			border-radius: 20%;
			width: 150px;
			height: 150px;
			object-fit: cover;
			margin-right: 2rem;
			}
		.sermon-info {
			flex: 1;
			}
		.sermon-info h1, .staff-info h3 {
			margin: 0;
			color: #53536C;
			}
		.sermon-info hr {
			border: none;
			height: 2px;
			background-color: #FFCB10;
			margin: 0.5rem 0;
			}
		.sermon-summary {
			margin-top: 1rem;
			font-style: italic
			}


/* YouTube Embed Styling */
		.youtube-embed {
		  width: 100%;
		  max-width: 800px;
		  margin: 2rem auto;
		  padding: 0 1rem;
		}

		.youtube-embed iframe {
		  width: 100%;
		  height: 450px;
		  border-radius: 10px;
		  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		}


/* Fade-in animations */
		@keyframes fadeInUp {
		  from {
			opacity: 0;
			transform: translateY(20px);
		  	}
		  to {
			opacity: 1;
			transform: translateY(0);
		  	}
		  }

		.fade-in-up {
		  	opacity: 0; /* Start hidden */
		  	animation: fadeInUp 1.2s ease-out forwards;
		  	animation-delay: 0.3s; /* Optional delay */
			}

		@keyframes fadeInZoom {
		  from {
			opacity: 0;
			transform: scale(1.05) translateY(20px)
		  	}
		  to {
			opacity: 1;
			transform: scale(1)translateY(0);
		  	}
		  }

		.fade-in-zoom {
		  	opacity: 0; /* Start hidden */
		  	animation: fadeInZoom 1.2s ease-out forwards;
		  	animation-delay: 0.3s; /* Optional delay */
			}

/*Jumbotron stuff*/
/*		.jumbotron-image {
		  	background-size: cover;
		  	background-position: center 20%;
		  	background-repeat: no-repeat;
		  	min-height: 90vh;
		  	display: flex;
		  	flex-direction: column;
		  	justify-content: center;
		  	align-items: center;
			text-align: center;
		  	padding: 2rem;
		  	position: relative
			}
		
		.jumbotron-content {
		  	position: sticky;
		  	top: 50%;
		  	transform: translateY(-50%);
		  	text-align: center;
			}

*/

/* new to try to deal with mobile */
		.jumbotron-image {
		  background-size: cover;
		  background-position: center 20%;  /* keeps your focal point a bit high */
		  background-repeat: no-repeat;
		  min-height: 90vh;                 /* fills most of the viewport */
		  display: flex;
		  flex-direction: column;
		  justify-content: center;          /* vertical centering via flex */
		  align-items: center;
		  text-align: center;
		  padding: 2rem;
		  position: relative;
		}

		/* Optional: dark overlay to improve text contrast */
		.jumbotron-image::before {
		  content: "";
		  position: absolute;
		  inset: 0;
		  background: rgba(0, 0, 0, 0.35);
		}

		/* Content sits above overlay */
		.jumbotron-content {
		  position: relative;
		  z-index: 1;
		  /* Remove sticky/transform—flex handles centering */
		}

		/* Tame large display sizes on small screens */
		@media (max-width: 576px) {
		  .jumbotron-image {
			min-height: 70vh;       /* slightly shorter on phones for better layout */
			padding: 1.5rem 1rem;
			background-position: center 30%; /* lift focal point a bit more on mobile */
		  }
		  .jumbotron-content h1 {
			font-size: 2rem;        /* override Bootstrap's massive display-1 */
			line-height: 1.2;
			margin-bottom: 0.5rem;
		  }
		  .jumbotron-content h2 {
			font-size: 1.125rem;    /* friendlier subheading size */
			line-height: 1.3;
			margin-bottom: 0.75rem;
		  }
		  .jumbotron-content p {
			font-size: 0.95rem;
			margin-bottom: 0;
		  }
		}