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

body {
	font-family: 'Arial', sans-serif;
	line-height: 1.6;
	color: #333;
}

/* Navigation Bar */
.navbar {
	background-color: #003098;
	padding: 1rem 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: sticky;
	top: 0;
	z-index: 1000;
}

.navbar .logo a {
	color: #fff;
	font-size: 1.5rem;
	font-weight: bold;
	text-decoration: none;
}

.nav-links {
	list-style: none;
	display: flex;
	gap: 1.5rem;
}

.nav-links li a {
	color: #fff;
	text-decoration: none;
	font-size: 1rem;
	padding: 0.5rem;
}

.nav-links li a.active {
	font-weight: bold;
	text-decoration: underline;
}

.nav-links li a:hover {
	text-decoration: underline;
}

/* Dropdown Menu */
.dropdown {
	position: relative;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #003098;
	min-width: 200px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	z-index: 1;
	border-radius: 5px;
}

.dropdown-content li {
	list-style: none;
}

.dropdown-content li a {
	color: #fff;
	padding: 0.75rem 1rem;
	display: block;
	font-size: 0.9rem;
}

.dropdown-content li a:hover {
	background-color: #002080;
}

.dropdown:hover .dropdown-content {
	display: block;
}

/* Hero Section */
.hero {
	background-color: #F5F5F5;
	padding: 4rem 2rem;
	text-align: center;
}

.hero-content h1 {
	font-size: 2.5rem;
	margin-bottom: 1rem;
	color: #FE6F33;
}

.hero-content p {
	font-size: 1.2rem;
	margin-bottom: 2rem;
	color: #333;
	margin-left: 20%;
	margin-right: 20%;
}

.cta-button {
	padding: 1rem 2rem !important;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bold;
	display: inline-block;
}

.cta-button.primary {
	background-color: #FE6F33;
	color: #fff;
}

.cta-button.primary:hover {
	background-color: #FF8A50;
	color: #fff;
}

.cta-button.secondary {
	background-color: #fff;
	color: #FE6F33;
	border: 2px solid #FE6F33;
}

.cta-button.secondary:hover {
	background-color: #FE6F33;
	color: #fff;
}

/* Event Callout Box */
.event-callout {
	padding: 2rem 2rem;
	background-color: #003098;
	text-align: center;
	color: #fff;
}

.event-callout .content {
	max-width: 800px;
	margin: 0 auto;
	border: 2px solid #FE6F33;
	border-radius: 10px;
	padding: 2rem;
	background-color: rgba(0, 48, 152, 0.9);
}

.event-callout h2 {
	font-size: 2rem;
	margin-bottom: 1rem;
	color: #FE6F33;
}

.event-callout p {
	font-size: 1.1rem;
	margin-bottom: 1.5rem;
}

.event-callout .cta-button {
	background-color: #FE6F33;
	color: #fff;
}

.event-callout .cta-button:hover {
	background-color: #FF8A50;
}

/* Condensed Brand Story */
.brand-story {
	padding: 3rem 2rem;
	background-color: #fff;
	text-align: center; /* Changed from left to center */
}

.brand-story .content {
	max-width: 800px;
	margin: 0 auto;
}

.brand-story h2 {
	font-size: 2rem;
	margin-bottom: 1rem;
	color: #FE6F33;
	text-transform: uppercase;
}

.brand-story p {
	font-size: 1rem;
	color: #666;
	margin-bottom: 1.5rem;
}

.brand-story .cta-button {
	background-color: #FE6F33;
	color: #fff;
	padding: 0.75rem 1.5rem !important;
}

.brand-story .cta-button:hover {
	background-color: #FF8A50;
}

/* Social Proof */
.social-proof {
	padding: 3rem 2rem;
	background-color: #fff; /* White background to match screenshot */
	text-align: center;
}

.social-proof .content {
	max-width: 1200px;
	margin: 0 auto;
}

.social-proof h2 {
	font-size: 2rem;
	margin-bottom: 2rem;
	color: #FE6F33;
	text-transform: uppercase; /* Match screenshot */
}

.proof-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem; /* Increased gap for better spacing */
}

.proof-item {
	background-color: #fff;
	padding: 1.5rem;
	border: 1px solid #003098;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	text-align: left; /* Align left to match screenshot */
}

.proof-item p {
	font-size: 1rem;
	margin-bottom: 0.5rem;
	color: #333;
}

.proof-item em {
	font-size: 0.9rem;
	color: #999;
}

/* Redirects (Explore Our Mission) */
.redirects {
	padding: 3rem 2rem;
	background-color: #fff;
	text-align: center;
}

.redirects .content {
	max-width: 1200px;
	margin: 0 auto;
}

.redirects h2 {
	font-size: 2rem;
	margin-bottom: 2rem;
	color: #000; /* Black to match screenshot */
	text-transform: uppercase; /* Match screenshot */
}

.redirect-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem; /* Increased gap for better spacing */
}

.redirect-item {
	background-color: #fff;
	padding: 1.5rem;
	border: 1px solid #003098;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	text-align: left; /* Align left to match screenshot */
}

.redirect-item h3 {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
	color: #FE6F33;
	text-transform: uppercase; /* Match screenshot */
}

.redirect-item p {
	font-size: 1rem;
	margin-bottom: 1rem;
	color: #666;
}

.redirect-link {
	color: #003098;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase; /* Match screenshot */
}

.redirect-link:hover {
	text-decoration: underline;
}

/* Initiatives Section (ASFL Initiatives) */
.initiatives {
	padding: 3rem 2rem;
	background-color: #fff;
	text-align: center;
}

.initiatives .content {
	max-width: 1200px;
	margin: 0 auto;
}

.initiatives h2 {
	font-size: 2rem;
	margin-bottom: 2rem;
	color: #FE6F33;
	text-transform: uppercase;
}

.initiative-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
}

.initiative-item {
	background-color: #fff;
	padding: 1.5rem;
	border: 1px solid #003098;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	text-align: left;
}

.initiative-item h3 {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
	color: #FE6F33;
	text-transform: uppercase;
}

.initiative-item p {
	font-size: 1rem;
	margin-bottom: 1rem;
	color: #666;
}

.initiative-link {
	color: #003098;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
}

.initiative-link:hover {
	text-decoration: underline;
}

/* Event Details Section (Initiative Subpages) */
.event-details {
	padding: 3rem 2rem;
	background-color: #fff;
	text-align: center;
}

.event-details .content {
	max-width: 800px;
	margin: 0 auto;
}

.event-details h2 {
	font-size: 2rem;
	margin-bottom: 1rem;
	color: #FE6F33;
}

.event-details p {
	font-size: 1.1rem;
	color: #666;
	margin-bottom: 1rem;
}

/* Event Structure Section (ASFL Challenge) */
.event-structure {
	padding: 3rem 2rem;
	background-color: #F5F5F5;
	text-align: center;
}

.event-structure .content {
	max-width: 800px;
	margin: 0 auto;
}

.event-structure h2 {
	font-size: 2rem;
	margin-bottom: 1rem;
	color: #FE6F33;
}

.event-structure ul {
	list-style: none;
	font-size: 1.1rem;
	color: #666;
	text-align: left;
	max-width: 400px;
	margin: 0 auto;
}

.event-structure ul li {
	margin: 0.5rem 0;
}

/* Involvement Options Section (Get Involved) */
.involvement-options {
	padding: 3rem 2rem;
	background-color: #fff;
	text-align: center;
}

.involvement-options .content {
	max-width: 1200px;
	margin: 0 auto;
}

.involvement-options h2 {
	font-size: 2rem;
	margin-bottom: 2rem;
	color: #FE6F33;
	text-transform: uppercase;
}

.option-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
}

.option-item {
	background-color: #fff;
	padding: 1.5rem;
	border: 1px solid #003098;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	text-align: left;
}

.option-item h3 {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
	color: #FE6F33;
	text-transform: uppercase;
}

.option-item p {
	font-size: 1rem;
	margin-bottom: 1rem;
	color: #666;
}

.option-link {
	color: #003098;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
}

.option-link:hover {
	text-decoration: underline;
}

/* Volunteer Opportunities Section (Volunteer) */
.volunteer-opportunities {
	padding: 3rem 2rem;
	background-color: #fff;
	text-align: center;
}

.volunteer-opportunities .content {
	max-width: 1200px;
	margin: 0 auto;
}

.volunteer-opportunities h2 {
	font-size: 2rem;
	margin-bottom: 2rem;
	color: #FE6F33;
}

.opportunity-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
}

.opportunity-item {
	background-color: #fff;
	padding: 1.5rem;
	border: 1px solid #003098;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	text-align: left;
}

.opportunity-item h3 {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
	color: #FE6F33;
}

.opportunity-item p {
	font-size: 1rem;
	color: #666;
}

/* Event Signup Section (Volunteer) */
.event-signup {
	padding: 3rem 2rem;
	background-color: #F5F5F5;
	text-align: center;
}

.event-signup .content {
	max-width: 800px;
	margin: 0 auto;
}

.event-signup h2 {
	font-size: 2rem;
	margin-bottom: 1rem;
	color: #FE6F33;
}

.event-signup p {
	font-size: 1.1rem;
	margin-bottom: 1.5rem;
	color: #666;
}

/* Donation Impact Section (Make a Donation) */
.donation-impact {
	padding: 3rem 2rem;
	background-color: #fff;
	text-align: center;
}

.donation-impact .content {
	max-width: 800px;
	margin: 0 auto;
}

.donation-impact h2 {
	font-size: 2rem;
	margin-bottom: 1rem;
	color: #FE6F33;
}

.donation-impact p {
	font-size: 1.1rem;
	color: #666;
}

/* Donation Form Section (Make a Donation) */
.donation-form {
	padding: 3rem 2rem;
	background-color: #F5F5F5;
	text-align: center;
}

.donation-form .content {
	max-width: 800px;
	margin: 0 auto;
}

.donation-form h2 {
	font-size: 2rem;
	margin-bottom: 1rem;
	color: #FE6F33;
}

.donation-form p {
	font-size: 1.1rem;
	margin-bottom: 1.5rem;
	color: #666;
}

/* Contact Form Section (Contact Us) */
.contact-form-section {
	padding: 3rem 2rem;
	background-color: #fff;
	text-align: center;
}

.contact-form-section .content {
	max-width: 800px;
	margin: 0 auto;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.form-row {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

.form-group {
	flex: 1;
	min-width: 200px;
	display: flex;
	flex-direction: column;
	text-align: left;
}

.form-group label {
	font-size: 1rem;
	color: #333;
	margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
	padding: 0.75rem;
	border: 1px solid #003098;
	border-radius: 5px;
	font-size: 1rem;
}

.form-group textarea {
	resize: vertical;
	min-height: 100px;
}

.form-group input:focus,
.form-group textarea:focus {
	outline: none;
	border-color: #FE6F33;
}

/* Support Us Section (Contact Us) */
.support-us {
	padding: 3rem 2rem;
	background-color: #F5F5F5;
	text-align: center;
}

.support-us .content {
	max-width: 800px;
	margin: 0 auto;
}

.support-us h2 {
	font-size: 2rem;
	margin-bottom: 1rem;
	color: #FE6F33;
	text-transform: uppercase;
}

.support-us h3 {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
	color: #FE6F33;
}

.support-us p {
	font-size: 1.1rem;
	margin-bottom: 1rem;
	color: #666;
}

.support-us a:not(.cta-button) {
	color: #003098;
	text-decoration: none;
	font-weight: bold;
}

.support-us a:not(.cta-button):hover {
	text-decoration: underline;
}

/* Blog Posts Section (News) */
.blog-posts {
	padding: 3rem 2rem;
	background-color: #fff;
	text-align: center;
}

.blog-posts .content {
	max-width: 1200px;
	margin: 0 auto;
}

.blog-posts h2 {
	font-size: 2rem;
	margin-bottom: 2rem;
	color: #FE6F33;
	text-transform: uppercase;
}

.post-grid {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.post-item {
	background-color: #fff;
	padding: 1.5rem;
	border: 1px solid #003098;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	text-align: left;
}

.post-image {
	width: 400px;
	height: 250px;
	background-color: #E3F1EF;
	border-radius: 5px;
	margin-bottom: 1rem;
}

.post-item p {
	font-size: 1rem;
	margin-bottom: 1rem;
	color: #666;
}

.post-link {
	color: #003098;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
}

.post-link:hover {
	text-decoration: underline;
}


/* Final CTA */
.final-cta {
	padding: 3rem 2rem;
	background-color: #003098;
	text-align: center;
	color: #fff;
}

.final-cta .content {
	max-width: 600px;
	margin: 0 auto;
}

.final-cta h2 {
	font-size: 2rem;
	margin-bottom: 0.5rem;
}

.final-cta p {
	font-size: 1.1rem;
	margin-bottom: 1rem;
}

.final-cta .cta-button {
	background-color: #FE6F33;
	color: #fff;
}

.final-cta .cta-button:hover {
	background-color: #FF8A50;
}

/* Mission Section (About Us) */
.mission {
	padding: 3rem 2rem;
	background-color: #fff;
	text-align: center;
}

.mission .content {
	max-width: 800px;
	margin: 0 auto;
}

.mission h2 {
	font-size: 2rem;
	margin-bottom: 1rem;
	color: #FE6F33;
}

.mission p {
	font-size: 1.1rem;
	color: #666;
}

/* Story Section (Our Story) */
.story {
	padding: 3rem 2rem;
	background-color: #fff;
	text-align: center;
}

.story .content {
	max-width: 800px;
	margin: 0 auto;
}

.story h2 {
	font-size: 2rem;
	margin-bottom: 1rem;
	color: #FE6F33;
}

.story p {
	font-size: 1.1rem;
	color: #666;
	margin-bottom: 1rem;
}

/* Partners Section (Sponsors and Partners) */
.partners {
	padding: 3rem 2rem;
	background-color: #F5F5F5;
	text-align: center;
}

.partners .content {
	max-width: 1200px;
	margin: 0 auto;
}

.partners h2 {
	font-size: 2rem;
	margin-bottom: 2rem;
	color: #FE6F33;
}

.partner-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.5rem;
}

.partner-item {
	background-color: #fff;
	padding: 1.5rem;
	border: 1px solid #003098;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.partner-item h3 {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
	color: #FE6F33;
}

.partner-item p {
	font-size: 1rem;
	color: #666;
}

/* Sponsor CTA (Sponsors and Partners) */
.sponsor-cta {
	padding: 3rem 2rem;
	background-color: #fff;
	text-align: center;
}

.sponsor-cta .content {
	max-width: 600px;
	margin: 0 auto;
}

.sponsor-cta h2 {
	font-size: 2rem;
	margin-bottom: 1rem;
	color: #FE6F33;
}

.sponsor-cta p {
	font-size: 1.1rem;
	margin-bottom: 1.5rem;
	color: #666;
}

/* Research Section (What We Fund) */
.research {
	padding: 3rem 2rem;
	background-color: #fff;
	text-align: center;
}

.research .content {
	max-width: 800px;
	margin: 0 auto;
}

.research h2 {
	font-size: 2rem;
	margin-bottom: 1rem;
	color: #FE6F33;
}

.research p {
	font-size: 1.1rem;
	color: #666;
	margin-bottom: 1rem;
}

/* Explore More (About Us) */
.explore-more {
	padding: 3rem 2rem;
	background-color: #fff;
	text-align: center;
}

.explore-more .content {
	max-width: 1200px;
	margin: 0 auto;
}

.explore-more h2 {
	font-size: 2rem;
	margin-bottom: 2rem;
	color: #000; /* Black to match redirects section */
	text-transform: uppercase;
}

.redirect-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 2rem;
}

.redirect-item {
	background-color: #fff;
	padding: 1.5rem;
	border: 1px solid #003098;
	border-radius: 5px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	text-align: left;
}

.redirect-item h3 {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
	color: #FE6F33;
	text-transform: uppercase;
}

.redirect-item p {
	font-size: 1rem;
	margin-bottom: 1rem;
	color: #666;
}

.redirect-link {
	color: #003098;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
}

.redirect-link:hover {
	text-decoration: underline;
}

/* Footer */
footer {
	padding: 1rem 2rem;
	background-color: #333;
	color: #fff;
	text-align: center;
}

.footer-links {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-top: 0.5rem;
}

.footer-links li a {
	color: #fff;
	text-decoration: none;
}

.footer-links li a:hover {
	text-decoration: underline;
}

/* Fade-In Animation */
.fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s ease-in, transform 0.5s ease-in;
}

.fade-in.visible {
	opacity: 1;
	transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
	.navbar {
		flex-direction: column;
		gap: 1rem;
	}

	.nav-links {
		flex-direction: column;
		gap: 0.5rem;
	}

	.dropdown-content {
		position: static;
		box-shadow: none;
		background-color: #002080;
	}

	.hero-content h1 {
		font-size: 2rem;
	}

	.hero-content p {
		margin-left: 10%;
		margin-right: 10%;
	}

	.event-callout .content {
		padding: 1.5rem;
	}

	.proof-grid,
	.redirect-grid,
	.partner-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem; /* Slightly reduced gap for mobile */
	}

	.footer-links {
		flex-direction: column;
		gap: 0.5rem;
	}
}