body{
	font-family: monospace;
	width: 100%;
  height: 100%;
  background: url(https://re5febdmdqsue53l.public.blob.vercel-storage.com/BG%20mobile%204-XoUQlo2VRW8WQ4G2znZXk5MZF6ZrCR.jpg);
    background-size: inherit;
    background-position: center;
    color: #fff;
}

.page.active{
	background: #754c0d !important;
}
swiper-container {
	width: 70%;
	height: 100%;
}

.teks-berjaalan {
  border-bottom: 1px dashed #8f6217f7;
  padding: .3rem;
  margin-bottom: .9rem;
}

swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}

swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.slide{
	margin-bottom: 1.5rem;
}
.center{
	text-align: center;
}

.site-description h1{
	font-size: 2em;
    font-style: normal;
    font-variant: normal;
    font-weight: 500;
    color: 00c118;
    margin: 20px 0 20px 0;
    text-align: center;
}
.site-description ul{
	padding-left: 5rem;
}
.btn-info {
	background-color: 00c118 !important;
	border-color: 00c118 !important;
	color: #fff;
 }

 .btn-cst{
	border: 1px solid #ffdd44;
	color: #f0f8ffbd;
}

.card-post{
	background-color: #6dff4900;
	box-shadow: 5px 5px 3px -1px #c18900;
	border: 1px solid #c19500;
	color: #ffffffbf;
}

.cust-f{
	font-size: 0.9rem;
	font-weight: bold;
	margin-bottom: 0.5rem;
	border-bottom: 1px dotted #ffe33a;
}

header {
	left: 50%;
	transform: translateX(-50%);
	z-index: 9;
	background-color: #31343530;
	padding-top: 10px;
	padding-bottom: 10px;
	position: fixed !important;
	color: white;
	backdrop-filter: blur(3px);
	width: 100%;
	border-bottom: 1px solid #694518b3;
}

.pt-9{
	padding-top: 5rem;
}

.flex{
	max-width: 1200px;
	display: flex;
	margin: auto;
	align-items: center;
justify-content: center;
}

.flex .menu{
	text-align: center;
}

.flex div{
	width:100%;
	padding: 0px 20px; 
}

.login{
	text-align: end;
}

.img-wrap img{
	width: 40%;
   }

header .logo h1 {
    margin: 0;
    font-size: 2rem;
}

main {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
	padding-top: 3rem;
}
.button {
	margin: 0;
	height: auto;
	background: transparent;
	padding: 0;
	border: none;
	cursor: pointer;
   }
   
   img{
	   border-radius:10px;
   }
   .button {
	padding-top: 0px;
	--border-right: 6px;
	--text-stroke-color:rgb(255 255 255 / 90%);
	--animation-color: #ffc537;
	--fs-size: 1.4em;
	letter-spacing: 2px;
	text-decoration: none;
	font-size: var(--fs-size);
	position: relative;
	text-transform: uppercase;
	color: transparent;
	-webkit-text-stroke: 1px var(--text-stroke-color);
	}
   /* this is the text, when you hover on button */
   .hover-text {
	position: absolute;
	box-sizing: border-box;
	content: attr(data-text);
	color: var(--animation-color);
	width: 0%;
	inset: 0;
	border-right: var(--border-right) solid var(--animation-color);
	overflow: hidden;
	transition: 0.5s;
	-webkit-text-stroke: 1px var(--animation-color);
   }
   /* hover */
   .button:hover .hover-text {
	width: 100%;
	filter: drop-shadow(0 0 23px var(--animation-color))
   }

   .container{
	--bs-gutter-x:unset !important;
   }


   .header-menu{
	color: #ddd2b7fa;
	text-decoration: none;
	}
   .header-menu:hover{
	color: #37ff8a;
	}
	.header-menu.active{
		color: #ffdf37;
	}


	@media (max-width: 480px) {
		.button {
		    --fs-size: 0.8em !important;
		}
		.img-wrap img {
			width: 80%;
		 }
		 .flex div {
			padding: 0px 5px;
		 }
		 .menu{
			font-size: 0.6rem;
    			width: 125%;
		 }
		 .img-wrap,.login{
			width: 75% !important;
		 }
		 #all-jackpot{
			padding: 1.5rem;
		 }
		 swiper-container {
			width: 86%;
		 }

	}
	 

	.card{
		background: #635d008a;
		color: #fff !important;
	}