*{
  margin: 0;
  padding: 0;
  font-family: 'Koulen', sans-serif;
}

html{

  scroll-behavior: smooth;
  font-size:18px;

}

nav {
position: fixed;
top: 0;
background-color:#000000;
z-index: 100%; 
width:100%;
display:flex;

}

body{
background-color:#FFFFFF;
color:#000000;
width: 100%;

}


ul{
display:flex;
list-style:none;
gap:2px;
margin:0;
padding:0;

}



ul li a {
text-decoration:none;
color:#cad2c5;
font-size:16px;
position:relative;
transition: 0.8s all linear all linear;
padding: 8px 15px;

display:inline-block;
}


ul li a:hover {
        color: #84a98c;
    }

ul li a::before {

position:absolute;
content:'';
bottom:0;
left: 0;

}


.hero-section{
padding: 4%;
display: flex;
flex-direction:column ;
align-items: center;
justify-content: center;
height: 100vh;
}
.radial-overlay {
  background: radial-gradient(circle, #FF7700  0%, #ff7700c4 20%, #FFFFFF 70%);

  background-size:cover;
}

.hero-title{
font-size:2rem;
text-align: center;
}


.hero-button{
 border: none;
 background-color:#29ABEC;
 padding: 2% 8%;

}

.blue-square{
height:10rem;
text-align: center;
background-color: #36BCFF;

text-align: center;
}



.steps{
display: flex;
flex-direction: column;
margin-top: 10%;
text-align: center;
}

.features{
  text-align: center;
  margin: 38px;
}


.feat-gap{
margin: 10%;

}

.pic{
height: auto;
width: 100%;

}


.review{
height: 6rem;
background-color: #89D2F7;
border-radius: 2rem;
font-size: 14px;
padding: 10px;
align-content: center;
margin:14px;
}

.reviewg{
display: flex;
flex-direction: column;

}
.rev-sec{
 background: radial-gradient(circle, #ff77003d  0%, #ff770065 20%, #FFFFFF 70%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

footer{
background-color: #36BCFF;
width: 100%;
color: #FFFFFF;
height: 4rem;
}
.ft{
padding-left: 14px;

}

.foot{
  display: flex;
}

.join{
background-color: #000000;
color: #FFFFFF;
border-radius: 24px;
height:48px;
margin-top: 18px;
width: 78px;
margin-left: 10px;
position: relative;
}

/*responsiveness*/ 

/*medium screens*/
@media only screen and (min-width: 426px) {

.hero-title{
font-size: 60px;
width: 70%;
}


.how-it-works{
display: flex;
align-content: center;
justify-content: center;
}

.how-tt{

font-size: 3.rem;

}
.half-blue{
display: flex;
flex-direction: row;
}
.blue-square{
height: 28rem;
width: 50%;
font-size: 3rem;
}

.rt{
text-align: center;
}

.steps{
  padding: 10%;
}

h2{
  text-align: center;
}

.review{
width: 600px;
  margin:2%;
}
.rev-sec{

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
margin: 48px;
}
#how-it-works{
display: flex;
}

.ft{
  margin-top: 5%;
}

.join{

height: 50px 0px 100px;

}
.features{
  display: flex;
  font-size: 12px;
  text-align: center;
  margin: 10% 10%;
}
}

.feat-gap{
margin:1%;

}

@media only screen and (min-width: 768px){

footer{
display: flex;
align-items: center;
justify-content: center;

}

.steps, .features, .rt{

font-size: 18px;

}

.steps{

  margin:4%;
}

.ft{
  margin-bottom: 4%;

}

}



@media only screen and (min-width:1440px){

.hero-title{

  font-size: 8rem;


}

.hero-button{

  font-size: 40px;
}


}