/* Department CSS Document */
/*For mobile first adaptive design place styles for mobile and up in the mobile and up area.
Place styles for tablet and up inside the media query in the tablet and up area.
Place styles for desktop only inside the media query in the desktop only area.

For questions or media query training contact Web Development Services.
*/
/* ====================== Mobile and Up ========================== */


/* --------------- Universal Applications ----------------- */

#h1-header {
	font-weight: bold;
	font-size: 40px;
	line-height: 0.9;
}

.rajdhani {
	font-family: 'Rajdhani', sans-serif;
}

.lower-title {
	font-family: "Georgia", 'PT-serif', serif;
	font-style: italic;
	font-weight: 300;
	font-size: 40px;
}

.sub-title-1 {
	text-align: center;
	padding-bottom: 30px;
	font-weight: bold;
	font-size: 48px;
}

/* =====================
HIGHLIGHT TEXT
===================== */
.highlight-text {
	font-size: 36px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 1.5;
	color: #2f6b4f;
	text-decoration: underline;
	text-decoration-thickness: 5px;
	text-underline-offset: 7px;
}

.highlight-text-2 {
	font-size: 24px;
	font-weight: 600;
	color: black;
	text-decoration: underline;
	text-decoration-thickness: 5px;
	text-underline-offset: 7px;
	text-decoration-color: #c4d979;
	line-height: 1.5;
}

/* =====================
LEFT → RIGHT REVEAL
===================== */
.reveal {
	opacity: 0;
	transform: translateX(-50px);
	animation: slideIn 0.8s ease forwards;
}

/* slight delay for paragraph */
.body.reveal {
	animation-delay: 1s;
}

@keyframes slideIn {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}



/* Header Image Slant */

.slanted-header {
	background-position: center;
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); /* Slants the bottom: 0 0 (top-left) to 100% 0 (top-right) to 100% 90% (bottom-right) to 0 100% (bottom-left) */
	z-index: 1;
}


/* Title */
.header-titles {
	font-size: 32px;
	color: #1f3d2b;
	margin-bottom: 50px;
}

.title span {
	font-style: italic;
	font-weight: normal;
}

/* Row */
.toc-row {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 14px;
}

/* Cards */
.toc-card {
	width: 150px;
	height: 170px;
	background: white;
	border: 2px solid #c4d979;
	color: #275d38;
	text-decoration: none;

	display: flex;
	align-items: center;
	justify-content: center;

	/* creates parallelogram */
	transform: skewY(-2.55deg) translateY(calc(var(--i) * -12px));
	transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;

	--i: 0;
}

/* Keep text straight */
.toc-card span {
	display: block;
	transform: skewY(2.55deg);
	padding: 15px;
	text-align: center;
}

/* Step upward to the right */
.toc-card:nth-child(1) { --i: 0; }
.toc-card:nth-child(2) { --i: .60; }
.toc-card:nth-child(3) { --i: 1.2; }
.toc-card:nth-child(4) { --i: 1.8; }
.toc-card:nth-child(5) { --i: 2.4; }
.toc-card:nth-child(6) { --i: 3.0; }
.toc-card:nth-child(7) { --i: 3.6; }
.toc-card:nth-child(8) { --i: 4.2; }

/* Hover: lift 20px */
.toc-card:hover {
	color: #000000;
	transform: skewY(-4deg) translateY(calc(var(--i) * -12px - 10px));
	background: #c4d979;
	box-shadow: 0 12px 24px rgba(0,0,0,0.18);
	z-index: 5;
	text-decoration: none;
}



/* NEXT Banner Button */
.next-button {
	font-size: 36px;
	font-family: 'Rajdhani', sans-serif;
	color: white;
	background-color: #275d38;
	text-align: center;
	text-decoration: none;
	padding: 30px;
	display: flex;
	justify-content: center;	
	align-content: center;
	flex-direction: column;
}

.next-button:hover {
	background-color: #009933;
	color: white;
	text-decoration: none;
	transition: ease-in .5s;
	box-shadow: inset 1000px 0 0 0 rgb(0, 153, 51);
}

.next-text {
	letter-spacing: 1px;
}

.next-link {
	font-weight: bold;
	letter-spacing: 2px;
}

.arrow {
	font-size: 31px;
}

a span arrow:hover {
	padding-left: 30px;
	transition: ease-in .5s;
}


/* BANNER IMAGE */

.banner-image {
	margin-top: -65px;
}



.toc-menu-desktop {
	display: none;
}

.toc-menu-mobile {
	display: contents;
}

.toc-border {
	position: relative;
	border: 2px solid #a8c66c;
	padding: 10px 10px;
	text-align: center;
	display: block;
	font-size: 5vw;
}

.img-top-margin {
	margin-top: -20px;
}

.slant-border {
	border: 2px solid #c4d979;

	/* creates parallelogram */
	transform: skewY(-5deg) translateY(calc(var(--i) * -12px));

	--i: 0;
}

.slant-back {
	display: block;
	transform: skewY(5deg);
	padding: 15px;
}


.slant-border-green-bg {
	background-color: #275d38;

	/* creates parallelogram */
	transform: skewY(-5deg) translateY(calc(var(--i) * -12px));

	--i: 0;
}

.slant-back-green-bg {
	display: block;
	transform: skewY(5deg);
	padding: 15px;
}


.green-quote {
	color: #275d38;
	font-family: 'Rajdhani', sans-serif;
	font-size: 28px;
	font-weight: bold;
}

.mobile-center {
	text-align: center;
}



.margin-top-1 {
	margin-top: 115px;
}

.margin-top-2 {
	margin-top: -150px;
}


.vertical-center {
	justify-content: center;
	display: flex;
	flex-direction: column;
}
/*
.mobile-col-reverse div div {
	flex-direction: column-reverse;
    display: flex;
}
*/

.quote-icon {
	position: absolute;
    top: -25px;
    left: 1px;
    z-index: -1;
}

.center-mobile {
	text-align: center;
}

.line-height {
	line-height: 1.5;
}





/* ------------------------------------------------ Horizontal Scroll ------------------------------------------ */






/* --------------- PRESSIDENT'S MESSAGE ----------------- */

.eg-logo {
	width: 40%;
	margin: 20px 0px 10px 0px;
	filter: none;
}

.president-banner {
	width: 100%;
	margin-top: -60px;
	clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}




/* --------------- SEED to STRENGTH ----------------- */

.highlight-text-3 {
	font-size:72px;
	font-weight: bold;
	text-transform: uppercase;
	color: #2f6b4f;
	text-decoration: underline;
	text-decoration-thickness: 5px;
	text-underline-offset: 7px;
}

.quote-border {
	border: 3px solid #275d38;
	clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);

}

.quote-img {
	clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

.highlight-text-name {
	font-size: 30px;
	font-weight: 600;
	color: #009900;
	padding-top: 15px;
	display: inline-block;
	font-family: 'Rajdhani', serif;
}

.stat-box {
	position: relative;
	border: 2px solid #a8c66c;
	padding: 45px 20px 20px;
	text-align: center;
}

.stat-box-2 {
	position: relative;
	border: 2px solid #a8c66c;
	padding: 20px 20px 20px;
	text-align: center;
}



.border-icon {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	background: white;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 25px;
	padding-right: 15px;
	font-size: 28px;
	color: #2f6b4f;  
	text-align: center;
}

.dark-green-background {
	background-color: #1b331d;
}

.top-slant {
	clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 100%);
	padding-top: 150px;
}

.numbers-border {
	border: 2px solid #c4d979;

	/* creates parallelogram */
	transform: skewY(-2.55deg) translateY(calc(var(--i) * -12px));

	--i: 0;
}

/* Keep text straight */
.numbers {
	display: block;
	transform: skewY(2.55deg);
	padding: 15px;
}



.numbers-title {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #1b331d;
	padding: 15px 15px 0px 25px;
	margin-top: -10px;
	font-size: 60px;
	color: white;  
	text-align: center;
	font-weight: bold;
}

.numbers-subtitle {
	color: #c4d979;
	font-style: italic;
	font-family: 'PT-serif', serif;
	font-size: 40px;
}

.total-donors {
	color: black;
	margin-top: 0px;
	font-size: 72px;
}

.gift-numbers {
	font-weight: bold;
	font-family: 'Rajdhani';
	font-size: 36px;
	padding-bottom: 0px;
	margin-bottom: 0px;
}

.rajdhani-black-1 {
	font-family: 'Rajdhani', ariel;
	font-weight: bold;
	color: black;
	font-size: 38px;
	text-transform: uppercase;
	margin-bottom: 0px;
}

.pt-serif-1 {
	font-family: 'PT-serif', serif;
	font-weight: bold;
	color: black;
	font-style: italic;
	font-size: 28px;
}

.pt-serif-2 {
	font-family: 'PT-serif', serif;
	font-size: 28px;
}

.pt-serif-3 {
	font-size: 45px;
	margin-bottom: 0px;
	font-family: 'Rajdhani';
	font-weight: bold;
}

.icon-position-1 {
	text-align: center;
}

.text-align-1 {
	text-align: center;
}



.green-highlight {
	background-color: #008a40; 
	color: white; 
	display:inline-block;
}

.goldenrod-highlight {
	background-color: #d7ac5e; 
	color: black; 
	display:inline-block;
}

.mint-highlight {
	background-color: #c0dcc7; 
	color: black; 
	display:inline-block;
}

.red-highlight {
	background-color: #bf4c30; 
	color: white; 
	display:inline-block;
}

.percent-size {
	font-size: 38px;
	font-family: 'pt-serif', serif;
	font-style: italic;
	font-weight: bold;
	padding: 0px 10px;
	margin-bottom: 3px;
}

.font-95 {
	font-size: 15vw;
	text-align: center;
}




/* --------------- ROOTED in ACCESS ----------------- */


.stat-box-slant {
	position: relative;
	border: 2px solid #a8c66c;
	padding: 45px 20px 20px;
	text-align: center;
	/* creates parallelogram */
	transform: skewY(-2.55deg) translateY(calc(var(--i) * -12px));
	transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
	--i: 0;

	/* Keep text straight */
	transform: skewY(2.55deg);
	padding: 15px;
	text-align: center;
}

.light-highlight-numbers {
	font-family: 'Rajdhani', serif;
	font-size: 42px;
	background: #c4d979;
	color: black;
	padding: 0px 10px;
	display: inline-block;
	font-weight: bold;
}

.rt-underline-text {
	font-size: 28px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 1.5;
	color: #275d38;
	text-decoration: underline;
	text-decoration-thickness: 5px;
	text-underline-offset: 7px;
}

.rt-highlight-text {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.5;
    color: #2f6b4f;
	text-decoration: underline;
	text-decoration-thickness: 5px;
	text-underline-offset: 7px;
}

.rt-highlight-text-name {
	font-size: 20px;
	font-weight: 600;
	background: #009933;
	color: white;
	padding: 6px 10px;
	line-height: 1.3;
}



/* --------------- IMPACT of YOUR GIFT ----------------- */

#ioyg-header-padding {
	padding: 40px 20px;
}

.text-275d38 {
	color: #275d38;
}

.subtitle-highlight {
	font-size: 22px;
	font-weight: bold;
	color: white;
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
    text-decoration-color: #009933;
}

.sub-paragraph {
	padding: 10px 150px;
	font-size: 32px;
}

.sub-paragraph {
	padding: 10px 0px;
	font-size: 32px;
}

.highlight-275d38 {
	font-size: 24px;
    font-weight: bold;
    color: #275d38;
    display: inline-block;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
    text-decoration-color: #009933;
}

.highlight-009933 {
	font-size: 24px;
	font-weight: bold;
	/* background: #009933; */
	color: #009933;
	padding: 0px 10px;
	display: inline-block;
}

.highlight-66cc33 {
	font-size: 20px;
	font-weight: bold;
	background: #66cc33;
	color: white;
	padding: 0px 10px;
	display: inline-block;
}

.width-30 {
	width: 100%;
}

.width-40 {
	width: 40%;
}

.width-60 {
	width: 60%;
}

.width-70 {
	width: 100%;
}

.margin-15 {
	margin: 15px;
}

.quote-margin {
	    margin-top: -30px;
}

.bottom-border-a8c66c {
	border-bottom: 2px solid #a8c66c;
}


.slanted-header-top {
	margin-top: -150px;
	clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%);
}

.light-grey-bg {
	margin-top: -150px;
	padding-top: 140px;
}

.margin-top-25 {
	margin-top: -25px;
}

.margin-top-30 {
	margin-top: 30px;
}




/* --------------- CULTIVATING INNOVATION ----------------- */


.slant-border-275d38 {
border: 2px solid #275d38;

	/* creates parallelogram */
	transform: skewY(-5deg) translateY(calc(var(--i) * -12px));

	--i: 0;
}

.stat-box-3 {
	position: relative;
	border: 2px solid #275d38;
	padding: 20px 20px 20px;
	text-align: center;
}

.stat-box-4 {
	position: relative;
	background-color: #1a321c;
	padding: 20px;
	text-align: center;
		/* creates parallelogram */
	transform: skewY(-5deg) translateY(calc(var(--i) * -12px));

	--i: 0;
}

.stat-box-5 {
	position: relative;
	border: 2px solid #1a321c;
	padding: 20px;
	text-align: center;
		/* creates parallelogram */
	transform: skewY(-5deg) translateY(calc(var(--i) * -12px));

	--i: 0;
}

.total-donors-2 {
	color: white;
	font-size: 72px;
}

.numbers-title-2 {
	font-size: 60px;
	color: white;  
	text-align: center;
	font-weight: bold;
}

.scet-highlight-text {
    font-size: 58px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.5;
    color: #2f6b4f;
    text-decoration: underline;
    text-decoration-thickness: 5px;
    text-underline-offset: 7px;
}

.quote-icon-soccer {
    position: absolute;
    top: -22px;
    left: 0px;
    z-index: -1;
}



/* --------------- a SHARED HARVEST ----------------- */

  .title-success {
    position: absolute;
    top: 0;
    transform: translate(-0%, -50%);
    background: white;
    padding: 15px 15px 0px 25px;
    margin-top: -10px;
    font-size: 28px;
    color: #2f6b4f;
    text-align: center;
    font-weight: bold;
    font-family: 'Rajdhani';
  }

.width-35 {
	width: 100%;
}

.width-15 {
	width: 100%;
}

.background-f2f0eb {
	background-color: #f2f0eb;
}

.slanted-top-harvest {
	clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
}

.stat-box-6 {
	position: relative;
	padding: 20px;
	text-align: center;
		/* creates parallelogram */
	transform: skewY(-3deg) translateY(calc(var(--i) * -12px));

	--i: 0;
}

.slant-back-6 {
	display: block;
	transform: skewY(3deg);
	padding: 15px;
}




/* --------------- the NEXT RING of GROWTH ----------------- */


.width-20 {
	width: 100% !important;
}

	.width-14 {
	width: 100% !important;
}


/* --------------- an EVERGREEN LEGACY ----------------- */

.highlight-text-4 {
	font-size: 28px;
	font-weight: 600;
	color: black;
	text-decoration: underline;
	text-decoration-thickness: 5px;
	text-underline-offset: 7px;
	text-decoration-color: #c4d979;
	line-height: 1.5;
}

.highlight-text-white {
	font-size:40px;
	font-weight: bold;
	text-transform: uppercase;
	color: white;
	text-decoration: underline;
	text-decoration-thickness: 5px;
	text-underline-offset: 7px;
	text-decoration-color: #c4d979;
	line-height: 1.5;
}

.highlight-text-white span {
	color: #c4d979;
}

.highlight-text-white span a {
	font-size: 48px;
	font-weight: 600;
	color: #c4d979;
	text-decoration: underline;
	text-decoration-thickness: 5px;
	text-underline-offset: 7px;
	text-decoration-color: #c4d979;
	line-height: 1.5;
}

.highlight-text-white span a:hover {
	color: white;
	text-decoration: none;
}

.legacy-bg {
	background-image: url("/evergreen/images/evergreen-close/legacy/legacy-footer.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right; /* Centers the image within the container */
    background-attachment: unset; /* Keeps the background image fixed in the viewport during scroll (optional) */
    height: 50vh; /* Ensures the body covers the full height of the viewport */
    margin: 0; /* Removes default body margin */
    padding: 0; /* Removes default body padding */
}






/* ====================== Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 768px) {


	#h1-header {
		font-size: 80px;
	}

	.lower-title {
		font-family: Pt-serif;
		font-style: italic;
		font-weight: 300;
		font-size: 60px;
	}

	.next-button {
		flex-direction: row;
	}
	/*
	.mobile-col-reverse {
		flex-direction: row;
    	display: flex;
	}*/
	
	.quote-icon {
	position: absolute;
    top: 30px;
    left: -20px;
    z-index: -1;
}


	/* --------------- universal applications ----------------- */


	.toc-menu-desktop {
		display: contents;
	}

	.toc-menu-mobile {
		display: none;
	}

	.mobile-center {
		text-align: left;
	}

	.center-mobile {
	text-align: left;
	}
	
	.margin-top-30 {
	margin-top: 0px;
}


	/* --------------- PRESSIDENT'S MESSAGE ----------------- */

	.eg-logo {
		margin: 20px 0px 25px 0px;
	}

	.president-banner {
		margin-top: -90px;
		width: 100%;
		clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
	}



	/* --------------- SEED to STRENGTH ----------------- */

	.top-slant {
		clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%);

	}

	.icon-position-1 {
		text-align: right;
	}

	.text-align-1 {
		text-align: left;
	}


	/* --------------- ROOTED in ACCESS ----------------- */


	.green-quote-2 {
		color: #275d38;
		font-family: 'Rajdhani', sans-serif;
		font-size: 22px;
		font-weight: bold;
	}

	.highlight-text-root {
		font-size: 28px;
		font-weight: bold;
		text-transform: uppercase;
		line-height: 1.5;
		background: #2f6b4f;
		color: white;
		padding: 6px 10px;

		/* key for multi-line highlight */
		box-decoration-break: clone;
		-webkit-box-decoration-break: clone;
	}


	/* --------------- IMPACT of YOUR GIFT ----------------- */

	#ioyg-header-padding {
		padding: 80px 20px;
	}

	.subtitle-highlight {
		font-size: 65px;
		padding: 5px 25px;
	}

	.sub-paragraph {
		padding: 10px 150px;
		font-size: 32px;
	}
	
	.quote-margin {
	    margin-top: 0px;
}
	
		.slanted-header-top {
		margin-top: -150px;
		clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
	}
	
	
	.width-30 {
	width: 28%;
}

.width-70 {
	width: 67%;
}
	
	.highlight-275d38 {
	font-size: 24px;
    font-weight: bold;
    color: #275d38;
    display: inline-block;
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 7px;
    text-decoration-color: #009933;
}


	/* --------------- CULTIVATING INNOVATION ----------------- */

    .quote-icon-soccer {
        position: absolute;
        top: 90px;
        left: -20px;
        z-index: -1;
    }

	/* --------------- a SHARED HARVEST ----------------- */


	.width-35 {
	width: 35%;
}

.width-15 {
	width: 15%;
}

	/* --------------- the NEXT RING of GROWTH ----------------- */
	
	.highlight-text-white {
		font-size:48px;
	}
	
	.highlight-text-white span a {
		font-size:48px;
	}

	.legacy-bg {
    	background-position: center; /* Centers the image within the container */
    	background-attachment: fixed; /* Keeps the background image fixed in the viewport during scroll (optional) */
		height: 75vh; /* Ensures the body covers the full height of the viewport */
}

	.width-20 {
	width: 20% !important;
}
	
	.width-14 {
	width: 14% !important;
}



}


/*end media query*/
/*End tablet and up styles*/
/* ====================== Landscape Tablet and Up (Overrides Mobile Styles) ========================== */
@media only screen and (min-width: 992px) {

	/* --------------- universal applications ----------------- */

	#h1-header {
		font-size: 100px;
	}

	.president-banner {
		margin-top: -110px;
		width: 100%;
		clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
	}



	/* --------------- PRESSIDENT'S MESSAGE ----------------- */



	/* --------------- SEED to STRENGTH ----------------- */


	.top-slant {
		clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);

	}

	.font-95 {
		font-size: 95px;
		text-align: left;
	}
	
	


	/* --------------- ROOTED in ACCESS ----------------- */



	/* --------------- IMPACT of YOUR GIFT ----------------- */

	.slanted-header-top {
		margin-top: -150px;
		clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 100%);
	}

	/* --------------- CULTIVATING INNOVATION ----------------- */



	/* --------------- a SHARED HARVEST ----------------- */



	/* --------------- the NEXT RING of GROWTH ----------------- */



}

/*end media query*/
/*End landscape tablet and up styles*/
/* ====================== Desktop Only (Overrides Mobile and Tablet Styles) ========================== */
@media only screen and (min-width: 1200px) {

	/* --------------- universal applications ----------------- */



	/* --------------- PRESSIDENT'S MESSAGE ----------------- */



	/* --------------- SEED to STRENGTH ----------------- */



	/* --------------- ROOTED in ACCESS ----------------- */



	/* --------------- IMPACT of YOUR GIFT ----------------- */



	/* --------------- CULTIVATING INNOVATION ----------------- */



	/* --------------- a SHARED HARVEST ----------------- */



	/* --------------- the NEXT RING of GROWTH ----------------- */



}

/*end media query*/
/*End desktop only styles*/
/*END OF DOCUMENT*/