*{
   margin: 0;
   padding: 0; 
   box-sizing: border-box;
}

body{
    font-family: 'Kdam Thmor Pro', sans-serif;
}

.wrapper{
height: 100vh;
width: 100vw;
background-color:#405A89;
color: white;
}


.navbar{
display: flex;
justify-content:space-between; 
  padding:20px;


}

.brand{
pointer-events:none;
margin-top: -5px;
}

.brand span{
color: black;

}

.menu{
width: 50%;
display: flex;
justify-content: space-around;
}

.menu li{
list-style: none;
}

.menu a{
text-decoration: none;
color: white;
padding: 5px;
letter-spacing: 2px;
}

.menu a:hover{
    background-color: black;
    color:#fff ;
    border-radius: 20px;
    transition-delay: 5ms;
   
  
    }

.menu .only-color{
color: black;
}

main{
display: grid;
justify-content: space-between;
align-items: center;
 grid-template-columns: repeat( 2, 1fr);
height:80vh;
width: 80vw;
}

main .info-content h1{
margin-bottom: 10px ;
margin-left: 20px ;
}


main h1 .only-colortwo{
color: black;
}
main .info-content p{
text-align: left;  
margin-left: 20px;
}

main .info-content  a button{
margin-top: 10px;    
margin-left: 20px;
padding: 10px;
border: none;
width: 25%;
background-color: black;
color: white;
border-radius: 20px;
cursor: pointer;
}
main .info-content  a button:hover{
transition: .2s;
transform: scale(1.1) ;
}

main img{
  height: 500px;  
  width: 350px;
  margin: 25px 120px ; 
  border: 6px solid black;
}



@media screen and (max-width: 375px) {
    
    
}