/* ------------------------- root ------------------------- */
/* h3 */
.about .container .box h3,
.about .fact .box h3,
.biaya .container .box h3,
.contact .container .box h3{
	font-size: 22px;
	margin-bottom: 1.5rem;
	text-shadow: 1px 1px var(--biru);
}

/* ------------------------- home section ------------------------- */
.home{
	background: url(/gambar/utama/bg-hero-shopee-olshop.jpg) no-repeat;
	background-size: cover;
	background-position: center;
	height: calc(100vh - 60px);
}
.home .container{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 2rem 0;
	width: 100%;
	height: 100%;
}
.home .container h1{
	font-size: 34px;
	color: #fff;
	text-shadow: 2px 2px #333;
}
.home .container p{
	font-size: 20px;
	font-weight: bold;
	color: whitesmoke;
	text-align: center;
	text-shadow: 2px 2px #333;
}
.home .container .btn{
	color: whitesmoke;
	border: 1px solid whitesmoke;
}
.home .container .btn span{
	margin-right: 8px;
}

/* ------------------------- about section ------------------------- */
.about .container,
.about .fact{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	gap: 2rem;
}
.about .container .box,
.about .fact .box{
	width: 50%;
}
.about .container .box:first-child{
	display: flex;
	justify-content: flex-start;
}
.about .fact .box:last-child{
	display: flex;
	justify-content: flex-end;
}
.about .container .box img,
.about .fact .box img{
	max-width: 400px;
	max-height: 300px;
}
/* fact */
.about .fact{
	margin-top: 3rem;
}
.about .fact .box p:nth-child(2){
	margin-bottom: 20px;
}
/*responsive media query*/
@media screen and (max-width: 800px){
	.about .container{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}
	.about .fact{
		-webkit-box-orient: vertical;
		-webkit-box-direction: reverse;
		    -ms-flex-direction: column-reverse;
		        flex-direction: column-reverse;
	}
	.about .container .box,
	.about .fact .box{
		width: 100%;
	}
	.about .container .box:first-child,
	.about .fact .box:last-child{
		justify-content: center;
	}
}

/* ------------------------ kumpulan artikel pada halaman utama ------------------------- */
.artikel-section .box-slider-artikel .content-slider-artikel > *{color: #333;}
.artikel-section .box-slider-artikel .content-slider-artikel h3{margin: 16px 0;}
.artikel-section .cta{
	background: var(--biru);
	height: -webkit-max-content;
	height: -moz-max-content;
	height: max-content;
	padding: 1rem;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: space-evenly;
	    -ms-flex-pack: space-evenly;
	        justify-content: space-evenly;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1rem;
	text-align: center;
}
.artikel-section .cta h4{
	color: #fff;
	font-size: 22px;
}
.artikel-section .cta .btn{
	margin-top: 0;
	color: var(--orange);
	border: 1px solid var(--orange);
	font-weight: bold;
}
.artikel-section .cta .btn:hover{
	background: var(--orange);
	color: #fff;
	border: 1px solid var(--orange);
}
.artikel-section .cta .btn span{
	margin-right: 8px;
}

/* ------------------------ semua halaman sitemaps ------------------------- */
.sitemaps .container > *{
	margin-bottom: 24px;
}

/* ------------------------ /artikel/index.html ------------------------- */
.home-artikel{
	width:100%;
	max-width: 600px;
	margin: auto;
}

.home-artikel .container{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 2rem 0;
	width: 100%;
	height: 100%;
	text-align: center;
}
.home-artikel .container h1{
	font-size: 34px;
	color: #333;
	text-shadow: 2px 2px #555;
}
.home-artikel .container p{
	font-size: 20px;
	font-weight: bold;
	color: #555;
}
.home-artikel .container .btn{
	background: var(--orange);
	color: whitesmoke;
	border: 1px solid whitesmoke;
}
.home-artikel .container .btn span{
	margin-right: 8px;
}
.kumpulan-artikel{
	display: -ms-grid;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-gap: 2rem;
	width: 100%;
	height: 100;
}
.kumpulan-artikel .card{
	width: 100%;
	height: 100%;
}