/* Box Model Hack */
* {
     box-sizing: border-box;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/
:root{
     --green-one: #72BDA3;
     --green-two: #94E8B4;
     --orange-one: #FF5400;
     --orange-two: #E8C35B;
     --blue-one: #547AA5;
     --blue-two: #50D8D7;
}

body {
     display: flex;
     flex-direction: column;
     align-items: center;
}

a{
     text-decoration: none;
     color: black;
}


.title{
     font-family: "Overpass Mono", sans-serif;
     font-weight: 600;
     font-size: 3rem;
}

.text{
     font-family: Poppins, sans-serif;
     line-height: 1.6;
}

/* header */
header{
     width: 100%;
     font-family: "Overpass Mono" , sans-serif;
     box-shadow: 0 1px 10px black;
}

header nav{
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1% 10%;
}

#header_logo{
  
  font-weight: bold;
  font-size: 2rem;
}

header ul{
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
}

header ul li{
     border-right: 1px solid black;
     padding: 0.25rem 1.2rem;
}

header ul li:last-child{
     border-right: none;
}

/* Beginning */
#begin{
     display: flex;
     justify-content: space-between;
     gap: 4rem;
     margin: 10% 6%;
     width: 80%;
}

#begin div{
     color: white;
     background: linear-gradient(var(--green-one), var(--green-two));
     border-radius: 10px;
     align-self: flex-end;
     padding: 4rem 6rem 3rem 1rem;
     flex-basis: 30%;
}

#begin div h1{
     margin-bottom: 1.5rem;
}

#begin img{
     width: 60%;
     margin: 0 1.5rem;
     padding: 0;
     flex-basis: 50%;
}

/* story */
#story{
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 100vh;
     width: 80%;
}

#story h1{
     background: -webkit-linear-gradient(90deg, var(--green-one), var(--green-two));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 4rem;
}

#story div{
     display: flex;
     flex-direction: column;
     justify-content: center;
     margin-bottom: 3rem;
     flex-basis: 30%;
}

#story p:first-of-type{
     margin-bottom: 2rem;
}

#story img{
     flex-basis: 60%;
}

/* Mission */
#mission{
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     margin: 10% 6%;
     width: 80%;
     background: linear-gradient(90deg, var(--orange-one), var(--orange-two));
     color: white;
     border-radius: 1rem;
}

#mission h4{
     padding: 4rem 0;
}

#mission h3{
     font-size: 4rem;
}

#mission div{
     display: flex;
     align-items: center;
     justify-content: center;
}

#mission div p{
     flex-basis: 35%;

}

#mission div img{
     flex-basis: 20%;
}

/* features */
#features{
     display: flex;
     flex-direction: column;
     width: 80%;
     align-items: center;
     justify-content: center;
}

.feature{
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 80vh;
}

.feature div{
     flex-basis: 30%;
}

.feature div p{
     padding: 1rem;
}

.feature .title{
     color: var(--orange-one);
}

/* communuity */
#community{
     background: linear-gradient(90deg, var(--blue-one), var(--blue-two));
     width: 100%;
     height: 80vh;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-direction: column;
     color: white;
     padding: 10% 6%;
}

#community_features{
     border: .5rem solid white;
     border-radius: 10px;
     width: 90%;
     display: flex;
     justify-content: space-evenly;
     padding: 2rem;
}

#community > p{
     padding: 2rem 0 4rem 0;
}

.community_feature > *{
     padding: 2rem;
}

/* footer */
footer{
     margin-top: 3%;
     border-top: 1px solid black;
     border-bottom: 1px solid black;
     width: 80%;
     display: flex;
}

footer nav{
     display: flex;
     width: 100%;
     justify-content: space-evenly;
     padding: 2rem 0;
}

footer li{
     padding: 1rem;
     font-family: Poppins, sans-serif;
}

footer h3{
     font-weight: 700;
     font-family: "Overpass Mono", sans-serif;
     font-size: 1.25rem;
}

a{
     text-decoration: none;
     cursor: pointer;
}

span{
     display: block;
     padding-top: 2.5rem;
     font-family: Poppins, sans-serif;
     font-size: .85rem;
}