html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	line-height: 1.8;
}

html {
	font-family: 'Helvetica Nue', sans-serif;
	box-sizing: border-box;
}
:root {
	--ms-blue: #41650D;
}

/*Navigation */

.nav {
	border-bottom: 1px solid #eaeadb;
	text-align: right;
	height: 70px;
	width: 100%;
	line-height: 70px;
	color: #fff;
	background: var(--ms-blue);
	position: fixed;
	z-index: 4;
	top: 0;
	font-family: 'Shadow Into Light';
}

.menu {
	margin: 0 30px 0 0;
}

.menu a {
	clear: right;
	text-decoration: none;
	color: #fff;
	margin: 0 10px;
	font-size: 18px;
	line-height: 70px;
}

.logo {
	margin: 0 0 0 35px;
	float: left;
}

.logo1 {
	height: 47px;
	width: 47px;
	margin: auto
}
.hamburger {
	margin: 0 40px 0 0;
	font-size: 30px;
	line-height: 70px;
	display: none;
	width: 26px;
	float: right;
}

#toggle {
	display: none;
}

/*Home Page */

#home-page {
	position: relative;
	width: 100%;
    height: 70%;
    color: #fff;
    background: url('images/fertile plains.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    margin: 0;
    padding: 0;
    text-align: center;
    justify-content: center;
}

div .introduction {
	max-width: 960px;
	margin: auto;
	padding: 60px 30px;
	z-index: 3;
	font-family: 'Poiret One';
}

.welcome {
	height: 250px;
	font-size: 45px;
	line-height: 1.3;
	position: relative;
	animation: welcome;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}

@keyframes welcome {
	0% {top: -60px}
	100% {top: 200px}
}

#welcomeMessage {
	position: relative;
	animation: welcomeMessage;
	animation-fill-mode: forwards;
	animation-duration: 3s;
	font-size: 20px;
}

@keyframes welcomeMessage {
	0% {left: -1000px}
	100% {left: 0}
}

.read-more-btn {
	display: inline-block;
	text-decoration: none;
	color: #fff;
	cursor: pointer;
	position: relative;
	border: 2px solid var(--ms-blue);
	padding: 1rem 2rem;
	animation: btn;
	opacity: 0;
	animation-duration: 3s;
	animation-delay: 3s;
	animation-fill-mode: forwards;
}

@keyframes btn {
	0% {opacity: 0}
	100% {opacity: 1}
}

/*About Us */
div .container {
	max-width: 1000px;
	margin: auto;
	padding: 3rem;
}
.about {
	position: relative;
	top: 20px;
	text-align: center;
	font-family: 'Poiret One';
}

hr.style { 
	border: 0; 
	height: 5px; 
	background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0); 
  }
.purpose {
	line-height: 2;
	display: grid;
	grid-gap: 20px;
	grid-template-areas: 
	'mission mission vision values';
}

/* Boxes */

#business-areas {
	color: #fff;
	position: relative;
	margin: auto;
	padding: 3rem;
	background: #333;
}

.services {
	position: relative;
	top: 20px;
	text-align: center;
	font-family: 'Poiret One';
}

.boxes {
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
}

.box {
	padding: 0;
	box-shadow: lightgray;
	color: #fff;
}

i {
	text-align: center;
	justify-content: center;
	color: var(--ms-blue);
}

/* Partnership */
img {
	width: 100%;
}
#partnership {
	position: relative;
	margin: auto;
	max-width: 1200px;
}

.partner {
	position: relative;
	top: 20px;
	text-align: center;
	font-family: 'Poiret One';
}

.objectives {
	display: grid;
	grid-gap: 30px;
	grid-template-columns: repeat(2, 1fr);
	padding: 3rem; 
	line-height: 2;
}


footer {
	color: #fff;
	width: 100%;
	position: relative;
	bottom: 0;
	padding: 3rem;
	height: 310px;
	background: #333;
}
.fab {
	color: #fff;
	margin: .5rem;
}

.fab:hover {
	animation: scaled;
	animation-duration: 1.4s;
	animation-fill-mode: forwards;
}

@keyframes scaled {
	0% {transform: scale(1)}
	100% {transform: scale(1.6)}
}
.contact {
	position: relative;
	top: 5px;
	text-align: center;
	font-family: 'Poiret One';
}

.contact-details {
	position: relative;
	top: 20px;
	text-align: center;
	font-family: 'Shadow Into Light';
}
@media only screen and (max-width: 700px) {
	.hamburger {
		display: block;
		cursor: pointer;
	}
	.menu {
		background: rgba(0, 0, 0, 0.85);
		text-align: left;
		width: 100%;
		display: none;
		margin: 0;
	}
	.menu a {
		padding: 0 40px;
		display: block;
		border-bottom: 1px solid #eaeadb;
		color: #fff;
		margin: 0;
	}
	#toggle:checked + .menu {
		display: block; 
	}

	.purpose {
		grid-template-areas: 
		'mission'
		'vision'
		'values';
	}
	.objectives {
		grid-template-columns: 1fr; 
	}

}