@charset "utf-8";
/* CSS Document */
/*font choices*/
/*headline: font-family: "Sansation", sans-serif;*/
/*paragraph: font-family: "Spline Sans", sans-serif;*/
/*Parisian Poster Art:
	Dark Blue: #013A40;
	Yellow: #F2E205;
	Light Orange: #F2B705;
	Deep Orange: #F28705;
	Skin Tone: #F2955E;
*/
*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body{margin: 0 auto;
	padding: 0;
	width: 100%;
}

h1, h2, h3, h4, h5, h6{font-family: "Sansation", sans-serif;}

p {font-family: "Spline Sans", sans-serif;
	font-size: 1em;
}

img{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* main navigation */
#mainNav{
	overflow: hidden;
	margin: 0;
	display: block;
	position: fixed;
	width: 100%;
	font-family: "Sansation", sans-serif;
	height: 50px;
}

#mainNav a{
	float: left;
	margin: 0;
	display: inline-block;
	color: #013A40;
	text-align: right;
	padding: 15px 16px;
	text-decoration: none;
}

#mainNav a:hover {
	background-color: #F2B705;
	color: #013A40;
}

#mainNav-right .active{
	background-color: #F2B705;
	color: #013A40;
}

#mainNav-right{
	float: right;
}

/* header style */
.home_bg {
	background: #013A40 url("../images/Banner image.jpeg") no-repeat center center;
	background-size: cover;
	height: 500px;
	margin-top: 20px;
	line-height: 500px;
	text-align: center;
}

.home_bg h1 {
	line-height: 500px;
	color: #013A40;
	font-size: 3em;
}

.tagline {
	font-size: 1.2rem;
	color: #F28705;
	margin-top: -960px;
}

/* Main Content */
main {
	padding: 20px;
}

/* Mission Section */
.mission {
	text-align: center;
	border-top: 3px solid #f0b321;
	border-bottom: 3px solid #f0b321;
	margin: 20px 0;
	padding: 10px 0;
}

.mission h2 {
	font-size: 2rem;
	color: #063e3d;
	margin-bottom: 10px;
}

.mission-text {
	background: #063e3d;
	color: #f5fffa;
	padding: 10px;
	font-size: 1.1rem;
}

.find {
	text-align: center;
	margin: 40px 0;
}

/* Find Section */
.find h2 {
	font-size: 1.8rem;
	color: #063e3d;
	margin-bottom: 20px;
}

.calendar {
 	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px; /* smaller gap for vertical spacing */
}

.cta-button {
	background: #F2B705;
	color: #013A40;
	padding: 15px 25px;
	text-decoration: none;
	font-weight: bold;
	border-radius: 5px;
	font-size: 1.1rem;
	white-space: nowrap;
}
/* Footer */
footer {
	background: #013A40;
	text-align: center;
	padding: 15px;
	color: #F2B705;
	font-weight: bold;
}
/*-----------------------------------------------------------Start of About Page----------------------------------------------------------*/
.about-banner {
	background: url("../images/About bg.jpg") no-repeat center center;
	background-size: cover;
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 0px; /* account for fixed nav */
}
.about-banner h1 {
	color: #F28705;
	font-size: 3rem;
	font-weight: bold;
}

/* Intro */
.Learn {
	text-align: center;
	padding: 0px 20px 30px;
	font-size: 1.5rem;
}

/* Grid Layout */
.info-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(5px, 1fr));
	gap: 30px;
	padding: 20px 40px;
	border-top: 3px solid #F2B705;
	border-bottom: 3px solid #F2B705;
}
.info-card {
	text-align: center;
}
.info-card img {
	width: 50%;
	border-radius: 8px;
}
.info-card h3 {
	margin: 15px 0 10px;
	font-size: 1.2rem;
	color: #013A40;
}
.info-card p {
	font-size: 1rem;
	color: #013A40;
	padding: 0 10px;
}

.info-card {
	border: 1px solid #ccc;
	padding: 15px;
	border-radius: 10px;
	background-color: #F2B705;
}
/* CTA */
.Protect {
	text-align: center;
	padding: 20px 20px;
}
.Protect h2 {
	font-size: 2rem;
	margin-bottom: 20px;
}
.protect-button {
	background-color: #F2B705;
	color: #013A40;
	padding: 15px 30px;
	font-weight: bold;
	border-radius: 8px;
	font-size: 1rem;
	text-decoration: none;
}


/*----------------------------------------------------Start of Resource page_____________________________________________________________*/

.resource-banner {
	background: url("../images/Resourcebg.png") no-repeat center center;
	background-size: cover;
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 0px; /* account for fixed nav */
}
.resource-banner h1 {
	color: #F28705;
	font-size: 3rem;
	font-weight: bold;
	padding-top: 120px;
}

/* Intro */
.Projects {
	text-align: center;
	padding: 0px 20px 30px;
	font-size: 1.5rem;
}

/* Grid Layout */
.resource-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(5px, 1fr));
	gap: 30px;
	padding: 20px 40px;
	border-top: 3px solid #F2B705;
	border-bottom: 3px solid #F2B705;
}
.resource-card {
	text-align: center;
}
.resource-card img {
	width: 50%;
	border-radius: 8px;
}
.resource-card h3 {
	margin: 15px 0 10px;
	font-size: 1.2rem;
	color: #013A40;
}
.resource-card p {
	font-size: 1rem;
	color: #013A40;
	padding: 0 10px;
}

.resource-card {
	border: 1px solid #ccc;
	padding: 15px;
	border-radius: 10px;
	background-color: #F2B705;
}
/* CTA */
.Protect2 {
	text-align: center;
	padding: 20px 20px;
}
.Protect2 h2 {
	font-size: 2rem;
	margin-bottom: 20px;
}
.protect-button2 {
	background-color: #F2B705;
	color: #013A40;
	padding: 15px 30px;
	font-weight: bold;
	border-radius: 8px;
	font-size: 1rem;
	text-decoration: none;
}