body{
	margin: 0;
	font-family: 'Segoe UI' , Tahoma, Geneva, Verdana , sans-serif;
	overflow-x: hidden;
	background-color: black;
	
}

/*--------------------------- NAVBAR-----------------------------------------------*/
.video-wrap{
	display: flex;
	min-width: 100%;
	min-height: 100vh;
	position: fixed;
	right: 0;
	bottom: 0;
	opacity: 0.85;
	z-index: -1;
}
.icon-sidenav{
	display: none;
	width: 10px;
	height: 10px;
}
.side-nav li:hover{
	border-bottom: 1px solid white; 
	color: #66A7D9;

}
.branding a:hover{
	border-bottom: 1px solid white;
	color: #66A7D9;
}
.navbar-container{
	height: 95vh;
	background-position: center;
	margin: 0;
	padding: 0;
}
.navbar-container ul{
	list-style-type: none;
	margin: 36px 0 15px 0;
	padding: 0;
	overflow: hidden; 
	text-align: center;
	float: right;
}
.branding{
	float: left;
	display: block;
	padding: 0 10px 0 10px;
	margin: 0;
}
.branding h2 a{
	color: #66A7D9;
}
.branding a{
	font-size: 2em;
	color: white;
	text-decoration: none;
}
.row{
	min-height: 60px;
	width: 80%;
	margin-left: 10%; 
}
li{
	float: left;
}
.row ul a{
	text-decoration: none;
	display: block;
	padding: 12px 0px 12px 0px;
	float: left;
	width: 80px;
	color: white;
}
.intro{
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	color: white;
	width:80%;
	margin: 17% 10% 0 10%;
	font-size: 2em;
	overflow: hidden;
}
.inside-intro{
	margin: auto;
	text-align: center;
}
.inside-intro h1:hover{
	text-transform: uppercase;
}
/*------------------------------ABOUT SECTION-------------------------------------------*/
.projects_pic{
	min-height: 40%;
}

.about{
	border-top: 0.5px solid black;
	height: auto;
	background-color: white;
	background : url("1.jpg") center;
	background-size: cover;
	min-height: 500px;
	border: 2px solid grey;
}
.social-icons{
	padding: 10px;
}

.row-about{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
}
.about h1{
	font-size: 2.5em;
	
}
.row-about h1{
	font-size: 2.5em;
	line-height: 0px;
}
.row-about p{
	margin: 0;
	font-size: 1.2em;
}

.abt-content{
	margin: 0;
	display: flex;
	flex-wrap: wrap;	
	width: 58%;
	height: 100%;
	border: 1px solid bottom ;
}
.abt-img{
	height: 49vh;
	width: 40%;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	
}
.fa {
  padding: 15px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  margin: 5px 12px;
}

.fa-facebook .fa-twitter .fa-google .fa-linkedin .fa-instagram .fa-youtube:hover {
    opacity: 0.7;
    padding: 17px;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}
/*----------------------------Interest--------------------------------------------*/
.interests{
	height: auto;
	/*border-bottom: 0.5px solid black;*/
	background-color: #DCD9CF;
	min-height: 80vh;
	margin: 0;
	background:url("7.jpg") ;
	background-size: cover;
	
	opacity: 0.95;
}
.row-interests{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.int-content{
	width: 98%;
}
.ml-img{
	margin: 15px 0 0 0;
	width: 30%;
}
.fsd-img{
	margin: 15px 0 0 0;
	width: 30%;
}
.int-content h1{
	line-height: 0;
	font-size: 2.5em;
}
.int-content p{
	margin: 0;
	font-size: 1.2em;
}

/*---------------------PROJECTS-----------------------------------------------*/
.projects{
	margin: 0;
	height: auto;
	min-height: 400px;
	background-color: #000080;
	background: url(8.jpg) ;
	background-size: cover;
	border: 2px solid grey;
}

.projects h1{
	margin: 0;
	font-size: 2.5em;
}
.row-projects{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.prj-content{
	width: 98%;
}
.prj-content a{
	text-decoration: none;
}
.centered_projects{
	text-align : center;
	width:33.33%;
	display: flex;
	float: left;
}

/*-------------MMMMEDIA QQUERIES-----------------------------*/

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

	body h1{
		font-size: 1em;
	}

	.fontsize{
		font-size: 1em;
	}
	.pfontsize{
		font-size: 1em;
	}

	.about h1{
		font-size: 2em;
		
	}
	.row-about p{
		margin: 0;
		font-size: 1em;
	}
	.row-about{
		flex-direction: column;
		justify-content: center;
	}
	.row-about .abt-img{
		order: -1;
	}
	.abt-content{
		width: 98%;
	}
	.abt-img{
		height: 50vw;
		width: 80%;
		margin: auto;
	}

	.int-content h1{
		line-height: 0;
		font-size: 2em;
	}
	.int-content p{
		margin: 0;
		font-size: 1em;
	}

	.projects h1{
	margin: 0;
	font-size: 2em;
}


}

/*-------------MMMMEDIA QQUERIES-----------------------------*/

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

	body h1{
		font-size: 1em;
	}

	.fontsize{
		font-size: 1em;
	}
	.pfontsize{
		font-size: 1em;
	}

	.about h1{
		font-size: 2em;
		
	}
	.row-about p{
		margin: 0;
		font-size: 1em;
	}
	.row-about{
		flex-direction: column;
		justify-content: center;
	}
	.row-about .abt-img{
		order: -1;
	}
	.abt-content{
		width: 98%;
	}
	.abt-img{
		height: 50vw;
		width: 80%;
		margin: auto;
	}

	.int-content h1{
		line-height: 0;
		font-size: 2em;
	}
	.int-content p{
		margin: 0;
		font-size: 1em;
	}

	.projects h1{
	margin: 0;
	font-size: 2em;
}


}

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

	.navbar-container{
		height: auto;
		background : url('9.png') center ;
		background-size: cover;
	}
	.side-nav{
		height: 100%;
		width: 0;
		position: fixed;
		z-index: 1;
		top: 0;
		right: 0;
		background-color:black ;
		overflow-x: hidden;
		transition: 0.5s;
		padding-top: 60px;
		order: 1px solid white;
	}
	.side-nav a{
		padding: 30px 30px 30px 30px;
		transition: 0.3s
		font-size:25px;
		
		width: 100%;
	}
	.row ul a{
		width: 75%;
		text-align: center;
	}
	.row{
		margin: auto;
	}
	.side-nav li{
		display: inline-block;
		width: 100%;
		padding: 30px 30px 30px 30px;
		text-align: center;
		

	}
	.side-nav a li:hover{
		color: grey;
	}
	.icon-sidenav{
		display: inline-block;
		color: white;
		float: right;
		margin:35px 0 15px 0;
		font-size:25px; 
	}
	.icon-sidenav a{
		text-decoration: none;
		list-style-type: none;
		color: #66A7D9;
	}
	.abt-img{
		height: 50vw;
		width: 70%;
		margin:auto;	
	}
	.row-interests{
		flex-direction: column;
	}
	.ml-img{
		height: 50vw;
		width: 70%;
		margin : 15px 10% 0 10%;
	}
	.fsd-img{
		margin : 10% 10% 0 10%;
		height: 50vw;
		width: 70%;
	}
	.fa {
		  padding: 20px;
		  font-size: 30px;
		  width: 15px;
		  text-align: center;
		  text-decoration: none;
		  margin: 5px 2px;
	}
	
}