*{
    margin: 0px;
    padding: 0px;

}
#header{
    display: flex;
    width: 100%;
    margin: auto;
    justify-content: space-evenly;
   
}
.uper{
    margin-right: 35px;
}
.sec{
    margin-left: 85px;
    
}
.uper > img{
    width: 100%;
}
.sec > img{
    width: 13%;
    padding-top: 20px;
    margin-right: 15px;
}
 .btn1{
  
    border: 0px;
    padding: 5px;
    margin-top: 25px;
    margin-right: 10px;
    border-radius: 5px;
    padding-left: 15px;
    padding-right: 15px;
    cursor: pointer;
}

.Facebook{
    background-color: rgb(73, 73, 207);
    border: 0px;
    padding: 5px;
    color: white;
    padding-left: 5px;
    padding-right: 5px;
    margin-right: 8px;
    border-radius: 5px;
    cursor: pointer;
   
    
}
.email{
    background-color:rgb(107, 107, 107);
    border: 0px;
    padding: 5px;
    padding-left: 10px;
    padding-right: 15px;
    color: white;
    cursor: pointer;
    margin-right: 8px;
    border-radius: 5px;
}
.signup{
    
   padding: 5px;
    border: 0px;
    margin-right: 4px;
    border-radius: 5px;
    padding-left: 6px;
    cursor: pointer;
  
}
/* navbar */
#navbar{
    display: grid;
    width: 100%;
    margin: auto;
    grid-template-columns: repeat(8,1fr);
    background-color: #2BB673;
}
.navkeys{
    margin: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: center;
}
a{
    color: white;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
}
#navkeys1{
    background-color: #229760;
    margin: auto;
    padding: 12px 30px 12px 30px;
    text-align: center;
}   
#navkeyslast{
    background-color:#2BB673;
    margin: auto;
    padding: 12px 30px 12px 30px;
    text-align: center;
    
}   
#container{
    width: 85%;
    display: flex;
    margin: auto;
    margin-bottom: 30px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    
}
#container > div > #img1 {
    width: 100%;
}
#container > div > #img2 {
    width: 100%;
}
#container > :nth-child(1){
 
    width: 70%;
    height: 30%;
}
#container > :nth-child(2){
  
    width: 30%;
}
.btn1:hover{
    font-size: 10px;
    color: white;
    background-color: black;
}
/*  */

#container{
    width: 45%;
    height: 100vh;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 
}
#formbox{
    width: 100%;
    max-width: 450px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    padding: 70px 80px 70px;
    text-align: center;
    
}
#formbox h1{
    font-size: 30px;
    margin-bottom: 60px;
    color: rgb(226, 41, 41);
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
}
#formbox > div:nth-child(1) img{
    width: 100%;
}
.inputfield{
    background: #eaeaea;
    margin: 15px 0;
    border-radius: 3px;
    display: flex;
    align-items: center;
    max-height: 60px;
    transition: max-height 0.5s;
    overflow: hidden;
}
input{
    width: 100%;
    background: transparent;
    border: 0;
    outline: 0;
    padding: 15PX 15PX ;
}
.inputfield i{
    margin-left: 15px;
    color: #999;
    
}
form p a {
 text-decoration: none;
 color: rgb(80, 79, 79);
}
.buttonfield{
    width: 100%;
    display: flex;
    justify-content: space-between;

}
.buttonfield button{
    border: 0;
    outline: 0;
    cursor: pointer;
    border-radius: 20px;
    height: 30px;
    flex-basis: 25%;
    color: white;
    padding: 10px;
   background-color: rgb(226, 41, 41);
    transition: background 1s ;
}
.inputgroup{
    height: 250px;
}
.buttonfield button.disable{
    background-color: #eaeaea; 
    color: #555 ;
}
#submitBtn{
    display: inline;
    background-color: #28aa5e;
    color: white;
    cursor: pointer;
}