@import url('https://fonts.googleapis.com/css?family=Raleway');
.navbar{ background:#5C3650;}

.nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer;}

.nav-link{ margin-right: 1em !important;}

.navbar-brand:hover{color:#f4f4f4; }

.nav-link:hover{ background: #f4f4f4; color: #5C3650; }

.navbar-collapse{ justify-content: flex-end;}

.navbar-toggler{  background:#fff !important;}

html,h1,h2,h3,h4,h5,h6,a{
 font-family: "Raleway";
}


.icon-bar {
	width: 22px; 
	height: 2px;
	background-color: #B6B6B6;
	display: block;
	transition: all 0.2s;
	margin-top: 4px
}

.socialMediaLinks {
	display: flex;
  	flex-direction: column;
  	position: fixed;
  	right: 1%;
  	bottom: 50%;
}

.socialMediaLinks a {
    font-size: 30px;
    margin: 0 10px 0 0;
    color: #000000;
    text-decoration: none;
	width: 2rem;
  	height: 3rem;
    
}



.socialMediaLinks a:hover { 
    background-color: #f4f4f4; 
}


.socialMediaLinks a.fa-facebook-f { 
    color: #5C3650; 
}
.socialMediaLinks a.fa-github { 
    color: #5C3650; 
}
.socialMediaLinks a.fa-instagram { 
    color: #5C3650; 
}
.socialMediaLinks a.fa-linkedin-in { 
    color: #5C3650; 
}


.about{
	margin:2em 0;
	padding: 3em;
	position: relative;
}

.about h1{
	color: #5C3650;
	margin: 1em;
	text-align: center;
}

.about img{
	height:100%;
	width:100%;
	border-radius:50%;
}

.about .desc{
 padding: 2em;
 border-left:4px solid #5C3650;
}


.about .desc p{
 line-height:2;
 color:#888;
}


.skills{
	margin:4em 0;
	padding: 1em;
	position: relative;
}

.skills h1{
	color:#5C3650;
	margin: 2em;
	text-align: center;
}

.skills h4{
	font-size: 30px;
}

.skills-icon {
    font-size: 50px;
    margin: 0 0 0 0;
    color: #000000;
    text-decoration: none;
}


.education{
	margin:4em 0;
	padding: 1em;
	position: relative;
}

.education h1{
	color:#5C3650;
	margin:2em; 
}

.education img{
	height: 100%;
	width: 100%;
}
.experience{
	margin:4em 0;
	padding: 1em;
	position: relative;
}

.experience h1{
	color:#5C3650;
	margin:1em;
}

.projects {
	margin:4em 0;
	padding: 1em;
	position: relative;
  }

.projects h2 {
	color:#5C3650;
	margin:2em; 
  }

  
.project-pic {
	width: 65%;
	height: 60%;
  }
  
.projects-container {
	display: flex;
	align-items: center;
	justify-content: center;
  }

.projects-title {
	text-align: center;
	margin-bottom: 1rem;
  }
  
.project-container {
	text-align: center;
	width: 21.875rem;
	padding: 1rem;
  }

  .project-container p {
	padding: 0.4rem;
  }
  
  .project-title {
	margin-bottom: var(--bottom-margin);
  }
  
  .project-details {
	margin-bottom: var(--bottom-margin);
  }
  
  .project-card {
	background-color:skyblue;
	border-radius: 11px;
	box-shadow: 0 3px 10px var(--primary-shadow);
	padding: 20px;
	margin: 10px;
  }
.contact{
	margin: 6em 0;
	position: relative;
}

.contact h1{
	color:#5C3650; 
	padding: 2em 1px;
}

.contact  .right{
	max-width: 600px;
}

.contact .right .btn-secondary{
	background: #5C3650;
	color: #fff;
	border:0;
}



.contact .right .form-control .placeholder{
	color: #888;
	font-size: 16px;


}
.footer{
	position: relative;
	background-color: #5C3650;
	left: 0;
	bottom: 0;
	width: 100%;
	color: white;
	height: 2.5rem;
	text-align: center; 
	

}

.scroll-up {
	position: fixed;
	right: 0.5%;
	bottom: 9%;
	cursor: pointer;
}
  
.up-arrow {
	width: 3rem;
	height: 3rem;
}


@media screen and (max-width: 720px) {
	.projects-container {
		flex-direction: column;
	  }
	
	  .project-container {
		width: 20.875rem;
	  }
  }

@media screen and (max-width: 420px) {
	.project-container {
		width: 17.875rem;
	  }
	}