*{
	margin:0;
	padding:0;
	font-family:Century Gothic;
	text-decoration: none;
	list-style: none;
}
#service #slide::-webkit-scrollbar{
   width:1px;
   background:transparent;
}
::-webkit-scrollbar-thumb{
   background:transparent;
   border-radius:10px;
}
::-webkit-scrollbar-thumb:hover{
   background:transparent;
   border-radius:10px;
} 
html{
	font-size: 12px;
}
body{
	background-color: #eee;
}
ul{
	list-style: none;
}
.navbar{
	height:20%;
	width:100%;
	position: fixed;
	left:0%;
	top:0%;
	background:#00f;
	box-shadow: 0 0px 10px #2c3e50;
	z-index:1;
}
.navbar .header-topbar{
	height:50%;
	width:100%;
	position:relative;
	left:0%;
	top:0%;
	background:#fff;
	text-align: center;
}
.navbar .header-topbar .header-contain .head-containts{
	display: inline;
	padding: 50px;
	margin:40px;
	position: relative;
	top:20px;
	font-weight:bolder;
	color:#130f40;
	font-size: 17px;
}
.navbar .header-bottombar{
	height:50%;
	width:100%;
	position: relative;
	top:0%;
	left:0%;
	background: #130f40;
}
.navbar .header-bottombar #opnbtn{
	position:absolute;
	height:70%;
	width:3%;
	background: #2c3e50;
	top:11%;
	left:1%;
	border:none;
}
.navbar .header-bottombar #opnbtn #navic{
	position:absolute;
	left:0%;
	height:100%;
	width:100%;
}
.navbar .header-bottombar img{
	height:100%;
	width:15%;
	position:absolute;
	left:7%;
	top:0%;
}
.navbar .header-bottombar ul{
	list-style:none;
	float:right;
	margin-top:20px;
}
.navbar .header-bottombar ul li{
	display:inline-block;
}
.navbar .header-bottombar ul li a{
	text-decoration:none;
	color:#fff;
	font-size:17px;
	padding:5px 20px;
	border:1px solid transparent;
	transition:0.6s ease;
}
.navbar .header-bottombar #opnbtn{
	display: none;
}
#banner{
	position: absolute;
	top:20%;
	left:0%;
	height:80%;
	width:100%;
	background-image:url("../images/background/bg1.jpeg");
	background-size: cover;
}
#banner #container{
	position: absolute;
	top:0%;
	left:0%;
	height:100%;
	width:100%;
	background: rgba(0,0,0,0.5);
}
#banner h1{
	font-size:5em;
	color:#fff;
	width:35%;
	padding: 50px;
	margin:15px;
	text-shadow: 0 0px 10px #00c;
}
#banner h2{
	font-size:2em;
	color:#fff;
	width:35%;
	padding: 0px;
	margin-left:80px;
	text-shadow: 0 0px 10px #00c;
}
#about{
	display: flex;
	justify-content: center;
	align-items: center; 
	position: absolute;
	top:100%;
	left:0%;
	height:80%;
	width:100%;
	background: #fff;
}
#about .contain{
	display: inline-block;
	width:40%;
	height:70%;
	background: #fff;
	padding: 15px;
	margin:10px;
	padding-top: 5px;
	text-align: justify;
}
#about #about-bg{
	background-image: url("../images/background/bg3.jpg");
	background-size: cover;
}
#about .contain button{
	height:30px;
	width:100px;
	background: transparent;
	border:1px solid #130f40;
	color:#130f40;
	font-weight: bolder;
	transition: 1s;
}
#about .contain button:hover{
	height:30px;
	width:100px;
	background: #130f40;
	border:1px solid #fff;
	color:#fff;
}
#about #about-p{
	font-size: 1.5rem;
}
#emergence{
	position: fixed;
	bottom:10%;
	right: 10%;
	width:50px;
	height: 50px;
	background: #fff;
	z-index: 1;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	border:2px solid #00a;
	box-shadow: 0 0px 20px #fff;
	font-size:20px;	
	text-shadow: 0 0px 20px #a00;
}
#emergence:before{
	content: "";
	position:absolute;
	width:calc(100% + 40px);
	height:calc(100% + 40px);
	border:1px solid #fff;
	box-shadow: 0 0px 10px #00a;
	border-radius :50%;
	animation: pulseeffect 1.5s linear infinite;
}
#emergence:after{
	content: "";
	position:absolute;
	width:calc(100% + 40px);
	height:calc(100% + 40px);
	border:1px solid #fff;
	box-shadow: 0 0px 10px #00a;
	border-radius :50%;
	animation: pulseeffect 1.5s linear infinite;
	animation-delay: 0.4s;
}
@keyframes pulseeffect{
	0%{
		transform: scale(0.5);
		opacity: 0;
	}
	50%{
		transform: scale(1);
		opacity: 1;
	}
	100%{
		transform: scale(1.4);
		opacity: 0;
	}
}
#service{
	position: absolute;
	top:180%;
	left:0%;
	height:50%;
	width:100%;
	background: #fff;
}
#service #heading{
	display: flex;
	justify-content: center;
	place-items:center;
	position: absolute;
	top:0%;
	left:0%;
	height: 10%;
	width:100%;
	background: #fff;
	font-size: 1.5rem;
}
#service #heading .col{
	margin: 10%;
}
#service #slide{
	position: absolute;
	top:10%;
	left:0%;
	height:90%;
	width:100%;
	background: #fff;
	overflow: hidden;
	overflow-x: scroll;
}

#service #slide #items{
	display: flex;
	justify-content: center;
	position: absolute;
	top:0%;
	left:0%;
	height:100%;
	width:150%;
	background: #fff;
	overflow: hidden;
}
#service #slide #items .col{
	display: inline-grid;
	justify-content: center;
	place-items: center;
	height:80%;
	width: 14%;
	background: #130f40;
	margin:20px;
	padding: 10px;
}
#service #slide .col img{
	height:80%;
	width:70%;
	border-radius: 50%;
	border:5px solid #fff;
	background: #fff;
}
#service #slide .col p{
	color: #fff;
	font-weight: bolder;
}
#service button{
	height:100%;
	width:2.5%;
	border-radius: 50%;
	background: #130f40;
	color:#fff;
	font-size: 1.5rem;
}
#map{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top:230%;
	left:0%;
	height:80%;
	width:100%;
	background: #aaa;
}
#map #map-board{
	width:90%;
	height:90%;
	background: #fff;
	box-shadow: 0 0px 10px rgba(0,0,100);
}
#map #map-board iframe{
	width:100%;
	height:100%;
}
#contact{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top:310%;
	left:0%;
	height:80%;
	width:100%;
	background: #fff;

}
#contact .contain{
	display: inline-block;
	width:40%;
	height:90%;
	background: #fff;
	margin: 20px;
	padding-left: 20px;
	padding-right: 20px;
	color:#130f40;
}
#contact #info{
	font-size: 1.5rem;
}
#contact #conform{
	font-size: 1.2rem;
	box-shadow: 0 0px 5px #130f40;
}
#contact #conform .input{
	margin: 10px;
	padding: 5px;
	width: 90%;
	background: transparent;
	border:none;
	outline: none;
	border-bottom: 1px solid darkblue;
	font-size: 1.2rem;
}
#contact #conform .input::placeholder{
	color:#130f40;
	font-weight:bolder;
}
#contact #conform textarea{
	height: 35%;
}
#contact #conform input[type='submit']{
	margin-left: 10px;
	background: linear-gradient(120deg,black,darkblue);
	color:#fff;
	height:30px;
	width:100px;
	border: none;
	outline: none;
}
#spelink{
	position: absolute;
	top:390%;
	left:0%;
	height: 42%;
	width: 100%;
	background:rgba(0,0,80,0.6);
}
#spelink .col{
	display: inline-block;
	margin-top: 1%;
	margin-left:15%;
	font-size: 1.5rem;
}
#spelink .col .ul li{
	margin-bottom: 10px;
}
#spelink .col .ul li a,h3{
	color:#fff;
}
footer{
	display:flex;
	justify-content:center;
	align-items: center;
	position:absolute;
	top:430%;
	left:0%;
	height:10%;
	width:100%;
	background: #130f40;
}
footer .col{
	display:inline-block;
	text-align: center;
	padding:10px;
	margin:20px;
	width:50%;
	height:40%;
	color:#fff;
	font-size:1.5rem;
}
footer .col ul li{
	padding: 5px;
}
footer .col ul li a{
	text-decoration:none; 
	color:#fff;
}
#title{
	position: absolute;
	top:10%;
	left:0%;
	background: #ccc;
	height:30%;
	width:100%;
}
@media screen and (max-width:450px) {
	ul{
		list-style: none;
	}
	.navbar {
		height:10%;
		width:100%;
		position: fixed;
		left:0%;
		top:0%;
		background:#00f;
		box-shadow: 0 0px 10px #2c3e50;
	}
	.navbar .header-topbar {
   		 display: none;
	}
	.navbar .header-bottombar ul {
    	display:none; 
	}
	.navbar .header-bottombar {
    	height: 100%;
    	width: 100%;
    	position: relative;
    	top: 0%;
    	left: 0%;
    	background: #130f40;
	}
	.navbar .header-bottombar img {
    	height: 100%;
    	width: 60%;
    	position: absolute;
    	left: 50%;
    	top: 0%;
    	transform: translateX(-50%);
	}
	.navbar .header-bottombar #opnbtn{
		display: block;
		position:absolute;
		height:60%;
		width:12%;
		background: #130f40;
		top:20%;
		left:5%;
		border:none;
	}
	.navbar .header-bottombar #opnbtn #navic{
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		height:80%;
		width:100%;
	}
	#nav{
		position:fixed;
		top:10%;
		height:90%;
		width:0%;
		background:#fff;
		transition: 0.5s;
		z-index: 1;
	}
	#nav #ul{
		display: none;
		margin:20px;
		margin-top: 10px;
	}
	#nav #ul #close button{
		background: transparent;
		border:none;
		outline:none;
		font-size:2.5rem;
		float: right;
	}
	#nav #ul li{
		display: block;
		height:20px;
		width:100%;
		background-color:#fff;
		padding: 5px;
		margin-bottom: 10px;
	}
	#nav #ul li a{
		text-decoration: none;
		font-size: 1.5rem;
		color: #2c3e50;
	}
	#emergence{
		position: fixed;
		bottom: 10%;
		right:15%;
	}
	#banner{
		position: absolute;
		top:10%;
		left:0%;
		height:90%;
		background-image:url("../images/background/bg2.jpeg");
		background-size: cover;
	}
	#banner h1{

		font-size: 4em;
	}
	#banner h2{
		font-size:2.5em;
	}
	#about .contain{
		font-size:0.6rem;
	}
	#about #about-bg{
		position: absolute;
		height:30%;
		width:80%;
		top:2%;
	}
	#about #about-p{
		position: absolute;
		height:30%;
		width:80%;
		top:40%;
		font-size: 0.9rem;
	}
	#service{
		position: absolute;
		top:180%;
	}
	#service #slide #items{
		width:300%;
	}
	#service #slide #items .col{
		width: 80%;
	}	
	#service button{
		padding: 5px;
		width: 30%;
		font-size: 1.1rem;
	}
	#map{
		position: absolute;
		top:230%;
	}
	#contact{
		position: absolute;
		top:310%;
		height: 100%;
	}
	#contact #info{
		position: absolute;
		height:40%;
		width:80%;
		font-size: 1rem;
		top:1%;
	}
	#contact #conform{
		position: absolute;
		height:50%;
		width:80%;
		font-size: 0.7rem;
		top:45%;
	}
	#contact #conform .input{
		margin:4px; 
	}
	#contact #conform .input::placeholder{
		font-size: 1rem;
	}
	#spelink{
		position: absolute;
		top:410%;
		left:0%;
		height:90%;
	}
	#spelink .col{
		margin:35px;
	}
	#spelink .col .ul li a,h3{
		color:#fff;
	}
	footer{
		position: absolute;
		top:500%;
	}
	footer .col{
		font-size: 0.6rem;
	}
}