:root {

	--teal: #0E2431;
	--green: #2ecc71;
	--light: white;
	--dark: #1A202C;


}

body.dark {
	--light: black;
	--dark: white;

}

body {
	padding: 0;
	font-family: 'Open Sans', sans-serif;
	margin: 0;
	background-color: var(--dark);

}

.second {
	width: 700px;
	max-width: 100%;
	min-height: 500px;
	display: flex;
	align-items: center;
	margin: 10px;
	justify-content: center;
	background-image: url(undraw.svg);
	background-size: cover;
	background-position: center;
}

.landing .row {
	display: flex;
	align-items: center;
	min-height: 500px;
	justify-content: space-evenly;
}

.first {
	width: 500px;
	min-height: 500px;
	display: flex;
	align-items: flex-start;
	margin: 10px;

	flex-direction: column;
	justify-content: flex-start;
	background-color: var(--dark);
	background-size: cover;
	text-align: left;
	background-position: center;
}

.logo {
	color: var(--light);
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-family: 'Cabin', sans-serif;
}

.buttons {
	width: 100%;
	min-height: 100px;
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	padding: 0;
}

.btn {
	padding: 15px 20px;
	border: 2px solid var(--green);
	margin: 0 15px;
	color: var(--light);
	border-radius: 500px;
}

.first h2 {
	color: var(--light);
	margin: 0 30px;
	font-size: 17px;
	padding: 100px 0;

}

.first h2:hover {
	color: var(--green);
	transition: 0.2s linear;
	transform: scale(1.1);
}

.btn:hover {
	background-color: var(--green);
	transition: 500ms ease-in-out;
	transform: scale(1.2);
}

.first h1 {
	color: var(--light);
	font-weight: bold;
	padding: 0;
	margin: 30px;
	font-size: 50px;
}

.landing {
	width: 100%;
	min-height: 700px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	flex-wrap: wrap;
}

.header {
	width: 100%;
	min-height: 80px;
	display: flex;
	padding: 20px 0;
	align-items: center;
	justify-content: space-around;
	font-weight: bold;

	max-height: 650px;
	flex-wrap: wrap;
	flex-direction: row;

}

button {
	padding: 15px 20px;
	background-color: #48BB78;
	color: white;
	border: none;
	display: none;
}

.active {
	background-color: #2ecc71;
	border-radius: 300px;
	cursor: pointer;
	width: 60px;
	min-height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
}


#light {
	margin: 5px 0;
	font-size: 25px;
	cursor: pointer;
	color: black;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	min-height: 60px;
	background-color: white;
	border-radius: 300px;
}

.nav {
	display: flex;
	align-items: center;

	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
}

li {
	color: var(--light);
	list-style-type: none;

}

button i {
	font-size: 25px;
}

.bg {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	flex-wrap: wrap;
	min-height: 709px;
	padding: 50px 0;

}

.bg h1 {
	padding: 40px 0;
	font-size: 40px;
	color: var(--light);
	border-bottom: 2.5px solid var(--green);
}



.row {
	width: 100%;
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: row;
}


.box {
	width: 400px;
	min-height: 400px;
	background-color: var(--green);
	align-items: center;
	font-weight: bold;
	justify-content: center;
	flex-direction: column;
	display: flex;
	margin: 40px;
	color: white;
}

.box h2 {
	font-weight: bold;
	font-size: 30px;
	color: white;
	margin-top: -30px;
}

.box i {
	font-size: 40px;
	width: 140px;
	min-height: 140px;
	display: flex;
	align-items: center;
	color: var(--light);
	justify-content: center;
	background-color: var(--dark);
	border-radius: 300px;
	margin: 70px 0;
	/
}

.nav li {
	padding: 10px 20px;
	margin: 0 10px;
}


.about {
	width: 100%;
	min-height: 700px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	flex-wrap: wrap;
	color: white;

}

.about h1 {
	padding: 40px 0;
	font-size: 40px;
	color: var(--light);
	border-bottom: 2.5px solid var(--green);
}

.fourth {
	width: 700px;
	min-height: 500px;
	display: flex;
	margin: 10px;
	align-items: flex-start;

	flex-direction: column;
	justify-content: flex-start;
	background-size: cover;
	text-align: left;
	background-position: center
}

.fourth h1 {
	padding: 5px 0;
	margin: 10px;
	color: var(--light);
	border: none;
}

.fourth p {
	padding: 40px 0;

	margin: 10px;
	color: var(--light);

	line-height: 70px;
	font-family: 'Cabin', sans-serif;

}

.btns {
	width: 100%;

	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	min-height: 100px;
	padding: 20px 0;
}

.tnb {
	padding: 20px;
	background-color: var(--green);
	display: flex;
	align-items: center;
	color: white;
	justify-content: center;
	border-radius: 10px;
	flex-direction: column;
	font-weight: bold;
}

.third {
	width: 700px;
	max-width: 100%;
	min-height: 500px;
	display: flex;
	font-family: 'Cabin', sans-serif;
	align-items: center;
	margin: 10px;
	justify-content: center;
	background-image: url(undraw1.svg);
	background-size: cover;
	background-position: center;
}


.about .row {
	display: flex;
	align-items: center;
	min-height: 600px;
	justify-content: space-evenly;
}

.blog .text-center {
	color: white;
	text-align: center;
	padding: 20px 0;
	margin: 50px 0;
	color: var(--light);
	border-bottom: 2.5px solid var(--green);
}

.blog {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
	min-height: 600px;
	padding: 100px 0;
}

.post {
	width: 450px;
	background-color: white;
	min-height: 500px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	flex-direction: column;
	margin: 10px;
}

.post h2 {
	margin: 0 30px;
	font-size: 20px;
	font-weight: normal;
	color: var(--green);
	font-family: 'Oswald', sans-serif;
	font-weight: normal;
}

.post h1 {
	font-weight: bold;
	font-family: 'Cabin', sans-serif;
	font-size: 30px;
	color: #1A202C;
	border: none;
	margin: 50px 30px;

}

.blog .row {
	justify-content: space-evenly;
}

.post .image {
	width: 100%;
	min-height: 300px;
	background: #2ecc71 url(undraw3.svg);
	background-size: cover;
	background-position: center;
}

.contact {
	width: 100%;
	min-height: 600px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 100px 0;

}

.contact .row {
	flex-grow: 1;

}

.contact h1 {
	color: var(--light);
	border-bottom: 2.5px solid var(--green);
	padding: 30px 0;
	margin: 50px 0;
	font-weight: bold;
}

.child1 {
	width: 600px;
	min-height: 600px;
	background: #2ecc71 url(undraw2.svg);
	display: flex;
	align-items: center;
	background-size: 90%;

	background-position: center;
	justify-content: center;
	background-repeat: no-repeat;
	flex-direction: column;

	flex-wrap: wrap;
}

.child2 {
	width: 600px;
	min-height: 600px;
	background-color: white;
	display: flex;
	align-items: center;

	justify-content: flex-start;
	flex-direction: column;
	flex-wrap: wrap;
}

.child1,
.child2 {}

.child2 h1 {
	color: black;
	padding: 10px 0;
	margin: 40px 0;
}

input {
	width: 300px;
	min-height: 50px;
	background-color: whitesmoke;
	display: flex;
	border: none;
	align-items: center;
	justify-content: center;
	display: flex;
	margin: 20px 0;
}

textarea {
	width: 300px;
	min-height: 50px;
	background-color: whitesmoke;
	display: flex;
	border: none;
	align-items: center;
	justify-content: center;
	resize: none;

	display: flex;
	margin: 20px 0;
}

::placeholder {
	color: var(--green);
	font-weight: bold;
	padding: 0 20px;
}

.bev {
	padding: 10px;
	background-color: var(--green);
}

.btnclass {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	flex-wrap: wrap;
	width: 100%;

	color: white;
	margin: 0px 0;
	min-height: 100px;
}