*{
    margin: 0;
    padding: 0;
    
}

/* nav */
.navbar::before{
   content: " ";
   position: absolute;
   height: 100%;
   width: 100%;
   background-color:black;
   opacity: 0.7;
   z-index: -1;
}
.navbar{
   
   height: 70px;
   width: 100%;
   
   display: flex;
   align-items: center;
   position: relative;
   overflow: hidden;
}
.logo{
   height: 60px;
   width: 40px;
   margin-right: 20px;
}
.logo img{
   height: 100%;
   width: 100%;
   margin-left: 20px;
   margin-right: 20px;
   border-radius: 20px;

}
.logo img:hover{
   border: 2px solid white;
}
.navbar ul {
   display: flex;
   margin-left: 60px;

   
}
.navbar li{
   list-style-type: none;
}
.navbar li a{
   text-decoration: none;
   margin-right: 24px;
   font-size: 1.8rem;
   color: white;
}
.navbar li a:hover{
   background-color: rgb(3, 23, 40);
   border-radius: 20px;
}
/* hero */
.hero{
   background-color: #e8aeb7;
   width: 100%;
   height: 100vh;
   background-size: cover;
   overflow: hidden;
   flex-wrap: wrap;
   display: flex;
   justify-content: center;
   align-items: center;

}
.hy{
position: absolute;
bottom: 50%;
left: 4%;
font-family: 'Times New Roman', Times, serif;
font-size: 5rem;
font-weight: 800;
color: #4a7469;

}
.hj{
   position: absolute;
   bottom: 38%;
   left: 10%;
   font-size: 4.5rem;
   font-weight: 800;
   color: #11578e;
   display: inline-block;
   border-right: 2px solid;
   width: 100%;
   white-space: nowrap;
   overflow: hidden;
   animation: typing 2s steps(12) infinite,
   cursor .6s  alternate;
   
   

}


@keyframes cursor 
{
   50%{border-color:transparent}
   
}
@keyframes typing {
   from {width: 0;}
}
.ft{
position: absolute;
bottom: 25%;
left: 3.5%;
color: rgb(78, 78, 148);
font-size: 3.5rem;
font-weight: 600;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;


}









.hj p{
   animation: list 2s linear infinite;
   -webkit-text-stroke: 0.5px rgb(58, 46, 46);
   filter: blur(0.6px);
   
   
}
@keyframes list { 
   0%{
      color:#4213cf ;
   }
   40%{
      color: #24492c;
   }
   60%{
      color: rgb(146, 72, 72);
   }
   100%{
      color:#9f1f7a;
   }

}