*{
    margin: 0;
    padding:0;
    box-sizing: border-box;
    font-family: 'poppins',sans-serif;
}
.hero{
    width:100%;
    min-height: 100vh;
    background-image:url(back-image.png);
    background-position: center;
    background-size: cover;
    padding: 10px 10px;
    overflow: hidden;
    position: absolute;

}
nav{
    padding: 10px 0;
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.logo{
    width:140px;
}
nav ul li{
    display:inline-block;
    list-style: none;
    margin: 10px 15px;
}
nav ul li a{
    text-decoration: none;
    color:#333;
    font-weight: 400;
}
.login-btn{
    text-decoration: none;
    color: #333;
    margin-right: 15px;
    font-weight: 400;
}
.btn{
  display: inline-block;
  text-decoration: none;
  padding: 14px 40px;
  color: #fff;
  background-image: linear-gradient(45deg , #df4881,#c430d7);
font-size: 14px;
border-radius: 30px;
border-radius: 30px;
border-top-right-radius: 0;
transition: .5s;
}
.content{
    margin-top:10%;
   max-width: 600px;


  
}
.content h1{
    font-size: 70px;
    color:#222;

}
.content p{
    margin: 10px 0 30px;
    color:#333;
    
}
.content .btn{
    padding: 15px 80px;
    font-size: 16px;
}
.btn:hover{
    border-top-right-radius: 30px;
}
.photo{
    width:530px;
    position: absolute;
    bottom: 0;
    right: 10%;

}
.anim{
    opacity: 0;
    transform: translate(30px);
    animation: moveup 0.5s linear forwards;

}
@keyframes moveup{
    100%{
opacity: 1;
transform: translate(0px);
}
    
}