@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
body{
	font-family: 'Raleway', sans-serif;
}
.fontku{
	font-family: 'Dancing Script', cursive;
}
html{
	scroll-behavior: smooth;
}
/*membuat jarak*/
.jarak-atas{
	margin-top: 150px;
}
.huruf-h1{
	font-weight: bold;
	font-size: 40px;
	margin-top: 30px;
}
body{
	overflow-y: scroll;
	scroll-behavior: smooth;
}
@media screen and (max-width: 991px){
	.huruf-h1{
		text-align: center;
	}
	.huruf-h5{
		text-align: center;
	}
	.jarak-atas{
		margin-top: 50px;
	}
	.tombol-daftar{
		margin-left: 16%;
		margin-right: 16%;
		margin-bottom: 20px;
	}
	.paket{
		margin-left: 5px;
		margin-right: 5%;
		padding-bottom: 20px;
		padding-top: 30px;
	}
	.promo{
		margin-left: 5px;
		margin-right: 5%;
	}
	.surat{
		text-align: center;
	}
}
/*membuat tombol daftar*/
.tombol-daftar{
	border-radius: 0px;
	height: 40px;
	width: 220px;
	margin-top: 30px;
	padding: 10px;
	border: none;
	font-weight: bold;
	color: white;
	background: #CB356B;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #BD3F32, #CB356B);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #BD3F32, #CB356B); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.tombol-daftar:hover{
	background-color: #ff5c62bf;
	border: none;
	color: white;
}
.bagian-dua{
	background-color: #eee;
	border-radius: 0px;
	border: none;
	margin-left: 1px;
	margin-right: 1px;
}
.garis{
	background-color: #ff5c62;

	height: 1px;
	width: 150px;
	margin-top: 9px;
	border: none;
}
.paket{
	box-shadow: 0 2px 15px 0 rgba(0,0,0,.15);
	border: none;
	position: relative;
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 20px;
	padding-top: 30px;
	background-color: #fff;
	border-radius: 0px;
	border-bottom-left-radius: 50px;
	margin-bottom: 60px;
}
.paket {
	transition: all .2s ease-in-out; 
}
.paket:hover {
	transform: scale(1.08);
	font-weight: bold;
	border: 1px solid #ff5c62;
}
.promo{
	height: 45px;
	margin-bottom: -1px;
	background-color: #ff5c62;
	border-radius: 0px;
	box-shadow: 0 2px 15px 0 rgba(0,0,0,.15);
	border: none;
}
.promo {
	transition: all .2s ease-in-out; 
}
.promo:hover {
	transform: scale(1.08);
	font-weight: bold;
	border: 1px solid #ff5c62;
}
.gambar{
	margin-top: -30px;
}
.footer{
	border: none;
	border-radius: 0px;
	padding: 10px;
	margin-bottom: -10px;
	margin-top: -20px;
	color: #eee;
	margin-left: 1px;
	margin-right: 1px;
	background: #3C3B3F;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #605C3C, #3C3B3F);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #605C3C, #3C3B3F); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.batas-tengah{
	padding-left: 220px;
	padding-right: 150px;
	margin-top: 100px;
	margin-bottom: 70px;
}
@media screen and (max-width: 991px){
	.batas-tengah{
		text-align: center;
		padding-left: 5px;
		padding-right: 5px;
	}
	body{
		padding-left: 5px;
		padding-right: 5px;
	}
}
.data-hitung{
	padding-top: 20px;
	padding-bottom: 80px;
	border: none;
	margin-bottom: -10px;
	background-image: linear-gradient(to top, #dfe9f3 0%, white 100%);
	margin: none;
}
.garis-satu{
	background: #283c86;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #45a247, #283c86);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #45a247, #283c86); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	height: 1px;
	margin-top: 9px;
	width: 50px;
}
.garis-dua{
	background-color: #ead437;
	height: 1px;
	margin-top: 9px;
	width: 50px;
}
.garis-tiga{
	background-color: #367eb1;
	height: 1px;
	margin-top: 9px;
	width: 50px;
}
@media screen and (max-width: 991px){
	.garis-satu{
		height: 2px;
		width: 30px;
	}
	.garis-dua{
		height: 2px;
		width: 30px;
	}
	.garis-tiga{
		height: 2px;
		width: 30px;
	}
}
.register{
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 50px;
	box-shadow: 0 2px 15px 0 rgba(0,0,0,.15);
	background: rgba(243, 241, 241, 0.2);
	border: none;
	border-radius: 0px;
	padding-bottom: 50px;
}
.form-awal label{
	display: block;
	font-weight: bold;
	letter-spacing: 0.05em;
	margin-bottom: 5px;
	margin-top: 3px;
}
.form-awal input[type="text"],
.form-awal input[type="file"]{
	border: none;
	font-weight: bold;
	border-bottom: 1px solid #ddd;
	border-top: 0px solid;
	padding-left: 10px;
	background: transparent;
	border-radius: 0px;
	height:40px;
}
.form-awal input[type="text"]:focus,
.form-awal input[type="file"]:focus{
	border-bottom: 1px solid #000;
	outline: none;
	border-top: none;
}
.tombol-simpan{
	border: none;
	border-radius: 0px;
}
.info-ku{
	padding-left: 40px;
	padding-right: 40px;
	padding-top: 30px;
}
.btn-khusus{
	border: none;
	border-radius: 20px;
	width: 200px;
	box-shadow: 0 2px 15px 0 rgba(0,0,0,.15);
	background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
}
.btn-khusus2{
	border: none;
	border-radius: 20px;
	width: 200px;
	box-shadow: 0 2px 15px 0 rgba(0,0,0,.15);
	background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
}
.btn-khusus3{
	border: none;
	border-radius: 20px;
	width: 200px;
	box-shadow: 0 2px 15px 0 rgba(0,0,0,.15);
	background-image: linear-gradient(to right, #74ebd5 0%, #9face6 100%);
}
.login-admin{
	z-index: 2;
	margin-top: 70px;
	padding-bottom: 30px;
	padding-top: 20px;
	border-radius: 0px;
	border: none;
	box-shadow: 0 2px 15px 0 rgba(0,0,0,.15);
}
.footer-form{
	z-index: 1;
	height: 64px;
	background-color: #4bb19e;
	margin-top: -30px;
	border-radius: 0px;
	border: none;
	box-shadow: 0 2px 15px 0 rgba(0,0,0,.15);
}
.form-login{
	padding-top: 18px;
	padding-left: 60px;
	padding-right: 60px;
}
.tombol-login{
	border-radius: 20px;
	color: white;
	margin-bottom: 10px;
	margin-top: 10px;
	width: 100px;
}
.scrol-atas{
	overflow-y:scroll;
	overflow-x:hidden;
	height:330px;
	padding-right: 10px;
}
.tombol-surat{
	border-radius: 0px;
	border-radius: none;
}
.surat-buat{
	border-radius: 0px;
	padding-bottom: 90px;
	background-image: url('../image/latar.jpg');
	border: none;
	background-size: cover;
}
.login{
	background-color: #eeeeee;
	border: none;
	border-radius: 9px;
	margin-top: 25px;
	padding: 20px 20px 40px;
	box-shadow: 0 2px 15px 0 rgba(0,0,0,.15);
	/*box-shadow: 8px 2px 8px rgba(0,0,0,0.1);*/
	opacity: 0.9;
}
.batas{
	margin-bottom: -18px;
}
.batas1{
	margin-bottom: -12px;
}
.admin-siapel{
	border-radius: 20px;
}
.mybuttonWA{
	margin:0;
	padding:0;
	text-align:center;
	position:fixed;
	bottom:40px;
	right:35px; 
	border: none;
}
.buttonWA{
	font-size:17px;
	color:#f0e2dd;
	background-color: #4ec372;
	padding:10px;
	margin:0;
	overflow:hidden;
	border-radius:20px;
	text-decoration:none;
	box-shadow: 0 2px 15px 0 rgba(0,0,0,.15);
}
.mybuttonWA .buttonWA:hover{
	background-color: #4ec372;
	color: white;
	text-decoration: none;
}
@media screen and (max-width: 991px){
	.mybuttonWA{
		bottom:60px;
		right:25px; 
	}

}
/*custom navbar*/
.navbar-nav li a:hover {
	text-decoration: none;
	color: black;
	font-weight: bold;
	background-color: white;
	width: 100%;
}

.navbar-custom {
	background-color: #000;
	color: white;
	border: none;
	float: center;
}

.navbar-custom .navbar-nav > li > a {
	color: #fff;
}

.navbar-custom .navbar-nav > .active > a {
	color: black;
	background-color: white;
}

.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus,
.navbar-custom .navbar-nav > .open >a {
	text-decoration: none;
	color: black;
}

.navbar-custom .navbar-brand {
    color: #000;

}
.navbar-custom .navbar-toggle {
	background-color: #000;

}
.navbar-custom .icon-bar {
	background-color: #ddd;
}
/* for dropdowns only */
.navbar-custom .navbar-nav .dropdown-menu  { 
	color: black;
}
.navbar-custom .navbar-nav .dropdown-menu>li>a  { 
	color: black;
}
.navbar-custom .navbar-nav .dropdown-menu>li>a:hover,.navbar-custom .navbar-nav .dropdown-menu>li>a:focus  { 
	color: black;
}