/* ---------GLOBAL----------- */

:root
{
--green:#ddf5e3;
--dark:#234b39;
--mint:#eaf3ed;
--cream:#fffaf1;
--ink:#26352d;
--muted:#6d737b;
--line:#dfe7e1;
--navy:#102845;
--teal:#0e9ab2;
--teal-dark:#087d93;
--blue:#dff3fb;
--peach:#fff0e9;
}

*
{
	box-sizing: border-box;
	scroll-behavior: smooth;
}

body
{
	margin: 0;
	color: var(--navy);
	background: var(--cream);
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.6;
}


.primary-button,
.outline-button
{
	border: 0;
	border-radius: 28px;
	padding: 13px 25px;
	font-weight: 800;	
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
}

.primary-button
{
    	display: inline-flex;
    	align-items: center;
    	gap: 10px;
    	border-radius: 28px;
    	padding: 13px 25px;
    	font-weight: 800;
    	text-decoration: none;
    	transition: transform 0.2s ease, box-shadow 0.2s ease;
	background: var(--teal);
    	color: white;
    	box-shadow: 0 8px 20px rgba(14,154,178,0.22);
}


button, input 
{
    	font: inherit;
}

button 
{
    	cursor: pointer;
}

a
{
	color: inherit;
}


.eyebrow,
.section-kicker
{
	margin: 0 0 8px;
    	font-size: 12px;
    	font-weight: 800;
    	letter-spacing: 3px;
    	color: var(--teal-dark);
}

.hero h2,
.page-hero h2,
.page-hero-CL h2,
.page-hero-aboutus h2,
.page-hero-ALL h2,
.page-hero-CATEGORIES h2
{
    	margin: 0;
    	max-width: 700px;
    	font-family: Georgia, "Times New Roman", serif;
    	font-size: clamp(44px, 5vw, 66px);
    	line-height: 1.02;
    	color: var(--navy);
}

.hero h2 span,
.page-hero h2 span,
.page-hero-CL h2 span,
.page-hero-ALL h2 span
{
	color: var(--teal);
}


.page-hero-inner
{
	max-width: 1160px;
	width: 100%;
	margin: auto;
	padding: 64px 22px;
}

/* ---------HEADER----------- */


.site-header 
{
	height: 82px;
	
    	padding: 0 6%;
    	background: rgba(255,255,255,0.98);
    	display: flex;
    	align-items: center;
    	justify-content: space-between;
    	position: sticky;
    	top: 0;
    	z-index: 100;
    	box-shadow: 0 2px 12px rgba(16,40,69,0.06);
}

.logo 
{
    	width: 150px;
    	height: 65px;
}

.logo img 
{
	margin: -10px 1px 1px 5px;    	
	width: 100%;
    	height: 100%;
    	object-fit: contain;
}

.brand 
{
    	display: flex;
    	align-items: center;
    	gap: 12px;
    	text-decoration: none;
}


.brand h1 
{
    	margin: -20px 3px 1px -60px;
    	font-family: Georgia, "Times New Roman", serif;
    	font-size: 31px;
    	line-height: 1;
    	color: var(--navy);
	
}

.brand h1 span 
{
    	color: (--teal);
}

.brand p 
{
    	margin: 2px 3px 1px -60px;
    	font-size: 14px;
    	font-style: italic;
    	color: #53606f;
}

.main-nav 
{
    	display: flex;
	text-align: right;
    	align-items: center;
    	gap: 30px;
    	list-style: none;
    	margin: 0;
    	margin-left: auto;
    	padding: 0;
}

.nav-link 
{
    	text-decoration: none;
    	font-weight: 700;
    	color: var(--navy);
    	padding: 28px 0 23px;
    	border-bottom: 3px solid transparent;
    	transition: 0.2s ease;
}

.nav-link:hover	 
{
    	transform: translateY(-5px);
	color: var(--teal-dark);
    	border-bottom-colour: var(--teal);
}


.page-hero
{
	min-height: 385px;
    	position: relative;
    	overflow: hidden;
    	display: flex;
    	align-items: center;
    	background:
        linear-gradient(90deg, rgba(255,248,235,0.98) 25%, rgba(255,248,235,0.92) 38%, rgba(255,248,235,0.16) 75%), url("Joyful Multigenerational Park Gathering.png?auto=format&fit=crop&w=1800&q=90")
        center/cover;
}

.page-hero p
{
	max-width: 720px;
	
	margin-bottom: 0;
}

.category-card
{
	border: 0;
    	border-radius: 18px;
    	padding: 23px;
    	
    	justify-content: center;
   
    	align-items: center;
    	gap: 14px;
    	text-align: center;
    	color: var(--navy);
    	transition: transform 0.2s ease;
	background: white;
	text-decoration: none;
}


.college-card 
{ 
	background: #d9f2fc; 
}

.social-card 
{ 
	background: #ffe9e0; 
}

.growth-card 
{ 
	background: #dff5e5; 
}

.category-icon
{
	font-size: 22px;
    	text-align: center;
}

.category-card strong
{
	
	text-align: center;
    	font-family: Georgia, "Times New Roman", serif;
    	font-size: 18px;
}

.category-card small
{
	display: block;
    	margin-top: 3px;
    	color: #56616c;
    	line-height: 1.35;
}

.circle-arrow
{
	
	
    	place-items: center;
    	width: 36px;
    	height: 36px;
    	border-radius: 50%;
    	background: white;
    	font-weight: 900;
    	font-size: 20px;
}


.content-wrap
{
	max-width: 1160px;
	margin: auto;
	padding: 48px 22px 65px;
}

.content-wrap h3, p, ul, a
{
	margin-top: 26px;
	margin-left: 40px
}

.post-list
{
	display: block;
	margin: auto;
	gap: 16px;
    	
}


.post-item
{
	display: block;
	margin: 5px 70px;
	border: 1px solid var(--line);
	border-radius: 13px;
	padding: 30px;
	background: #ffffff;
}

.post-item h3
{
	margin: 7px 0;
}

.post-item p
{
	
	color: var(--muted);
	margin-bottom: 0;
}

.post-item a
{
	text-decoration: none;
}

.category-tag
{
	display: inline-block;
    	padding: 4px 12px;
    	border-radius: 20px;
    	font-size: 12px;
    	font-weight: 800;
}

.category-tag.social 
{
    	background: #ffe4da;
    	color: #d45135;
}


.category-tag.college 
{
    	background: #d9f2fc;
    	color: #087a99;
}

.category-tag.growth 
{
    	background: #dff5e5;
    	color: #26774b;
}



/* ---------Page1----------- */

.hero 
{
    	min-height: 385px;
    	position: relative;
    	overflow: hidden;
    	display: flex;
    	align-items: center;
    	background:
        linear-gradient(90deg, rgba(255,248,235,0.98) 0%, rgba(255,248,235,0.92) 38%, rgba(255,248,235,0.16) 75%), url("https://images.unsplash.com/photo-1495446815901-a7297e633e8d?auto=format&fit=crop&w=1800&q=90")
        center/cover;
}

.hero-content 
{
    	width: 90%;
    	max-width: 1250px;
    	margin: auto;
    	padding: 45px 4%;
    	position: relative;
    	z-index: 2;
}


.section
{
	max-width: 1360px;
	margin: auto;
	padding: 42px 6%;
}

.section-heading
{
	display: flex;
	justify-content: space-between;
	align-items: end;
	
	margin-bottom: 25px;
}

.section h2 
{
    	font-family: Georgia, "Times New Roman", serif;
    	color: var(--navy);
    	font-size: 36px;
    	line-height: 1.05;
    	margin: 0;
}

.section-heading h2
{
	margin: 0;
	font-size: clamp(1.8rem,3vw,2.7rem);
	line-height: 1.2;
}


.outline-button:hover
{
	transform: translateY(-5px);
}

.outline-button
{
	background: var(--teal);
    	color: white;
    	border: 1px solid #9fdbe5;
}

/* ---------Page1-Article Cards----------- */


.article-grid
{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}


.article-card
{
	border: 1px solid #e8e2d7;
	border-radius: 15px;
	overflow: hidden;
	background:#ffffff;
	box-shadow: 0 4px 16px rgba(16,40,69,0.04);
	display: flex;
	flex-direction: column;
}



.article-card img
{
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}


.card-body
{
	padding: 18px 20px 20px;
}

.card-body h3 
{
    	margin: 8px 0 7px;
    	font-family: Georgia, "Times New Roman", serif;
    	font-size: 23px;
    	color: var(--navy);
	line-height: 1.3;
}

.card-body p 
{
    	color: var(--muted);
    	margin: 0 0 17px;
}

.card-footer 
{
    	display: flex;
    	justify-content: space-between;
    	align-items: center;
    	gap: 12px;
    	font-size: 13px;
    	color: #737a82;
}

/* ---------Page1-CATEGORIES----------- */

.categories-section 
{
    	display: grid;
    	grid-template-columns: 0.8fr 1fr 1fr 1fr;
    	gap: 18px;
    	align-items: stretch;
    	padding: 40px 6%;
    	background: #e9f9fc;
}

.category-intro
{
	padding: 14px 10px 14px 0;
}

.category-intro h2
{
	margin: 0 0 12px;
	font-size: 2rem;
	line-height: 1.2;
}

.category-intro p:last-child 
{
    	margin: 10px 0 0;
    	color: #66727a;
}

.read-more 
{
    	border: 0;
    	background: transparent;
    	color: var(--teal-dark);
    	font-weight: 800;
    	padding: 0;
}


/* ---------PAGE1-ABOUT----------- */

.about-section
{
	max-width: 1200px;
    	margin: auto;
    	padding: 65px 6%;
    	display: grid;
    	grid-template-columns: 1fr 1fr;
    	gap: 60px;
    	align-items: center;
}

.about-section h2
{
	font-size: 2rem;
	line-height: 1.25;
	margin: 0;
}

.about-section p
{
	color: var(--muted);
	margin: 0;
}

.about-section > p 
{
    	color: var(--muted);
    	font-size: 17px;
}




/* ---------SOCIAL LIFE----------- */

.page-hero-SL 
{
    	min-height: 385px;
    	position: relative;
    	overflow: hidden;
    	display: flex;
    	align-items: center;
    	background:
        linear-gradient(90deg, rgba(255,248,235,0.98) 0%, rgba(255,248,235,0.92) 38%, rgba(255,248,235,0.16) 75%), url("Social Life.png?auto=format&fit=crop&w=1800&q=90")
        center/cover;
}

.hero-text
{
	max-width: 600px;
    	font-size: 17px;
    	color: #4e5b68;
    	margin: 18px 0 25px;
}



.lessons-container-SL 
{
    color: var(--muted);
    margin: 20px 0 0 50px;
    display: grid;
   
    gap: 9px;
}

/* ---------COLLEGE LIFE----------- */

.page-hero-CL
{
	min-height: 385px;
    	position: relative;
    	overflow: hidden;
    	display: flex;
    	align-items: center;
    	background:
        linear-gradient(90deg, rgba(255,248,235,0.98) 25%, rgba(255,248,235,0.92) 38%, rgba(255,248,235,0.16) 75%), url("College Life.png?auto=format&fit=crop&w=1800&q=90")
        center/cover;
}



.lessons-container 
{
    color: var(--muted);
    margin: -30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

/* ---------ALL POSTS----------- */


.page-hero-ALL
{
	min-height: 385px;
    	position: relative;
    	overflow: hidden;
    	display: flex;
    	align-items: center;
    	background:
        linear-gradient(90deg, rgba(255,248,235,0.98) 0%, rgba(255,248,235,0.92) 38%, rgba(255,248,235,0.16) 75%), url("https://images.unsplash.com/photo-1495446815901-a7297e633e8d?auto=format&fit=crop&w=1800&q=90")
        center/cover;
}

/* ---------CATEGORIES----------- */

.page-hero-CATEGORIES
{
	min-height: 385px;
    	position: relative;
    	overflow: hidden;
    	display: flex;
    	align-items: center;
    	background:
        linear-gradient(90deg, rgba(255,248,235,0.98) 0%, rgba(255,248,235,0.92) 38%, rgba(255,248,235,0.16) 75%), url("Categories.png?auto=format&fit=crop&w=1800&q=90")
        center/cover;
}


.categories-inner
{
	max-width: 1160px;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 18px;
	align-items: stretch;
}



.read-more
{
	border: 0;
	border-radius: 28px;
	padding: 1px 2px;
	font-size: 17px;	
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
}


/* ---------ABOUT----------- */


.page-hero-aboutus
{
	min-height: 385px;
    	position: relative;
    	overflow: hidden;
    	display: flex;
    	align-items: center;
    	background:
        linear-gradient(90deg, rgba(255,248,235,0.98) 25%, rgba(255,248,235,0.92) 38%, rgba(255,248,235,0.16) 75%), url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTNtDG6M17elFKSYObNnAfJ2JTDBdvIiIEZUDPqcVp-qg&s=10?auto=format&fit=crop&w=1800&q=90")
        center/cover;
}


.content-panel
{
	margin: 40px 40px
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 25px;
	background: #ffffff;
}

/* ---------CONTACT----------- */


.page-hero 
{
    	min-height: 385px;
    	position: relative;
    	overflow: hidden;
    	display: flex;
    	align-items: center;
    	background:
        linear-gradient(90deg, rgba(255,248,235,0.98) 0%, rgba(255,248,235,0.92) 38%, rgba(255,248,235,0.16) 75%), url("Contact.png?auto=format&fit=crop&w=1800&q=90")
        center/cover;
}

.form-card
{
	max-width: 780px;
	margin: auto;
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: 16px;
	box-shadow: 0 8px 25px #1c36260d;
}

.form-label
{
	font-weight: 700;
}

.form-text
{
	color: var(--muted);
}

/*-----------PERSONAL GROWTH------------*/

.poster-container {
    	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	width: 90%;
	margin: 8px;
    	
}

.poster {
    	width: 60%;
    	height: 70%;
    	display: block;
    	border-radius: 10px;
}

/* ---------FOOTER----------- */

.site-footer 
{
    	background: var(--navy);
    	color: white;
    	padding: 22px 6%;
    	display: flex;
    	align-items: center;
    	font-size: 14px;
}