* {
	font-family: 'Source Sans Pro', sans-serif;
}

/* h1,h2,h3,h4,h5,h6,p {
	margin-bottom: 0;
} */

/* width */
::-webkit-scrollbar {
    width: 10px;
}

.text-pertamax {
	color: #2935A1 !important;
}

/* button */
::-webkit-scrollbar-button {
    background: #e6e6e6;
    display: none;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: rgb(184, 184, 184);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #666;
}

/* Track */
::-webkit-scrollbar-track {
    background: #ffffff;
}

/* The track NOT covered by the handle.
::-webkit-scrollbar-track-piece {
    background: #000;
}

/* Corner */
::-webkit-scrollbar-corner {
    background: #999;
}

/* Resizer */
::-webkit-resizer {
    background: #111;
}

main {
	padding-top: 102px;
}

.topbar {
	width: 100%;
	background-color: #0D71B0;
	height: 82px;
	display: flex;
	align-items: center;
    z-index: 10;
	padding: 0 1rem;
	position: fixed;
}

.topbar-red {
	position: absolute;
	left: 0;
	top: 0;
}

.topbar-brand {
	display: block;
	margin-right: 1rem;
	z-index: 2;
	position: relative;
}

.topbar-brand>img {
	height: 72px;
	width: 72px;
}

.topbar-menu {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.topbar-menu>li {
	margin: 0 .5rem;
	display: inline-block;
	position: relative;
	padding: .5rem 0;
}

.topbar-menu>li>a {
	display: flex;
	color: #ffffffbf;
	text-decoration: none;
	font-weight: 800;
	font-size: 16px;
	transition: color .25s;
	align-items: center;
}

.topbar-menu>li>a>i {
	font-size: 10px;
	margin-left: .5rem;
}

.topbar-menu>li a:hover {
	color: #ffffff;
}

.page-item.active .page-link {
    background-color: #0D71B0 !important;
    border-color: #0D71B0 !important;
}

.topbar-menu>li.active>a {
	color: #ffffff;
}

.topbar-submenu,
.topbar-submenu2{
	display: none;
	position: absolute;
	top: 42px;
	z-index: 2;
	left: 0;
	//padding: .4rem 0;
	margin: 0;
	background-color: #0D71B0;
	box-shadow: 1px 1px 15px rgb(0 0 0 / 15%);
	padding: .6rem .6rem;
	min-width: 280px;
}

.topbar-submenu2{
    left:95%;
    top:0;
}

.topbar-submenu>li,
.topbar-submenu2>li{
	margin: 0;
	transition: background-color 0.3s ease;
	
}

.topbar-submenu-menu,
.topbar-submenu2-menu{
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.topbar-submenu-menu .title,
.topbar-submenu2-menu .title {
	font-size: 18px;
	font-weight: 900;
	color: #ffffffe1;
}

.topbar-submenu a:hover,
.topbar-submenu2 a:hover{
	color: #ffffff;
}

.topbar-submenu-menu>li,
.topbar-submenu2-menu>li{
	font-size: 17px;
	font-weight: 500;
	color: #ffffffe1;
	text-decoration: none;
	cursor:pointer;
}

.topbar-submenu-menu>li:hover>a,
.topbar-submenu2-menu>li:hover>a,
.topbar-submenu-menu>li.active>a,
.topbar-submenu2-menu>li.active>a{
    background:#09649d;
    transition: background-color 0.3s ease;
}

.topbar-submenu-menu>li.title,
.topbar-submenu-menu>li.title2,
.topbar-submenu2-menu>li.title,
.topbar-submenu2-menu>li.title2{
    padding: .6rem 1.2rem;
    background:none;
}
    
.topbar-submenu-menu>li>a,
.topbar-submenu2-menu>li>a{
	font-size: 16px;
	line-height:1.4;
	font-weight: 500;
	color: #ffffffe1;
	text-decoration: none;
	display:block;
	vertical-align:middle;
	text-align:left;
	padding: .6rem 1rem;
	border-radius:10px;
	transition: background-color 0.3s ease;
}

.topbar-submenu-menu>li>a>i,
.topbar-submenu2-menu>li>a>i{
	font-size: 12px;
	display:inline-block;
	vertical-align:middle;
	width:5%;
	margin:0;
}

.topbar-submenu-menu>li>a>span,
.topbar-submenu2-menu>li>a>span{
    display:inline-block;
    vertical-align:middle;
    width:80%;
    margin:0;
}

.topbar-submenu-menu>li>ul,
.topbar-submenu2-menu>li>ul{
	padding: 0;
	list-style-type: none;
	display:none;
}

.topbar-submenu-menu>li>ul>li,
.topbar-submenu2-menu>li>ul>li{
	margin: .75rem 0 0 .25rem;
}

.topbar-submenu-menu>li>ul>li>a,
.topbar-submenu2-menu>li>ul>li>a{
	color: #ffffffe1;
	text-decoration: none;
	font-size: 16px;
}

.topbar-submenu-menu>li>ul>li>a>i,
.topbar-submenu2-menu>li>ul>li>a>i{
	font-size: 12px;
}


.topbar-socmed {
	list-style-type: none;
	padding: 0;
	margin: 0 0 0 1rem;
	display: flex;
}

.topbar-socmed li {
	margin: 0 .25rem;
	display: inline-block;
	position: relative;
}

.topbar-socmed li a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffffbf;
	text-decoration: none;
	font-weight: 900;
	font-size: 17px;
	transition: all .25s;
	border: solid 2px #ffffffbf;
	border-radius: 50%;
	height: 32px;
	width: 32px;
}

.topbar-socmed li a i {
	font-size: 17px;
}

.topbar-socmed li a:hover {
	color: #ffffff;
}

.topbar-socmed li.active>a {
	color: #ffffff;
}

.topbar-socmed-instagram:hover {
	background-color: #3B6994;
	border-color: #3B6994;
}

.topbar-socmed-tiktok:hover {
	background-color: #000000;
	border-color: #000000;
}

.topbar-socmed-youtube:hover {
	background-color: #C33223;
	border-color: #C33223;
}


.share-socmed {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.share-socmed li {
	margin: 0 .25rem;
	display: inline-block;
	position: relative;
}

.share-socmed li a {
	margin: 0 .5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-weight: 900;
	font-size: 20px;
	transition: all .25s;
	border: solid 2px #555555;
	border-radius: 50%;
	height: 42px;
	width: 42px;
	background-color: transparent;
	border-color: #555555;
	color: #555555;
}

.share-socmed-facebook:hover {
	background-color: #3B6994;
	border-color: #3B6994;
	color: #FFFFFF;
}

.share-socmed-twitter:hover {
	background-color: #1CA6D6;
	border-color: #1CA6D6;
	color: #FFFFFF;
}

.share-socmed-envelope:hover {
	background-color: #ffd517;
	border-color: #ffd517;
	color: #222222;
}

.share-socmed-pinterest:hover {
	background-color: #ff1717;
	border-color: #ff1717;
	color: #ffffff;
}

.share-socmed-linkedin:hover {
	background-color: #0077B5;
	border-color: #0077B5;
	color: #ffffff;
}
.topbar-lang {
	padding: 0;
	margin: 0 0 0 1rem;
	list-style-type: none;
	display: inline-block;
	position: relative;
	top: 0;
}

.topbar-lang li a {
	display: flex;
	align-items: center;
	justify-content: center;
}

.topbar-lang li a i {
	margin-left: .5rem;
}

.topbar-lang #selectedLang {
	display: block;
	border: solid 2px #ffffffbf;
	padding: .15rem .75rem;
}

.topbar-lang #selectedLang a {
	color: #ffffff;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
}

.topbar-lang.active #selectedLang {
	border-bottom: 2px solid transparent;
}

#unselectedLang {
	display: none;
	position: absolute;
	margin-top: -2px;
	left: 0;
	padding: 0rem .75rem;
	right: 0;
	border: solid 2px #ffffffbf;
	border-top: solid 2px transparent;
}

#unselectedLang a {
	color: #ffffff;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	margin-right: 18px;
}

.topbar-lang.active #unselectedLang {
	display: block;
}

.topbar-toggler {
	background: transparent;
	padding: 0;
	border: 0;
	color: #ffffff;
	z-index: 2;
	font-size: 28px;
	margin-right: 1rem;
}















/* SIdebar */

.sidebar {
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #0000008d;
	height: 100%;
    z-index: 11;

}

.sidebar-container {
	width: 280px;
	height: 100vh;
	background: #ffffff;
	padding: 2rem 0;
	margin: 0;
	list-style-type: none;
	overflow-y: auto;
}

.sidebar-lang {
	padding: 0;
	margin: 0;
	list-style-type: none;
	position: relative;
	margin-left: 1rem;
}

.sidebar-lang>li {
	margin: 0;
}


.sidebar-submenu {
	padding: 0;
	margin: 0;
	list-style-type: none;
	display: none;
}

.sidebar-submenu {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

.sidebar-submenu>li>div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-decoration: none;
	color: #555;
	font-weight: 700;
	font-size: 16px;
	padding: .85rem 1rem .85rem 2rem;
	border-top: solid 1px #e8e8e8;
}

.sidebar-submenu>li>a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-decoration: none;
	color: #555;
	font-weight: 700;
	font-size: 16px;
	padding: .85rem 1rem .85rem 2rem;
	border-top: solid 1px #e8e8e8;
}

.sidebar-submenu2 {
	padding: 0;
	margin: 0;
	list-style-type: none;
	display: none;
}

.sidebar-submenu2>li>div {
	text-decoration: none;
	color: #555;
	font-weight: 700;
	font-size: 16px;
	padding: .85rem 1rem .85rem 3rem;
	border-top: solid 1px #e8e8e8;
}

.sidebar-submenu2>li>a {
	display: block;
	text-decoration: none;
	color: #555;
	font-weight: 600;
	font-size: 16px;
	border-top: solid 1px #e8e8e8;
	padding: .85rem 1rem .85rem 4rem;
}

.sidebar-submenu2>li>a>i {
	font-size: 10px;
	margin-right: .5rem;
}

.sidebar-has-submenu {}

#sidebarSelectedLang {}

#sidebarSelectedLang button {
	background: transparent;
	border-radius: 2.5px;
	padding: 0.15rem .25rem;
	font-weight: 700;
	width: 62px;
	border: solid 2px #000000;
	cursor: pointer;
}

#sidebarUnselectedLang {
	display: none;
}

#sidebarUnselectedLang a {
	background: transparent;
	border-radius: 2.5px;
	padding: 0.15rem .25rem;
	font-weight: 700;
	width: 62px;
	display: block;
	border: solid 2px #000000;
	cursor: pointer;
	text-align: center;
	padding-right: 20px;
	text-decoration: none;
	color: #000000;
	position: absolute;
}

.sidebar-lang.active #sidebarUnselectedLang {
	display: block;
}

.sidebar-lang.active #sidebarUnselectedLang a {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-top: 0;
}

.sidebar-lang.active #sidebarSelectedLang button {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: 0;
}

.sidebar-menu {
	margin: 0;
	margin-top: 24px;
	padding: 0;
	list-style-type: none;
}

.sidebar-menu.sidebar-submenu {
	display: none;
	margin-top: 0;
}

.sidebar-menu>li {
	display: block;
}

.sidebar-menu>li>a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-decoration: none;
	color: #555;
	font-weight: 900;
	font-size: 16px;
	padding: .85rem 1rem;
	border-top: solid 1px #e8e8e8;
}

.sidebar-download {
	font-size: 16px;
	font-weight: 700;
	color: #C33223;
	border: solid 2px #C33223;
	background-color: transparent;
	border-radius: 50px;
	padding: .25rem .75rem;
	margin-top: 32px;
	transition: background-color .25s;
	margin-left: 1rem;
}

.sidebar-download:hover {
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
	border: solid 2px #C33223;
	background-color: #C33223;
	border-radius: 50px;
	padding: .25rem .75rem;
	margin-top: 32px;
}

.sidebar-close {
	position: absolute;
	top: 0;
	right: 1rem;
	font-size: 32px;
	color: #ffffff;
	padding: 0;
	border: 0;
	background-color: transparent;
	;
}


.home-promo-container {
	margin-top: 2rem;
	max-height: 20vw;
	overflow-y: scroll;
	overflow-x: hidden;
}

.home-promo-item {
	margin-bottom: 1.5rem;
}

.home-promo-item:hover .home-promo-item-title {
	color: #E42C36;
	cursor: pointer;
}

.home-promo-title {
	font-size: 20px;
	font-weight: 900;
	color: #E42C36;
	margin-bottom: 0;
}

.home-promo-header-date {
	font-size: 14px;
	margin-bottom: 0;
	color: #777777;
}

.slick-track {
	display: flex !important;
}

.slick-slide {
	height: inherit !important;
}

.home-promo-item-title {
	font-size: 15px;
	text-decoration: none !important;
	font-weight: 650;
	margin-bottom: .25rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.home-promo-item-desc {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.15rem;
	margin-bottom: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}


section {
    margin: 4rem 0;
}


.main-no-gap {
    padding-top: 82px;
}

.section-title {
    font-size: 22px;
    font-weight: 700;
}

.section-title-large {
	font-size: 36px;
	font-weight: 700;
}

.section-title-xlarge {
	font-size: 38px;
	font-weight: 700;
}

.section-desc {
    font-size: 16px;
}

.section-desc-large {
    font-size: 18px;
}

.text-primary {
    color: #0D70B1 !important;
}

.text-sm {
    font-size: 15px !important;
}

.font-weight-bolder {
    font-weight: 600;
}

.pertamina-info-item {
    background-color: #F3F3F3;
    display: block;
    border-radius: 10px;
    margin: 0 .5rem;
}

.pertamina-info-item-header {
    position: relative;
    display: block;

}

.pertamina-info-item-header .btn-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  
    padding: 0;
    border: 0;
    font-size: 52px;
    background: transparent;
    color: #ffffff;
}

.pertamina-info-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    transition: filter .5s;
}

.dataTable thead{
	background-color: #0D71B0;
}

.dataTable thead th{
	color: #ffffff;
	padding: .5rem;
}

.dataTable tbody td{
	padding: .5rem !important;
}

table.dataTable.no-footer{
	margin-top: 1rem !important;
}

.accordion-body {
	background-color: #faf9f9 !important;
}

.nav-tabs {
	background-color: #0077B5;
	padding: .5rem 1rem;
}

.nav.nav-tabs > .nav-item {
	margin-bottom: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
	background-color: #ffffff;
	color: #0077B5;
	border: 0;
	padding-top: .25rem;
	padding-bottom: .25rem;
	border-radius: 5px;
}

.nav-tabs .nav-link {
	color: #ffffff;
	border: 0;
	transition: none !important;
}

.nav-tabs {
	border-bottom: 0;
}

.tab-content {
	padding: 1rem;
	border: solid 1px #f5f5f5;
	background-color: #f5f5f5;
}

.nav-tabs .nav-link:hover {
	border: 0;
}

.pertamina-info-item-header:hover > img {
    filter: brightness(50%);
}

.pertamina-info-item-body {
    padding: 1rem;
}

.pertamina-info-item-body h4 {
    font-size: 18px;
    font-weight: 600;
}

.pertamina-info-item-body .date {
    font-size: 14px;
    color: #555555;
}

.table-striped tr td:nth-child(2){
   word-break: break-word;
}

.footer {
    background-color: #0D70B1;
    width: 100%;
    padding: 4rem 0;
}

.footer-logo {
    height: 150px;
}

.footer-menu {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.footer-menu > li {
    display: block;
    margin: 1rem 0;
    text-align: center;
}

@media (min-width: 992px) {
    .footer-menu>li {
    	display: inline-block;
    	margin: 0 1rem;
        text-align: left;
    }

    .footer-menu>li::after {
    	content: '|';
    	margin-left: 2rem;
    	color: #ffffff;
    	font-weight: 900;
    	font-size: 22px;
    }

    .footer-menu>li:last-child::after {
    	content: '';
    }
}


.footer-menu > li > a {
    color: #ffffff;
    text-decoration: none;
    font-size: 22px;
    font-weight: 900;
}

.footer-socmed {
	list-style-type: none;
	padding: 0;
	margin: 0 0 0 1rem;
	display: flex;
}

.footer-socmed li {
	margin: 0 .25rem;
	display: inline-block;
	position: relative;
}

.footer-socmed li a {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffffbf;
	text-decoration: none;
	font-weight: 900;
	font-size: 17px;
	transition: all .25s;
	border: solid 2px #ffffffbf;
	border-radius: 50%;
	height: 42px;
	width: 42px;
}

.footer-socmed li a i {
	font-size: 20px;
}

.footer-socmed li a:hover {
	color: #ffffff;
}

.footer-socmed li.active>a {
	color: #ffffff;
}

.footer-socmed-instagram:hover {
	background-color: #3B6994;
	border-color: #3B6994;
}

.footer-socmed-tiktok:hover {
	background-color: #000000;
	border-color: #000000;
}

.footer-socmed-youtube:hover {
	background-color: #C33223;
	border-color: #C33223;
}

.footer-qr {
    height: 150px;
    width: 150px;
}

.footer-djp{
    line-height:1.1 !important; 
    margin-left: -110px !important;
}

@media (max-width: 768px) {
    .footer-djp{
        margin-left:0 !important;
    }
}


.copyright {
    width: 100%;
    height: 42px;
    background-color: #074C91;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.copyright p {
    color: #ffffff7d;
    margin-bottom: 0;
    font-weight: 600;
}

.home-slider {
    position: relative;
}

.home-slider-dots {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 1rem;
    width: 100%;
}

.home-slider-dots > li {
    display: inline-block;
}

.home-slider-dots > li.slick-active > button {
    background-color: #ffffff;
    border: solid 3px #ffffff;
}

.home-slider-dots > li > button {
    padding: 0;
    font-size: 0;
    height: 10px;
    width: 10px;
    margin: 0 .25rem;
    border-radius: 50%;
    border: solid 3px #cacaca;
    background: transparent;
}

@media (min-width: 768px) {
.home-slider-dots>li>button {
	padding: 0;
	font-size: 0;
	height: 14px;
	width: 14px;
	margin: 0 .5rem;
	border-radius: 50%;
	border: solid 3px #cacaca;
	background: transparent;
}
}

.home-slider .slick-prev {
    left: 1rem;
    z-index: 1;
}

.home-slider .slick-next {
    right: 2rem;
    z-index: 1;
}

.home-slider .slick-prev::before {
	font-size: 32px;
}

.home-slider .slick-next::before {
	font-size: 32px;
}

@media (min-width: 768px) {

	.home-slider .slick-prev::before {
		font-size: 52px;
	}

	.home-slider .slick-next::before {
		font-size: 52px;
	}

	.home-slider .slick-next {
		right: 3rem;
		z-index: 1;
	}

}

#priceSlider.dark-arrow .slick-prev {
	left: -3rem !important;
}

#priceSlider.dark-arrow .slick-next {
	right: -1rem !important;
}

.dark-arrow .slick-prev {
    left: 1rem;
    z-index: 1;
    top: 40%;
}

.dark-arrow .slick-next {
    right: 2rem;
    z-index: 1;
    top: 40%;
}

.dark-arrow .slick-prev::before {
	font-size: 32px;
    color: #dddddd;
}

.dark-arrow .slick-next::before {
	font-size: 32px;
    color: #dddddd;
}

@media (min-width: 768px) {

	.dark-arrow .slick-prev::before {
		font-size: 52px;
	}

	.dark-arrow .slick-next::before {
		font-size: 52px;
	}

	.dark-arrow .slick-next {
		right: 3rem;
		z-index: 1;
	}

}



.home-product-item {
    margin: 0 .5rem;
}





	

.product-slider-dots {
	padding: 0;
	margin: 0;
	list-style-type: none;
	display: flex;
	justify-content: center;
	width: 100%;
    margin-top: 1rem;
}

.product-slider-dots>li {
	display: inline-block;
}

.product-slider-dots>li.slick-active>button {
	background-color: #141414;
	border: solid 3px #141414;
}

.product-slider-dots>li>button {
	padding: 0;
	font-size: 0;
	height: 10px;
	width: 10px;
	margin: 0 .25rem;
	border-radius: 50%;
	border: solid 3px #cacaca;
	background: transparent;
}

@media (min-width: 768px) {
	.product-slider-dots>li>button {
		padding: 0;
		font-size: 0;
		height: 14px;
		width: 14px;
		margin: 0 .5rem;
		border-radius: 50%;
		border: solid 3px #cacaca;
		background: transparent;
	}
}

.cursor-pointer {
    cursor: pointer;
}

.product-banner {
    position: relative;
}

.product-banner-content {
    display: flex;
    align-items: center;
    position: static;
}
.product-banner-content p {
	text-align: center;
	font-size: 16px;
}
@media (min-width: 992px) {
    .product-banner-content {
    	position: absolute;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	width: 100%;
    	height: 100%;
    }

    .product-banner-content p {
    	text-align: left;
    }
}

.about-product-faq {
    cursor: pointer;
}

.about-product-title {
    font-weight: 900;
    font-size: 42px;
}

.about-product p {
    font-size: 18px;
}

.product-feature {
    position: relative;
}

.product-feature-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-feature-content {
    position: relative;
    z-index: 2;
    padding: 4rem 0;
}

.product-feature-title {
    font-size: 42px;
    color: #ffffff;
    font-weight: 700;
    text-align: center;
}

.product-feature-card {
    background: #ffffff;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

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

.product-feature-card img {
    height: 180px;
    width: 180px;
}

.product-feature-card h4 {
    font-weight: 700;
    text-align: center;
    color: #E42C36;
    margin-top: 2rem;
	margin-bottom: 1rem;
}

.product-feature-card p {
    text-align: center;
    font-size: 18px;
}

.btn-skew {
    display: inline-block;
    margin: 30px auto;
    background: #ec1e30;
    padding: 5px 30px;
    border: 2px solid #ec1e30;
    transform: skew(-20deg);
    -ms-transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
}

p.about-product-faq-title {
    font-size: 24px;
    font-weight: 700;
}

p.about-product-faq-desc {
    font-size: 16px;
}

.map {
    position: relative;
}

.province {
	list-style-type: none
}

.taggd-item-hover ul li {
	border-bottom: 0 !important;
}

.province,
.title-regency {
	padding-bottom: 5px;
	border-bottom: 1px solid #ddd;
	font-weight: 700;
}

.province ul {
	list-style-type: none;
}

.title-regency h5 {
	font-size: 12px;
	display: block;
	text-align: center;
	margin-bottom: 0
}

.district {
	font-size: 11px;
	color: #000;
	text-align: center;
	font-weight: 500;
	padding-top: 5px;
	padding-bottom: 0
}

.posts-title {
	font-size: 32px;
	font-weight: 700;
	text-align: center;
	margin-bottom: 4rem;
}

.posts-category {
	text-align: center;
	display: block;
	text-decoration: none;
	margin-bottom: .5rem;
	font-weight: bolder;
	font-size: 18px;
	color:#888888;
}

.taggd-item-hover .container {
	padding: 0
}

.service-taggd .taggd-item-hover {
	min-width: 270px
}

.service-taggd .taggd-item-hover .district {
	border-bottom: none
}

.service-taggd .taggd-item-hover .province {
	margin-bottom: 10px
}

.service-taggd .taggd-item-hover .row {
	margin-bottom: 15px
}

.service-taggd .taggd-item-hover .row::last-child {
	margin-bottom: 0
}

.taggd-wrapper .taggd-item-hover {
	min-width: 270px !important;
}
/* [1] The container */
.img-hover-zoom {
	/* [1.1] Set it as per your need */
	overflow: hidden;
	position: relative;
	display: block;
	cursor: pointer;
	/* [1.2] Hide the overflowing of child elements */
}
/* [1] The container */
.img-hover-zoom.article {
	/* height: 170px; */
	/* [1.1] Set it as per your need */
	overflow: hidden;
	position: relative;
	display: block;
	cursor: pointer;

	/* [1.2] Hide the overflowing of child elements */
}
.article-shadow:hover img {
	transform: scale(1.25);
}

.article-title {
	    display: -webkit-box;
	    -webkit-line-clamp: 3;
	    -webkit-box-orient: vertical;
	    overflow: hidden;
}

.article-desc {
	    display: -webkit-box;
	    -webkit-line-clamp: 3;
	    -webkit-box-orient: vertical;
	    overflow: hidden;
		text-align: center;
}

.form-control-solid {
	background-color: #f3f3f3;
}

.article-shadow {
	box-shadow: 0 14px 28px rgb(0 0 0 / 25%),
	0 10px 10px rgb(0 0 0 / 10%);
	cursor: pointer;
	display: block;
}

.btn-primary {
	background-color: #0D70B1;
}

.article-data {
	box-shadow: 0 14px 28px rgb(0 0 0 / 25%),
	0 10px 10px rgb(0 0 0 / 10%);
	cursor: pointer;
	text-align: center;
	border-radius: 10px;
	padding: 2rem;
	height: 100%;
}

.article-data img {
	height: 120px;
}

.posts-date {
	position: absolute;
	top: 7%;
	left: 0;
	background-color: #446084;
	padding: .5rem .75rem;
	color: #ffffff;
	font-weight: 700;
	font-size: 17px;
}

.post-date-month.is-small {
	display: block;
	margin-top: -5px;
}

.posts-date-small {
	position: absolute;
	top: 14%;
	left: 0;
	background-color: #446084;
	padding: .25rem .5rem;
	color: #ffffff;
	font-weight: 700;
	font-size: 16px;
}

.post-date-month.is-small {
	display: block;
	margin-top: -5px;
}
.row.justify-content-center.header-promo .col-12.col-sm-12.col-md-12.col-lg-8.col-xl-6 {
    width: 100%;
}
.row.justify-content-center.header-promo .col-12.col-sm-12.col-md-12.col-lg-8.col-xl-6 h4.text-white.font-weight-black.section-banner-title.text-center {
    font-size: 64px;
}
.product-banner-promo p {
    padding: 40px 20px !important;
    height: 100px !important;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border: 2px solid #0d71b0;
}
.product-banner-promo img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 2px solid #0d71b0;
}
.content {
	color: #8D827B;
	font-size: 17px !important;
}

.content table tr td {
	padding: .5rem .25rem;
	border-bottom: solid 1px #eeeeee;
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
	/* position: absolute; */
	transition: transform .75s ease;
	height: auto;
	width: 100%;
	min-height: 160px;
	/* object-fit: cover; */
	/* height: 100%; */
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	width: 100%;
}

.content blockquote {
    position: relative;
    font-size: 1.2em;
    margin: 0 0 1.25em;
    padding: 0 1.25em 0 1.875em;
    border-left: 2px solid #446084;
    font-style: italic;
    color: #333;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
	transform: scale(1.25);
}

.service-index {
	z-index: -1
}

.text-right {
	text-align: right;
}

.section-banner-title {
	font-size: 42px;
}

.accordion-button {
	background-color: #0D70B1 !important;
	color: #ffffff !important;
	font-size: 18px;
}

.section-banner-desc {
	font-size: 24px;
}
@media (min-width: 992px) {
.section-banner-desc {
	font-size: 32px;
}
}

.font-weight-semiblack {
	font-weight: 700 !important;
}


.text-card {
	font-size: 22px !important;
	text-align: center;
}
@media (min-width: 992px) {
	.section-banner-title {
		font-size: 72px;
	}
}

.font-weight-black {
	font-weight: 900 !important; 
}

@media (min-width: 992px) {
.text-lg-left {
	text-align: left !important;
}
}
.closePopupPDS {
	position: absolute;
	right: 9px;
	top: 9px;
	color: #000 !important;
	z-index: 999;
	font-size: 18px;
	text-decoration: none;
	cursor: pointer
}

.content {
	font-size: 18px;
}


.popmaplist {
    font-size: 12px;
    padding:  5px 0 !important;
}

.province,
.title-regency {
	padding-bottom: 5px;
	border-bottom: 1px solid #ddd;
	color: #000;
	font-weight: 700;
}

.taggd-item-hover ul li {
	list-style-type: none;
}



.title-regency h5 {
	font-size: 12px;
	display: block;
	text-align: center;
	margin-bottom: 0;
	white-space: nowrap;
	padding: .25rem 0;
	font-weight: 700;
}

.popmap-btn {
    text-align: center;
    text-transform: capitalize;
    font-size: 14px;
    display: block;
    padding: 10px;
    color: #333
}

.popmaplist h5 {
    margin-bottom: 0;
    font-size: 14px
}

.popmaplist img {
    max-width: 80px;
    min-width: 80px;
    margin-right: auto
}

.popmap-title {
    margin-bottom: 0;
    font-size: 20px;
    text-align: center;
    padding-top: 15px;
	font-weight: 700;
	color: #000000;
    text-transform: uppercase
}

.taggd-wrapper .taggd-item {
	z-index: 1 !important;
}

@media (max-width:649px){
    .table-responsive { //display:block; width:100% !important; }
    .table-responsive thead{}
    .table-responsive tbody{}
    .table-responsive tr td{ display:block; width:100% !important; }
}


#form_search{}
#form_search input[type="text"]{
    background: rgba(255,255,255,.2);
    margin:0 auto 20px;
    border:none;
    color:#FFF !important;
    border-radius:25px;
    padding:8px 20px;
    width:90%;
    max-width:300px;
    display:block;
    text-align:center;
    transition:all .3s ease-in-out;
}

#form_search input[type="text"]:focus{
    background:rgba(255,255,255,.4);
    transition:all .3s ease-in-out;
}

#form_search input[type="text"]::placeholder {
  color: white;
  opacity: 1; /* Untuk memastikan placeholder tidak transparan */
}