:root {
	--banner-color: #191816;
}

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

.banner{
	width: 100%;
	height: 100vh;
	background-color: var(--banner-color);
	background-size: cover;
	background-position: center;
}

.logo img{
	display: block;
	margin: auto;
    width: clamp(200px, 40%, 400px);	
}

.navbar{
	width: 40%;
	margin: auto;
	display: flex;
	align-items: left;
	justify-content: space-between;
	position: relative;
	bottom: 200px;
	left: -100px;
}

.navbar ul{
	position: relative;
	top: 100px;
	left: 35%;
}

.navbar ul li{
	list-style: none;
	padding: 5px;
	position: relative;
	border-radius: 25px;
	transition: 0.5s;
}

.navbar ul li:hover{
	background-image: linear-gradient(to right, rgba(40, 51, 43, 0), rgba(40, 51, 43, 1));
}

.navbar ul li a{
	text-decoration: none;
	color: #fff;
	text-transform: uppercase;
	font-size: 20px;
}

.navbar ul li::after{
	content: '';
	height: 3px;
	width: 0%;
	background: #61a478;
	position: absolute;
	left: 0;
	bottom: -2px;
	transition: 0.5s;
}

.navbar ul li:hover::after{
    width: 100%;
}

.about{
	color: #fff;
	background: var(--banner-color);
	background-color: var(--banner-color);
}

.about-image{
	height:500px;
	padding:5px;
	background-color: var(--banner-color);
}

.content{
	width: 100%;
	display: flex;
	background-color: var(--banner-color);
	justify-content: center;
}