*{
    margin: 0;
    /* padding: 0; */
    font-family: sans-serif;

}

/* Image */
.banner{
    /* width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgb(0,0,0,0.75), rgb(0,0,0,0.75))url(background.jpg);
    background-size: cover;
    background-position: center;
    position: relative; */

	width: 100%;
	height: 100vh;
	background-image: linear-gradient(rgba(0,0,0,0.75),rgba(0,0,0,0.75)),url(background.jpg);
	background-size: cover;
	background-position: center;
	position: relative;
}


img{
    position: absolute;
    top: 0px;
    right: 0px;
    width: 120px;
}

.navbar ul li{
    display: inline-block;
    margin: 0 20px;
    padding-top: 1.5%;
}

#logo{
    /* height: calc(80px*1.75 ); */
    /* width: calc(120px*1.75 ); */
    transform: translateX(-25%);
    cursor: pointer;

}

.navbar ul li a{
    text-decoration: none;
    color: white;
    /* font-size: 29px; */
    margin: 0;
    text-transform: uppercase;
    color: #999;
}



/* both below to have the bottom however effect */

.navbar ul li a::after{

    display:block;
    content: '';
    transform: scaleX(0);  
    border-bottom: solid 3px #019fb6;  
    transform-origin: 0% 50%;
    transition: transform 0.5s ease-in-out;
    /* link to add different line url(https://stackoverflow.com/questions/28623446/hover-effect-expand-bottom-border) */

}

.navbar ul li a:hover::after{
   transform: scaleX(1); 
}
/* Till Here */

/* standerd approach */
.content{

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    white-space: pre;
    /* white-space: normal; */
}