*{
    margin: 0%;
    padding: 0%;
}
.container {
  width: 90%;
  margin: 0 auto;
}
a {
  text-decoration: none;
  color: #696871;
}
body{
    background-color: aliceblue;
    width: 900px;
}

  .header{
    display: flex;
  gap: 50px;
  margin-top: 60px;
 

 
 
  .Hi{
  
    display: flex;
    gap: 20px;
    width: 327;
    height: 32;
     top: 44px;
     left: 557px;
     margin-top: 15px;

  
     
  }

 button{
    background: #FF7143;
     color: antiquewhite;
     width: 211px;
     height: 60;
     border-radius: 10px;
     border: none;
 }


  }

  .hero{
  display: flex;

  /* flex-direction: column-reverse; */
  margin-top: 100px;
  justify-content: space-around;
  
.hero-1{
    display: flex;
    flex-direction: column;
    margin-left: 40px;

}
}
   h1{
    color: #19191B;
;
font-weight: 700px;
font-size: 50px;
line-height: 50px;

   }
   p{
    color: #696871;


font-weight: 400px;
font-size: 20px;
line-height: 30px;
margin-top: 30px;
display: flex;


   }
.photo{
    margin-left: 400px;
    
}
.klick{
    width: 211px;
height: 60px;
border-radius: 10px;
background: #5454D4;
border: none;
color: antiquewhite;

}
      
      .hero2{
        display: flex;
        justify-content: space-between;
        gap: 150px;
        margin-top:50px;
      }

.hero3 {
    display: flex;
    justify-content: space-between;
    margin-top: 100px;
    align-items: center;
    

  h4{
    color:  #5454D4;

    
  }
.hero-text{
    font-size: 18px;
    gap: 30px;
    display: flex;
    flex-direction: column;
    

}

}
.hero4{
     display: flex;
    justify-content: space-between;
    margin-top: 100px;
    align-items: center;
    flex-direction: row-reverse;
    margin-left: 40px;

  h4{
    color:  #5454D4;
  }
}
.icon{
    margin-top: 50px;
    display: flex;
    justify-content: center;
    flex-direction: row;
    

}