style.css

: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-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;
}

.contact i {
	font-size: 60px;
	color: var(--dark);
width: 100px;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
	background-color: var(--light);
	border-radius: 300px;
}
.buttons {
	width: 100%;
	min-height: 50px;
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.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;

    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: 100px;
	min-height: 100px;
	color: var(--light);
	background-color: transparent;
	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 {
	justify-content:  space-evenly;

}


.contact .container {
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;

}
.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%;
  margin:  10px;

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

  flex-wrap: wrap;
}

.child2 {
  width: 600px;
  border: : 1px solid #1A202C;
  margin:  10px;

  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;
}