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

.submenu1{
display:none;
background:#080b0f;
}

.menu li:hover .submenu1{
display:block;
flex-direction:column;
position: absolute;
margin-left:80px;
}

.submenu2{
display:none;
background:#080b0f;
width:230px;
}

.menu li:hover .submenu2{
display:block;
flex-direction:column;
position: absolute;
margin-left:-39px;
}

.submenu3{
display:none;
background:#080b0f;
}

.submenu2 li:hover .submenu3{
display:block;
flex-direction:column;
position: absolute;
margin-left:230px;
margin-top:-72px;
}

ul li i{
width:30px;
font-size: 25px;
text-align:center;
margin-left: 5px;
-webkit-transition: -webkit-transform .5s;
}

ul li:hover i{
-webkit-transform:rotate(720deg) translateZ(100px);

}

.submenu2 ul li #awesome{
width:30px;
font-size: 25px;
align-items:right;
margin-left: 5px;
-webkit-transition: -webkit-transform .5s;
}

.submenu2 ul li:hover #awesome{
-webkit-transform:rotate(-90deg) translateZ(100px);

}

body{
max-width:100vw;
background:rgba(5,5,5, .3) url(background.jpg);
background-repeat:no-repeat;
background-size:cover;
background-attachment:fixed;
background-position:center;
min-height:100vh;
background-blend-mode:darken;
overflow-x:hidden;
}

header{
position:relative;
display:flex;
justify-content:space-between;
width:100%;
align-items:center;
background:#080b0f;
padding: 0 20px;
transition:0.3s;
margin-right:0px;
}

.icon{
width:60px;
}

.navigation{
display:flex;
justify-content:space-between;
align-items:center;
}

.menu{
display:flex;
flex-direction:row;
align-items:center;
z-index:1;
transition:0.5s;
}

.menu li{
list-style-type:none;
}

.menu li a{
color:white;
padding:20px;
margin:6px;
line-height:1;
transition:0.3s;
text-decoration:none;
display:block;
font-size:20px;
}

.menu li a:hover{
color:#aadde3;
background:#020229;
box-shadow:0px 3px 0 #656575;
}

.hamburger{
position:relative;
width: 30px;
height:4px;
background:#fff;
border-radius:10px;
z-index:2;
transition:0.3s;
}

.hamburger:before,
.hamburger:after{
content: "";
position:absolute;
height:4px;
right:0;
background:#fff;
transition:0.3;
}

.hamburger:before{
top:-10px;
width:20px;
border-radius:10px;
}

.hamburger:after{
top:10px;
width:25px;
border-radius:10px;
}

.toggle-menu{
position:absolute;
width:30px;
height:100%;
z-index:3;
cursor:pointer;
opacity:0;
}

.hamburger,
.toggle-menu{
display:none;
}

.navigation input:checked ~ .hamburger{
background:transparent;
}

.navigation input:checked ~ .hamburger:before{
top:0;
transform:rotate(-45deg);
width:30px;
transition:.3s;
}

.navigation input:checked ~ .hamburger:after{
top:0;
transform:rotate(45deg);
width:30px;
transition:.3s;
}

@media screen and (max-width: 1000px) {
.hamburger,
.toggle-menu{
	display:block;
	}

	.header{
	padding: 10px 20px;
	}

	.menu{
	display:flex;
	justify-content:start;
	flex-direction:column;
	align-items:center;
	top:0;
	transform:translateX(100%);
	background:#080b0f;
	width:50%;
	height:100vh;
	padding-top:55px;
	position:absolute;
	transition:0.5s;
	display:none;
	}

	.navigation{
	background:#080b0f;
	}

	.menu .margin{
	margin-top:60px;
	}

	.menu li{
	width:100%;
	background:#080b0f;
	}

	.menu li a{
	padding:30px;
	font-size:50px;
	box-shadow: 0 1px 0 rgba(255,255,255, .1);
	}

	.icon{
	width:100px;
	}

	.submenu1{
	display:none;
	background:#080b0f;
	}

	.menu li:hover .submenu1{
	display:block;
	flex-direction:column;
	position: absolute;
	margin-left:-210px;
	margin-top:-122px;

	}

	.submenu2{
	display:none;
	background:#080b0f;
	width:450px;
	}

	.menu li:hover .submenu2{
	display:block;
	flex-direction:column;
	position: absolute;
	margin-left:-440px;
	margin-top:-122px;
	}

	.submenu3{
	display:none;
	background:#0a0340;
	z-index:1;
	}

	.sumenu3 li{
	color:red;
	}

	.submenu2 li:hover .submenu3{
	display:block;
	flex-direction:column;
	position: absolute;
	margin-left:235px;
	margin-top:-5px;
	}

	ul li i{
	width:30px;
	font-size: 25px;
	text-align:center;
	margin-left: 10px;
	-webkit-transition: -webkit-transform .5s;
	}

	ul li:hover i{
	-webkit-transform:rotate(810deg) translateZ(0px);

	}

	.submenu2 ul li #awesome{
	width:30px;
	font-size: 25px;
	align-items:right;
	padding-left: 5px;
	margin-bottom:-40px;
	-webkit-transition: -webkit-transform .5s;
	transform:rotate(720deg);
	}

	.submenu2 ul li:hover #awesome{
	-webkit-transform:rotate(0deg) translateZ(100px);
	}

	.navigation input:checked ~ .menu{
	transform:translateX(-85%);
	display:block;
	box-shadow: -20px 0 40px rgba(0,0,0 .3)
	}
}

.paragraph-div{
width:700px;
background:rgba(44,138,15, .3);
overflow:hidden;
height:auto;
padding-left:20px;
padding-right:10px;
padding-bottom:20px;
padding-top:20px;
margin-bottom:40px;
border-radius:20px;
margin-top:50px;
}

.about-us{
text-align:left;
color:#fff;
font-family:sans-serif;
font-size:35px;
}