/* General Reset */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Container styling */
.container {
	display: flex;
	flex-wrap: wrap;
	gap: 0rem; /* Space between boxes */
	justify-content: center; /* Center content horizontally */
	align-items: center;      /* Centers vertically */
}

/* Box styling */
.box {
	flex: 1 1 48%; /* Flex-grow: 1, Flex-shrink: 1, Base size: 48% */
	min-width: 300px; /* Minimum width for a box */
	padding: 1rem;
	text-align: center;
}

.about-box1 {
	flex: 0 1 40%;
	min-width: 300px; /* Minimum width for a box */
	text-align: center;
}

.about-box2 {
	flex: 0 1 60%;
	min-width: 300px; /* Minimum width for a box */
	padding: 1rem;
	text-align: center;
}

.button-container {
  flex: 0 0 auto; /* Allow buttons to grow and shrink as needed */
  display: flex;
  justify-content: center; /* Center the button within its container */
}

.or-container {
  flex: 0 0 auto; /* Ensure the "or" does not grow or shrink */
  display: flex;
  justify-content: center; /* Center the "or" within its container */
  align-items: center;
  white-space: nowrap; /* Prevent the "or" from wrapping */
  padding-left: 10px;
  padding-right: 10px;
}

.button {
	font-size: 1em;
	background-color: #E74C21;
	color: white;
	font-weight: 600;
	//width: 90%;
	padding: 1em;
	border-radius: 10px;
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .3);
	cursor: pointer;
	margin: auto auto 0.5em auto;
	width: 250px; /* Set a fixed size for buttons */
	height: 50px; /* Set a fixed size for buttons */
	text-align: center;
}

header {
	display: flex;
	justify-content: center;
	background-image: url('images/bannerbackground.jpg');
	background-size: cover;
	text-align: center;
	overflow: hidden;
}

footer {
	position: relative;
	bottom: 0;
	background-color: rgb(0, 0, 128);
	padding-top: 1em;
	padding-bottom: 1em;
}

footer a {
	color: white;
}

footer a:hover {
	color: yellow;
}

a {
	color: blue;
}

a:hover {
	color: red;
}

#banner-image {
	display: block;
	margin: auto;
	width: 100%; 
	max-width: 800px;
	margin: 0px;
}

.text {
	font-family: "Open Sans", sans-serif;
	font-optical-sizing: auto;
	margin: auto;
}

.limit-width {
	max-width: 600px;
}

h1 {
	font-size: 2.5em;
	line-height: 125%;
	font-weight: bold;
}

h2 {
	font-size: 2em;
	font-weight: bold;
	line-height: 150%;
}

h3, p {
	font-size: 1.2em;
	font-weight: normal;
	text-align: justify;
	line-height: 200%;
}

li.features {
	font-size: 1.2em;
	font-weight: normal;
	text-align: justify;
	line-height: 150%;
	width: 90%;
	padding-bottom: 1em;
}

.title {
	margin-bottom: 1rem;
}

.button:hover {
	background-color: #0f495f;
}

.containing-box {
	display: flex;
	flex-direction: column;
	justify-content: center;  /* Centers horizontally */
	align-items: center;      /* Centers vertically */
	height: 100%;
}

.video, .non-video {
	border-radius: 10px;
	box-shadow: 0 3px 6px 0 rgba(0, 0, 0, .3);
	width: 90%;
}

.video {
	cursor: pointer;
}

ul.features {
	list-style-type: none; /* Removes default bullets */
	padding-left: 0; /* Removes default padding */
}

ol.features li.features,
ul.features li.features {
	position: relative; /* Ensures positioning for the checkmark */
	padding-left: 25px; /* Adds space for the checkmark */
}

ul.features li.features::before {
	content: "✔"; /* Unicode for the checkmark */
	color: green; /* Checkmark color */
	position: absolute; /* Positions it relative to the list item */
	left: 0; /* Aligns it to the left of the list item */
	top: 0; /* Adjusts vertical positioning as needed */
}

#curriculumTable {
	font-size: 1.2em;
	font-weight: normal;
	text-align: justify;
	line-height: 150%;
	border: 3px double black;
	max-width: 95%;
}

#curriculumTable th {
	text-align: left;
	background-color: #ccc;
}

#curriculumTable tr:nth-child(even) {
	background-color: #eee;
}

#curriculumTable td, th{
	padding-left: 1em;
	padding-right: 0.5em;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.fa-asterisk {
	color: #888;
}

.testimonial {
	font-family: "Crimson Pro", serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-size: 2em;
	color: #888;
	font-style: italic;
	max-width: 1280px;
	text-align: center;
	margin: auto;
}

.free-text {
	max-width: 1280px;
	margin: auto;
	width: 90%;
	margin-bottom: 1em;
}

hr {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	width: 95%;
	margin-bottom: 1em;
}

.testimonial-credit {
	font-family: "Crimson Pro", serif;
	font-optical-sizing: auto;
	font-weight: 300;
	font-size: 1em;
	color: #888;
	font-style: normal;
	max-width: 1280px;
	text-align: right;
	margin: auto;
	margin-bottom: 3em;
	padding-right: 10px;
}

.story-text {
	order: 1;
}

.story-picture {
	order: 2;
}

.unordered-list {
	max-width: 80%; 
	margin: auto;
}

a {
	text-decoration: none;
}


/* Responsive Design */
@media (max-width: 768px) {
	.about-box1,
	.about-box2,
	.box {
		flex: 1 1 100%; /* Full width on smaller screens */
	}
	
	h1 {
		font-size: 2em;
	}

	h2 {
		font-size: 1.5em;
	}
	
	h3, p, li {
		font-size: 1em;
	}
	
	.testimonial {
		font-size: 1.5em;
	}
	
	.story-text {
		order: 2;
	}
	
	.story-picture {
		order: 1;
	}
	
	.testimonial {
		max-width: 95%;
	}
	
	.button-container,
	.or-container {
		flex: 1 0 90%;
	}
	
	#curriculumTable {
		font-size: 1em;
	}

}

.shaded-section {
	background-color: rgba(0, 0, 0, 0.1);
	padding: 1em 0 1em 0;
}

.playButton {
	cursor: pointer;
	background-image: url("https://mcusercontent.com/5a61e83ac2294019772d42b0d/images/1f0b478e-b9f0-7b3c-408c-9bf6edfb2708.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100px;
}

.preload, .playButton:hover {
	background-image: url("https://mcusercontent.com/5a61e83ac2294019772d42b0d/images/6dfc9845-6a15-df20-0f18-cf3b4e043f9b.png");
}

.preload {
	opacity: 0;
}