/* =========================
   About Page
========================= */

.aboutPage{
	padding:100px 0;
	background:#faf8f3;
}

.aboutPage .content{
	max-width:900px;
	margin:0 auto;
	background:#fff;
	padding:60px;
	border-radius:24px;
	box-shadow:0 15px 45px rgba(0,0,0,.08);
	position:relative;
}

.aboutPage .content:before{
	content:"";
	position:absolute;
	left:0;
	top:60px;
	width:6px;
	height:100px;
	background:#6e9c53;
	border-radius:0 50px 50px 0;
}

.aboutPage h2{
	font-size:36px;
	line-height:1.4;
	color:#2f3b25;
	margin-bottom:30px;
}

.aboutPage p{
	font-size:17px;
	line-height:2.1;
	color:#555;
	margin-bottom:22px;
	text-align:justify;
}

.story{
	padding:100px 0;
	background:#fff;
}

.story .container{
	display:flex;
	align-items:center;
	gap:60px;
}

.story .img,
.story .txt{
	flex:1;
}

.story .img img{
	width:100%;
	display:block;
	border-radius:24px;
	box-shadow:0 15px 45px rgba(0,0,0,.12);
}

.story .txt{
	background:#f7f8f2;
	padding:55px;
	border-radius:24px;
	position:relative;
}

.story .txt:before{
	content:"ABOUT";
	position:absolute;
	right:35px;
	top:25px;
	font-size:60px;
	font-weight:900;
	color:rgba(110,156,83,.08);
	letter-spacing:4px;
}

.story h2{
	font-size:36px;
	line-height:1.4;
	color:#2f3b25;
	margin-bottom:25px;
	position:relative;
	z-index:2;
}

.story p{
	font-size:16px;
	line-height:2;
	color:#555;
	margin-bottom:20px;
	text-align:justify;
	position:relative;
	z-index:2;
}

.mission{
	padding:100px 0;
	background:#faf8f3;
}

.missionList{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:25px;
}

.missionList .item{
	background:#fff;
	padding:42px 28px;
	text-align:center;
	border-radius:22px;
	box-shadow:0 12px 35px rgba(0,0,0,.06);
	transition:.3s;
}

.missionList .item:hover{
	transform:translateY(-8px);
	box-shadow:0 18px 45px rgba(0,0,0,.1);
}

.missionList h3{
	font-size:22px;
	color:#2f3b25;
	margin-bottom:15px;
}

.missionList p{
	font-size:15px;
	line-height:1.8;
	color:#666;
}

.aboutCTA{
	padding:100px 0;
	background:
		linear-gradient(rgba(47,59,37,.82),rgba(47,59,37,.82)),
		url("../images/about_cta.jpg") center/cover no-repeat;
	color:#fff;
	text-align:center;
}

.aboutCTA h2{
	font-size:40px;
	margin-bottom:20px;
}

.aboutCTA p{
	max-width:760px;
	margin:0 auto 35px;
	font-size:17px;
	line-height:2;
}

.aboutCTA .btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:15px 38px;
	background:#6e9c53;
	color:#fff;
	border-radius:50px;
	font-weight:700;
	box-shadow:0 12px 30px rgba(0,0,0,.2);
	transition:.3s;
}

.aboutCTA .btn:hover{
	background:#55793d;
	transform:translateY(-3px);
}

.aboutCTA .btn:after{
	content:"→";
	margin-left:10px;
}



/* =========================
   About Page RWD
========================= */

@media(max-width:1024px){

	.aboutPage,
	.story,
	.mission,
	.aboutCTA{
		padding:80px 0;
	}

	.story .container{
		gap:40px;
	}

	.story .txt{
		padding:45px;
	}

	.missionList{
		grid-template-columns:repeat(2,1fr);
	}

}

@media(max-width:768px){

	.aboutPage,
	.story,
	.mission,
	.aboutCTA{
		padding:70px 0;
	}

	.aboutPage .content{
		padding:40px 30px;
		border-radius:20px;
	}

	.aboutPage .content:before{
		top:0;
		left:30px;
		width:70px;
		height:5px;
		border-radius:0 0 50px 50px;
	}

	.aboutPage h2,
	.story h2{
		font-size:28px;
	}

	.aboutPage p,
	.story p{
		font-size:16px;
		line-height:1.9;
	}

	.story .container{
		flex-direction:column;
	}

	.story .img,
	.story .txt{
		width:100%;
	}

	.story .txt{
		padding:35px 28px;
	}

	.story .txt:before{
		font-size:42px;
		right:25px;
		top:20px;
	}

	.missionList{
		grid-template-columns:1fr;
		gap:20px;
	}

	.aboutCTA h2{
		font-size:30px;
	}

	.aboutCTA p{
		font-size:15px;
		line-height:1.9;
	}

}

@media(max-width:480px){

	.aboutPage,
	.story,
	.mission,
	.aboutCTA{
		padding:60px 0;
	}

	.aboutPage .content{
		padding:34px 24px;
	}

	.aboutPage h2,
	.story h2{
		font-size:24px;
	}

	.aboutPage p,
	.story p{
		font-size:16px;
		line-height:1.85;
	}

	.story .txt{
		padding:32px 24px;
	}

	.missionList .item{
		padding:32px 22px;
		border-radius:18px;
	}

	.missionList h3{
		font-size:20px;
	}

	.missionList p{
		font-size:14px;
	}

	.aboutCTA h2{
		font-size:26px;
	}

	.aboutCTA .btn{
		width:100%;
		max-width:300px;
		padding:14px 25px;
	}

}