/* Color Scheme */
:root {
	/*--documentBG: #CCC8B7;*/
}
@media (prefers-color-scheme: dark) {:root {
}}


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

.container {
	width: 90%;
	max-width: 75rem; /* 1200px = 75rem */
	margin: 0 auto;
}

/* Header and Navbar */
.headerBG {
	position: absolute;
	z-index: -1;
	top: 0; left: 0; right: 0;
	overflow-x: hidden;
	height: 15rem;
	background-repeat: no-repeat;
	background-size: cover;
	background-image:
		linear-gradient(transparent 55%, #CCC8B7),
		url('../../formatting/images/background serene soft neutral fresh relaxing header.jpg'),
		radial-gradient(ellipse at top right,
		#CE875E 0%,  /* salmon tone */
		#D28B65 5%,  /* salmon tone */
		#E0A078 15%,  /* salmon tone */
		#EBD0A9 33%, /* beige tone */
		#CAC3A1 34%, /* muted green tone dark */
		#D0CBAB 41%, /* muted green tone light */
		#B0B899 42%, /* pastel green tone light */
		#8DA68A 56%, /* pastel green tone dark */
		#D9D2BA 57%, /* grey light*/
		#CDC7B0 63%, /* grey dark */
		#E4DDC6 66%, /* paper dark */
		#E8DFC4 100% /* paper light */
		);
}

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2rem 0;
	width: 90%;
	margin: 0 auto 1rem;
}

.logo {
	font-size: 3.5em;
	color: #ef9c61;
	/*color: #c38b63;*/
	/*color: #40bfbf;*/
	/*color: #b55613;*/
	text-shadow: -0.03em 0.03em 0.1em black;
}

.logo img {
	height: 4rem;
	width: 4rem;
	vertical-align: bottom;
	margin: 0;
}

.nav-links {
	list-style: none;
	display: flex;
	gap: 1.25rem; /* 20px = 1.25rem */
}

.nav-links li a {
	text-decoration: none;
	color: #2c3e50;
	font-size: 1.2em;
	font-weight: bold;
}

.cta-btn {
	background-color: #27ae60;
	color: white;
	padding: 0.625rem 1.25rem; /* 10px = 0.625rem, 20px = 1.25rem */
	border-radius: 0.3125rem; /* 5px = 0.3125rem */
	text-decoration: none;
	transition: background-color 0.3s;
}

.cta-btn:hover {
	background-color: #1e8449;
}


/* Hero Section */
.hero {
	text-align: center;
	padding: 1rem 0; /* 80px = 5rem */
}

.hero-content h1 {
	font-size: 2.5em; /* 40px = 2.5em */
	color: #2c3e50;
	margin-bottom: 1.1em;
}

.hero-content h2 {
	font-style: italic;
}

section, .section {
	padding: 2rem 0; /* 50px = 3.125rem */
	margin: 1rem 0 3rem;
}

.flex {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	text-align: center;
}

.flex p {line-height: 1.3em;}

.flex .cta-btn {
	display: inline-block;
}

.column {
	background: #b4bfaa;
	padding: 2rem 1rem 1rem;
	border-radius: .5rem;
}

.one-column {
	margin: 0 5%;
}

.one-column .column {
	padding-left: 5%;
	padding-right: 5%;
}

.two-column .column {
	width: 45%;
}

.column h2 {
	font-size: 2em; /* 32px = 2rem */
	color: #2c3e50;
}

p {
	font-size: 1.1em;
	margin: 1.25rem 0; /* 20px = 1.25rem */
}


/* Footer Section */
.footer {
	background-color: #2c3e50;
	color: white;
	text-align: center;
	padding: 2.5rem 0; /* 40px = 2.5rem */
	margin-top: 2rem;
}

.footer p {
	font-size: 1.2em;
}

.social-links {
	list-style: none;
	display: flex;
	justify-content: center;
	gap: 1rem; /* 15px = 0.9375rem */
	margin-top: 0.625rem; /* 10px = 0.625rem */
}

.social-links li a {
	text-decoration: none;
	color: white;
	font-size: 1.2em;
}

/* Responsive Design */
@media (max-width: 48rem) { /* 768px = 48rem */
	.flex {
		text-align: center;
	}

	.empower, .donate {
		width: 100%;
		margin-bottom: 1.875rem; /* 30px = 1.875rem */
	}

	h1 {
		font-size: 2em; /* 32px = 2rem */
	}

	.cta-btn {
		padding: 0.75rem 1.25rem; /* 12px = 0.75rem, 20px = 1.25rem */
		font-size: 1em;
	}

	.icon img {
		width: 3.75rem; /* 60px = 3.75rem */
		height: 3.75rem; /* 60px = 3.75rem */
	}
}