@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');


body{
	background-color: #022a30;
	color: white;
	font-family: "Bai Jamjuree", sans-serif;
}

.navbar{
	background-color: rgb(3, 63, 71);
	position: fixed;
	width: 100%;
	z-index: 1;
}

.nav-item{
	font-weight: 700;
	text-transform: uppercase;	
}

.nav-item a:hover{
	color: rgb(224, 247, 128)!important;
}



@media (min-width : 992px){
	.navbar{
		width: 20%;
		height: 100vh;
		position: fixed;
	}

	#non-header-part{
		width: 80%;
		margin-left: auto;
	}



	
}

.person-pic{
	width: 140px;
	height: 140px;
	border-radius: 70px;
	border: 5px solid rgb(224, 247, 128);
}


.full-height{
	height: 100vh;
	display: flex;
	align-items: center;
	color: white;	
}


.px-lg-5{
	padding: 100px !important;
}

.full-height h1,p{
	margin-bottom: 30px;
	max-width: 700px;
}

.full-height p{
	margin-bottom: 50px;
	
}


.heading-title{
	font-size: 47px;
	font-weight: 700;
}

.nav-link{
	color: white;
}

.btn1{
	background-color: rgb(224, 247, 128);
	padding: 15px 25px;
	color:#033f47;
	text-decoration: none;
	font-weight: 700;
}

.text-brand{
	color: rgb(224, 247, 128); 
}

.services-section{
	padding: 100px;
	display: flex;	
}

.services-card{
	background-color: rgb(3, 63, 71);
	color: white;
	border-radius: 15px;
	transition-property: box-shadow;
	transition-duration: 300ms;
}

.services-card p{
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	margin: 16px 0px;
	color: rgb(182, 203, 206);
}

.services-card:hover{
	box-shadow: -5px 8px 0px rgb(224, 247, 128);
}

.services-icon-wrapper{
	width: 70px;
	height: 70px;
	border-radius: 10px;
	background-color: rgb(224, 247, 128);
	margin-bottom: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.service-icon{
	color: rgb(3, 63, 71);
	font-size: 30px;
}

h2{
	margin-bottom: 30px;

}

#project-section{
	padding: 100px;
}

.project-card{
	background-color: rgb(3, 63, 71);
	color: white;
	border-radius: 10px;
}

.project-pic{
	transition-property: transform;
	transition-duration: 200ms;
}

.project-pic:hover{
	transform: scale(1.1);
	border-radius: 10px;
}

.project-pic-wrapper{
	overflow: hidden;
}

.project-card:hover{
	box-shadow: -5px 8px 0px rgb(224, 247, 128);
}

#educaton-section, #review-section,#blog-section{
	padding: 100px;
}

.education-card, .review-cards,.blog-cards{
	background-color: rgb(3, 63, 71);
	color: white;
	border-radius: 10px;
}

.education-card:hover{
	box-shadow: -5px 8px 0px rgb(224, 247, 128);
}

.fa-star{
	font-size: 25px;
	margin-bottom: 15px;
	font-weight: 900;
	font-family: 'Line Awesome Free';
}
.review-cards:hover{
	box-shadow: -5px 8px 0px rgb(224, 247, 128);
}

.blog-cards:hover{
	box-shadow: -5px 8px 0px rgb(224, 247, 128);
}


#contact-section{
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}


.btn{
	background-color: rgb(224, 247, 128);
	color: #033f47;
	font-weight: 700;
	text-decoration: none;
}

.contact-heading{
	text-align: center;
	font-weight: 700;
	font-size: 35px;
	margin-bottom: 50px;
}

#footer{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40px;
}

.footer-icon{
	width: 40px;
	height: 40px;
	background-color: rgb(3, 63, 71);
	border-radius: 20px;
	margin: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer-icon a{
	color: white;
}

#contact-section .form-control{
	color: white;
	
}

.navbar-brand{
	font-weight: 700;
}

.card-body a{
	color: rgb(224, 247, 128);
}