html {
	padding: 0;
	margin: 0;
	scroll-behavior: smooth;
}

.container {
	max-width: 1200px;
}

/* font setting here */

@font-face {
	font-family: Poppins-Regular;
	src: url('../font/Poppins-Regular.ttf');
}

@font-face {
	font-family: Poppins-Bold;
	src: url('../font/Poppins-Bold.ttf');
}

@font-face {
	font-family: Poppins-SemiBold;
	src: url('../font/Poppins-SemiBold.ttf');
}

* {
	font-family: Poppins-regular;
}

h3 {
	font-family: Poppins-Medium;
	font-size: 36px;
}

.text-main {
	color: #00558B !important;
}

.text-gray {
	color:#8e8e8e !important;
}

/* end font setting */

/* header/hero-section & navbar here */

.header {
	background: url('../background/hero-img.png');
	background-position: center;
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	/* overflow: hidden; */
}

.navbar {
	font-size: 18px;
	background: transparent;
	position: absolute !important;
	padding: 8px 0;
	z-index: 100;
	width: 100%;

}

.navbar .nav-item .nav-link {
	color: #636667 !important;
	margin: 0px 8px;
}

.navbar .nav-item .nav-link.text-main {
	font-family: Poppins-SemiBold;
	color: #00558B !important;
	font-weight: 800;
}

.navbar .navbar-brand img {
width: 145px;
height: 50px;
}

.navbar .navbar-brand {
	font-family: Poppins-bold;
	color: #817d79;
}
.navbar .dropdown-menu{
	opacity: .9;
	min-width: 13rem;
}

.banner .header-img {
	position: relative;
}

.banner .header-box {
	height: 100vh;
	position: relative;
}

.banner .header-text {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
}
.banner .header-text .mobile-logo{
	margin: auto;
	margin-bottom: 40px;
}

.banner .header-text h1 {
	font-family: Poppins-Bold;
	color: #00558B;
	margin-bottom: 0px;
	line-height: 56px;
	font-size: 44px;
	margin-bottom: 22px;
}

.banner .header-text p {
	color: #636667;
	font-size: 18px;
	margin-bottom: 35px;
}

.banner .box-employee .box-doc-variant{
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 4px 4px 4px #6366672d;
	margin-right: 30px;
	text-decoration: none;

}

.banner .box-employee .box-doc-variant span{
font-family: Poppins-SemiBold;
color: #636667;
}

.banner .box-student .box-doc-variant{
    width: fit-content;
    height: 60px;
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 4px 4px 4px #6366672d;
	margin-right: 30px;
	text-decoration: none;
	display: flex;
}

.banner .box-student .box-doc-variant span{
font-family: Poppins-SemiBold;
color: #636667;
display: block;
margin-left: 20px;
line-height: 32px;
font-size: 16px;
}



.banner .btn-header {
	background: #00558B;
	color: #fff !important;
	font-size: 16px;
	font-family: Poppins-Bold;
	padding: 8px 24px;
	border-radius: 30px;
	box-shadow: 5px 0px 5px rgba(32, 32, 32, 0.4);
	text-decoration: none;
}

.banner .header-img img {
	position: absolute;
	top: 47%;
	left: 50%;
	width: 350px;
    /* transform: translate(-50%, -45%) !important; */
	animation: up-down 3s ease-in-out infinite alternate-reverse both;
}

@keyframes up-down {
	0% {
        transform: translate(-50%, -47%);
        /* transform: scale(.95) translate(-50%, -52%); */
	}

	100% {
        transform: translate(-50%, -43%);
        /* transform: scale(1) translate(-50%, -48%); */
	}
}

/* end header & navbar */

.box-employee{
	display: flex;
	flex-wrap: wrap;
	position: relative;
	left: 50%;
	transform: translate(-50%);

}
.box-student{
	display: flex;
	flex-wrap: wrap;
	position: relative;
	left: 50%;
	transform: translate(-50%);
}

@media(max-width:800px){
	.banner .header-text {
		top: 50%;
	}
	.banner .header-text h1 {
		text-align: center;
		line-height: 36px;
		font-size: 28px;
	}
	.banner .header-text p {
	font-size: 16px;
	text-align: center;
	margin-bottom: 15px;
	}
	.banner .box-employee .box-doc-variant {
		width: 100px;
		height: 100px;
		background: #fff;
		border-radius: 8px;
		padding: 15px;
		box-shadow: 4px 4px 4px #6366672d;
		margin: 10px;
	}
	.banner .box-student .box-doc-variant{
		width: 200px;
		height: 60px;
		margin: 15px;
		text-decoration: none;
		display: flex;
		justify-content: center;
	}
	.box-student{
		display: flex;
		left: 50%;
		transform: translate(-50%);
		width: 460px;
		margin-top: 0px;
	}
	.box-employee{
		width: 360px;
		left: 50%;
		transform: translate(-50%);
		justify-content: center;
	}
}

@media(max-width:600px){

	.banner .header-text h1 {
		font-size: 24px;
	}
	.banner .header-text p {
		display: none;
	}
	.banner .box-employee .box-doc-variant {
		width: 100px;
		height: 100px;
		background: #fff;
		border-radius: 8px;
		padding: 15px;
		box-shadow: 4px 4px 4px #6366672d;
		margin: 10px;
	}
	.banner .box-student .box-doc-variant{
		width: 200px;
		height: 60px;
		margin: 0px 0 20px 0;
		text-decoration: none;
		display: flex;
		justify-content: center;
	}
	.box-student{
		display: block;
		left: 50%;
		transform: translate(-50%);
		width: 200px;
		margin-top: 30px;
	}
	.box-employee{
		width: 240px;
		left: 50%;
		transform: translate(-50%);
		justify-content: center;
	}
}