*{
	margin: 0;
	padding: 0;
}

html {

	scroll-behavior: smooth;
}

h2 {
	font-family: 'Alata', sans-serif;
	color: #93A2EE;
	
}


/*navbar*/
#navbar{
	position: sticky;
	top: 0;
	z-index: 1001;
}

#navbar img {
	width: 150px;
	height: 50px;
	position: relative;
	
	
}

.navbar{
	background-color: #fff;
}


.navbar-nav li {
	padding: 0 5px;
	
}

.navbar-nav li a{
	color: #0a3d62 !important;
	font-weight: 450;
	
	font-weight: lighter;
	font-family: 'Alata', sans-serif;
}

.navbar .btn {
	border-radius: 30px;
}


	/*banner*/

#banner{
	position: relative;
	background-image: url(img/udong.jpg);
    background-size:  100% 100%;
	color: #FFF0C5;
	padding-top: 5%;
	padding-bottom: 10%;
}


.ban-img {
	position: relative;
	z-index: 1000;
}

.banner img {
	border-radius: 20px;
}


.wave{
	position: absolute;
	bottom: -5%;
	left: 0;
}

.banner {
	position: static;
	
}

/*video*/

#video{
	background-image: url(img/bidong.jpg);
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	padding-top: 10%;
}

#video p {
	font-size: 23px;
	font-weight: bold;
	color: #fff;
	font-family: 'Alata', sans-serif;
}

#video h2 {
	color: #93A2EE;

}

video {
	border-radius: 20px;
	max-width: 100%;
    height: auto;
	margin-left: 10px;

}

.video {
	position: relative;
	
}

.video .btn {
	text-decoration: none;
}

.video a {
	color: #fff !important;
}










/*comic*/

#comic {
	background-image: url(img/biru.jpg);
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;

}

#comic h2{
	color: #5C6FB6;
}

.comic img {
	width: 400px;
	height: 400px;
	border-radius: 20px;
}

.comic p {
	font-size: 25px;
	font-weight: bold;
	color: #22284c;
	font-family: 'Alata', sans-serif;
}

.comic .btn {
	text-decoration: none;
}

.comic a {
	color: #fff !important;
}





/*card*/

.card {
	margin-top: 20px;

}

#card{
	background-image: url(img/pinkeu.jpg);
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	
	padding-bottom: 50px;
}

#card h2 {
	color: #510026;
}


#card .card:hover {
	transition: 0.2s;
	transform: scale(1.02);
	text-shadow: 2px 4px 8px #333;

}

.card a {
	text-decoration: none;
	color: #510026;
}





/*footer*/

#footer{
	padding: 10px 0;
	background-color: #fff;
	color: #0a3d62;
	

}

#footer p {
	margin-top: 10px;
}