.hero{
	height: 100%;
	padding:100px 0;
}

.title{
	font-size:68px;
	font-weight:900;
	color:#0b5b3b;
}

.side img{
	width:100%;
	height:620px;
	object-fit:cover;
	border-radius:180px;
	box-shadow:0 20px 40px rgba(0,0,0,.2);
}

.cardx{
	border:none;
	border-radius:28px;
	box-shadow:0 15px 40px rgba(0,0,0,.12);
	padding:70px 30px 35px 30px;
	height:100%;
	position:relative;
}

.visi{
	background:#0f5e3d;
	color:#fff;
}

.misi{
	background:#fff;
	font-size: 18px;
}

.icon{
	position:absolute;
	left:50%;
	top:-15px;
	transform:translateX(-50%);
	width:76px;
	height:76px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.2);
}

.visi .icon{
	border: 1px solid #0f5e3d;
	box-shadow: 0 0 0 3px rgba(15,94,61,.08),
	0 12px 30px rgba(15,94,61,.18);
	background:#fff;
	color:#0f5e3d;
}

.misi .icon{
	background:#0f5e3d;
	color:#fff;
}

.num{
	display:inline-flex;
	width:34px;
	height:34px;
	border-radius:50%;
	background:#2f8d58;
	color:#fff;
	align-items:center;
	justify-content:center;
	margin-right:10px;
}

.features{
	margin-top:45px;
	background:#fff;
	border-radius:60px;
	border: 1px solid #0f5e3d;
	box-shadow: 0 0 0 3px rgba(15,94,61,.08),
	0 12px 30px rgba(15,94,61,.18);
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:10px;
	padding:20px;
}
.feature{
	display:flex;
	align-items:center;
	justify-content:left;
	gap:12px;
	font-weight:700;
	color:#155d3c;
	font-size:14px;
}
.feature i{
	font-size:24px;
	background:#2f8d58;
	color:#fff;
	width:58px;
	height:58px;
	border-radius:100%;
	display:flex;
	align-items:center;
	justify-content:center;
}

.list-group-item{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 15px 0;
}

.list-group-item .num{
	min-width: 34px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #2e8b57;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	flex-shrink: 0;
}

.sub{
	max-width:700px;
	margin:auto;
	color:#555;
}

@media(max-width:991px){
	.side{
		display:none;
	}

	.title{
		font-size:48px;
	}

	.features{
		grid-template-columns:1fr 1fr;
	}

	.feature{
		gap:30px;
		font-size:20px;
	}
}

@media(max-width:576px){
	.features{
		grid-template-columns:1fr;
	}
}