<style type="text/css">

*{
    margin: 0; padding:0; box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}
.pagebody{

width:100%;
height: 100vh;
background-color:none;
border:0px solid #ccc;
margin:0 auto;

}
.formarea{
  width:55%;
  height:255px;
  max-width:300px;
  border-radius:5px;
  margin-top:150px;
  margin-bottom: auto;
  float: right;
  margin-right: 150px;
  margin-left: auto;
  background-color:#08c1d6;

}

.leblearea{
    margin-left:10px;
	height: 20px;
    position:relative;	
}

.input-box{
	height: 25px;
    position:relative;
	border: 1px;
    
}
button {
  padding: 14px 20px;
  margin: 8px 0;
  border: 1px;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}

section{ display: flex;  }

.leftside { width: 45%; height: 0 auto; overflow: hidden; margin-top: 20px;}

.leftside img{  width: 600px;  height: 500px; }


.pagebody {
    width: 100%;
    height: 100vh;
    background: #0f8a9d;
    background: linear-gradient(57deg, #00C6A7 , #1E4D92 );
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
nav{
    width: 100%; height: 100px;
    /*background-color:  red;*/
    display: flex; color: white;
    
}

.logo{
    width: 50%;
    height: 100px;
}

.logo h1{
    
    padding-left: 50px;
    margin-top: 30px;
    margin-bottom: 1px;
    height: 35px;
    font-weight: 600;
    font-family: Brush Script MT, Brush Script Std, cursive;


}



.rightside button{   font-size: 17px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    background: linear-gradient(57deg, #00C6A7 , #1E4D92 ); 
    border-radius: 4px 4px 4px 4px;
    padding: 5px 5px ; 
}



.rightside button:hover{
      background: linear-gradient(57deg, #1E4D92, #00C6A7 );   
}

</style>
