.timeline-controls {
	text-align: center;
	margin-bottom: 0;
}

.timeline-controls button {
	padding: 25px 50px;
	border: none;
	background-color: rgb(0,0,0,0);
	cursor: pointer;
}

.image-button-left {
  background-image: url('..\\Arrow Left.png'); /* Set the URL of your image */
  background-size: 100px 50px; /* Adjust the size of the background image */
  background-repeat: no-repeat; /* Prevent image repetition */
}

.image-button-right {
  background-image: url('..\\Arrow Right.png'); /* Set the URL of your image */
  background-size: 100px 50px; /* Adjust the size of the background image */
  background-repeat: no-repeat; /* Prevent image repetition */
}


.timeline-controls button:hover {
	background-color: darkred;
	color: wheat;
}

.timeline {
	display: flex;
	flex-direction: row;
	align-items: start;
	overflow-x: auto;
	/* NOTE: This is vertical padding! */
	padding: 20px;
	/* The space between individual timeline items */
	gap: 20px;
	width: 100%;
	max-width: 1200px;
	border-radius: 25px;
	background: maroon;
	margin: auto; /* Centers the timeline */
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
	
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.timeline::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
}

.timeline-item {
	/*display: inline-block;*/
	width: 305px;
	height: 385px;
	flex-shrink: 0;
	flex-grow: 0;
	flex-basis: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	border-radius: 25px;
	background: wheat;
	padding: 10px;
}

.timeline-content {
	user-select: none;
	width: 250px;
	height: 300px;
	flex-shrink: 0;
	flex-grow: 0;
	flex-basis: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(to bottom, cornsilk, bisque);
	padding: 10px;
	border-radius: 25px;
	/* box-shadow: h-shadow v-shadow blur spread color */
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
	/* Hides overflowing content */
	overflow: hidden;
}

/* This is the current black dot thingie */
.timeline-year {
	user-select: none; /* Prevent text selection */
	pointer-events: none; /* Prevent image dragging */
	width: 75px;
	height: 50px;
	background: linear-gradient(to bottom, #6C481B, #3D2607);
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
	border-radius: 50%;
	flex-shrink: 0;
	flex-grow: 0;
	flex-basis: auto;
	flex-direction: column;
	margin-bottom: 10px;
	justify-content: center;
	display: flex;
	align-items: center;
	/* Add a shadow under text */
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
	color: whitesmoke;
	font-family: "fontawesome";
	font-size: 22px;
}

.content-text {
	text-align: center;
	margin-bottom: 10px; /* Spacing between text and image */
	font-family: "fontawesome";
	font-size: 20px;
}

.content-image {
	user-select: none; /* Prevent text selection */
	flex-grow: 1;
	/* Allows the image section to fill the available space */
	display: flex;
	justify-content: center;
	align-items: center;
}

.content-image img {
	max-width: 100%;
	max-height: 150px; /* Limit image height */
	margin-bottom: 20px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
}

.image-popup {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
}

.close-popup {
	position: absolute;
	top: 20px;
	right: 35px;
	font-size: 40px;
	color: white;
	cursor: pointer;
}

.popup-img {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	z-index: 1;
}

.popup-text {
	color: white; /* Example text color */
	text-align: center;
	padding: 20px;
	z-index: 1;
}




.login-popup-container {
  display: none;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black with opacity */
  
  opacity: 0;
  transition: opacity 0.5s linear;
}

.login-popup {
  position: relative;
  background-color: red;
  margin: 15% auto; /* 15% from the top and centered horizontally */
  padding: 20px;
  border: 1px solid #888;
  
   /* Limit the width of the modal */
    /* You can also set a max-width */
  /*
  width: 50%;
  max-width: 600px;
  */
  
  /* NOTE: This is vertical padding! */
	padding: 20px;
	
	justify-content: center; /* Horizontal centering */
  	align-items: center; /* Vertical centering */
	
	width: 100%;
	max-width: 325px;
	border-radius: 25px;
	background: maroon;
	
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	
	
	display: flex;
	flex-direction: row;
	align-items: start;
	overflow-x: auto;
}

.close-login-popup {
	position: absolute;
	top: 0px;
	right: 10px;
	font-size: 40px;
	color: white;
	cursor: pointer;

	font-size: 28px;
  	font-weight: bold;
}

.close-login-popup:hover,
.close-login-popup:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}









.registration-popup-container {
  display: none;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black with opacity */
  
  opacity: 0;
  transition: opacity 0.5s linear;
}

.registration-popup {
	position: relative;
  	background-color: red;
  	margin: 15% auto; /* 15% from the top and centered horizontally */
  	padding: 20px;
  	border: 1px solid #888;
  
  
  	/* NOTE: This is vertical padding! */
  	padding: 20px;
	
	justify-content: center; /* Horizontal centering */
  	align-items: center; /* Vertical centering */
	
	width: 100%;
	max-width: 325px;
	border-radius: 25px;
	background: maroon;
	
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	
	display: flex;
	flex-direction: row;
	align-items: start;
	overflow-x: auto;
}

.close-registration-popup {
	position: absolute;
	top: 0px;
	right: 10px;
	font-size: 40px;
	color: white;
	cursor: pointer;

	font-size: 28px;
  	font-weight: bold;
}

.close-registration-popup:hover,
.close-registration-popup:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}















.message-popup-container {
  display: none;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black with opacity */
  
  opacity: 0;
  transition: opacity 0.5s linear;
}

.message-popup {
	position: relative;
  	background-color: red;
  	margin: 15% auto; /* 15% from the top and centered horizontally */
  	padding: 20px;
  	border: 1px solid #888;
  
  
  	/* NOTE: This is vertical padding! */
  	padding: 20px;
	
	justify-content: center; /* Horizontal centering */
  	align-items: center; /* Vertical centering */
	
	width: 100%;
	max-width: 325px;
	border-radius: 25px;
	background: maroon;
	
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	
	display: flex;
	flex-direction: row;
	align-items: start;
	overflow-x: auto;
}

.close-message-popup {
	position: absolute;
	top: 0px;
	right: 10px;
	font-size: 40px;
	color: white;
	cursor: pointer;

	font-size: 28px;
  	font-weight: bold;
}

.close-message-popup:hover,
.close-message-popup:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}











@keyframes bounce { 0%, 100% {
	transform: translateY(0);
}

50%
{
transform:
translateY(
-10px
);
}
}
.bounce-animation {
	animation: bounce 1s infinite;
}

.scroll-indicator {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	/*display: none; */
	visibility: hidden;
}

.scroll-indicator img {
	height: 64px; /* Or any size you prefer */
	width: auto;
	z-index: 5; /* Adjust as necessary */
}




form {
	width: 100%;
	background: wheat;
	padding: 20px;
	
	border-radius: 25px;
	
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	
	/* Center the form horizontally */
	margin: 0 auto;
}

.form-group {
	margin-bottom: 0px;
	text-align: center; /* Center the content within .form-group */
}

.form-container {
	
	/* NOTE: This is vertical padding! */
	padding: 20px;
	
	justify-content: center; /* Horizontal centering */
  	align-items: center; /* Vertical centering */
	
	width: 100%;
	max-width: 325px;
	border-radius: 25px;
	background: maroon;
	
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	
	
	display: flex;
	flex-direction: row;
	align-items: start;
	overflow-x: auto;
}

label {
	margin-top: 10px;
	margin-bottom: 10px;
	display: block;
	text-align: center; /* Center the text within labels */
}

input[type="email"], input[type="password"] {
	width: 75%;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-sizing: border-box;
	margin: 0 auto; /* Center the input horizontally */
	display: block; /* Ensure inputs stack vertically */
}

input[type="submit"] {
	width: 33%;
	padding: 0;
	border: none;
	border-radius: 4px;
	background-color: black;
	color: white;
	cursor: pointer;
	transition: background-color 0.3s ease;
	margin: 0 auto; /* Center the submit button horizontally */
	display: block; /* Ensure submit button is centered */
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

input[type="submit"]:hover {
	color: white;
	background-color: darkred;
}

input[type="submit"]:disabled {
	color: gray;
	background-color: darkgray;
}

.error {
	color: red;
	font-size: 0.8em;
}

input:invalid {
	border-color: red;
}

input:valid {
	border-color: green;
}








.swipe-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.swipe-text {
  font-size: 16px;
  opacity: 0.7;
  /*animation: bounce 2s infinite alternate;*/
}

@keyframes bounce {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50px);
  }
}








.paypal-container {
	
	/* NOTE: This is vertical padding! */
	padding: 20px;
	
	justify-content: center; /* Horizontal centering */
  	align-items: center; /* Vertical centering */
	
	width: 100%;
	max-width: 225px;
	border-radius: 25px;
	background: ivory;
	
	box-shadow: 0 0 2px rgba(0, 0, 0, 1);
	
	
	display: flex;
	flex-direction: row;
	align-items: start;
	overflow-x: auto;
}



/* Media query for smaller viewport widths */
@media screen and (max-width: 700px) {
	.form-container {
		width: 95%;
	}
	
	.timeline-item {
		/* Adjust the width and height as needed for smaller screens */
		width: 100%;
		height: 385px;
	}
	.timeline-content {
		/* Adjust the width and height as needed for smaller screens */
		width: 75%;
		height: 300px;
	}
	.timeline-year {
		/* Adjust the width and height as needed for smaller screens */
		width: 50%;
		height: auto; /* Allows the height to adjust based on content */
	}
	.content-text {
		/* Adjust the width and height as needed for smaller screens */
		width: 50%;
		height: auto; /* Allows the height to adjust based on content */
	}
	.content-image {
		/* Adjust the width and height as needed for smaller screens */
		width: 100%;
		height: auto; /* Allows the height to adjust based on content */
	}
	.content-image img {
		width: 100%;
		height: auto; /* Allows the height to adjust based on content */
		margin-bottom: 0px;
	}
}