@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap');

body {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
}

/* @media all and (min-width: 992px) {
	.dropdown-menu li{ position: relative; 	}
	.nav-item .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
	}
	.nav-item .submenu-left{ 
		right:100%; left:auto;
	}
	.dropdown-menu > li:hover{ background-color: #f1f1f1 }
	.dropdown-menu > li:hover > .submenu{ display: block; }
}	
/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
/* @media (max-width: 991px) {
    .dropdown-menu .dropdown-menu{
		margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
    }
} */

/* .dropdown:hover > .dropdown-menu, */
/* .dropend:hover > .dropdown-menu {
	display: block;
	margin-top: 0.125em;
	margin-left: 0.125em;
}
.dropend:hover > .dropdown-menu {
	position: absolute;
	top: 0;
	left: 100%;
}
.dropend .dropdown-toggle {
	color: salmon;
	margin-left: 1em;
}
.dropdown-item:hover {
	background-color: lightsalmon;
	color: #fff;
} */

@media screen and (min-width:769px) {
	/* .dropend .dropdown-toggle {
		margin-left: .5em;
	} */
	
	.container {
		width: 1080px;
		/* background-color: red; */
	}
	.contentbox {
		width: 980px;
		/* background-color: red; */
	}
	.font-layanan-unggulan {
		font-size: 28px;
	}
}
@media screen and (max-width:420px) {
	.container {
		width: 380px;
		/* background-color: blue; */
	}
}
.btn-whatsapp {
	position: fixed;
	right: 20px;
	overflow: hidden;
	width: 50px;
	height: 50px;
	border-radius: 100%;
	border: 50;
	z-index: 999;
	color: white;
	transition: 0.2s;
	opacity: 100;
}
.btn-floating:hover {
    width: auto;
    padding: 0 20px;
    cursor: pointer;
}
.btn-floating span {
    font-size: 16px;
    margin-left: 5px;
    transition: 0.2s;
    line-height: 0px;
    display: none;
}
.btn-floating:hover span {
    display: inline-block;
}
.btn-floating:hover img {
    margin-bottom: -10px;
    position: center;
}
.btn-whatsapp.whatsapp {
	bottom: 20px;
	background-color: #34af23;
	border: 2px solid #fff;
}
.btn-floating.whatsapp:hover {
    background-color: #1f7a12;
}
.layananku-ibadahku {
	position: absolute;
	bottom: 0px;
	right: 0px;
	position: absolute;
}
.show-layanan {
	width: 100%;
	height: 160px;
}
.text-copyright {
	text-align: left;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 980px) {
	/* .show-whatsapp {
		display: none;
	} */

	.btn-outline-primary
	.show-layanan {
		width: 108px;
		height: 160px;
	}

	.btn-layanan {
		background-color: #392472;
	}
	.text-button {
		font-size: 12px;
	}
	.text-copyright {
		text-align: left;
		padding-left: 15px;
	}
}
.btn-ungu {
	background-color: #392472;
	color: white;
}
.btn-ungu:hover {
	background-color: #2a1b56;
	color: white
}
.btn-purple {
	--bs-btn-color:#fff;
	--bs-btn-bg:#392472;
	--bs-btn-border-color:#2a1b56;
	--bs-btn-hover-color:#fff;
	--bs-btn-hover-bg:#2a1b56;
	--bs-btn-hover-border-color:#2a1b56;
	--bs-btn-focus-shadow-rgb:49,132,253;
	--bs-btn-active-color:#fff;
	--bs-btn-active-bg:#392472;
	--bs-btn-active-border-color:#2a1b56;
	--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--bs-btn-disabled-color:#fff;
	--bs-btn-disabled-bg:#463085;
	--bs-btn-disabled-border-color:#412789;
}
.btn-outline-primary {
	border: #392472 2px solid;
	background-color: #fff;
	color: #392472;
}
.btn-outline-primary:hover {
	border: #392472 2px solid;
	background-color: #392472;
	color: #fff;
}
.btn-remove {
	background: none!important;
	border: none;
	padding: 0!important;
}
.btn-layanan-unggulan {
	background-color: #fff;
	color: #202F8D;
	border: #202F8D 2px solid;
}
.btn-layanan-unggulan:hover {
	background-color: #f6eed8;
	color: #101953;
	border: #202F8D 2px solid;
}

.logo-svg {
	font-weight: 900;
	font-size: 100pt;
}

footer {
	background-color: #392472;
}

.bg-purple {
	background-color: #392472;
}

.ls-item {
	background-color: #392472;
}
.ls-item:hover {
	background-color: #392472;
}

.text-purple {
	color: #392472 !important;
}

.rsize-img {
	width: 100%;
	height: 100%;
	object-fit: scale-down;
}
.img-poster-crop {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* .d-flex {
	display: -ms-flexbox !important;
	display: flex !important;
} */
.preloader {
	display: -ms-flexbox;
	display: flex;
	background-color: #f4f6f9;
	height: 100vh;
	width: 100%;
	transition: height 200ms linear;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
}
  
.dark-mode .preloader {
	background-color: #454d55 !important;
	color: #fff;
}

.animation__shake {
	-webkit-animation: shake 1500ms;
	animation: shake 1500ms;
}
@-webkit-keyframes shake {
	0% {
		-webkit-transform: translate(2px, 1px) rotate(0deg);
		transform: translate(2px, 1px) rotate(0deg);
	}
	10% {
		-webkit-transform: translate(-1px, -2px) rotate(-2deg);
		transform: translate(-1px, -2px) rotate(-2deg);
	}
	20% {
		-webkit-transform: translate(-3px, 0) rotate(3deg);
		transform: translate(-3px, 0) rotate(3deg);
	}
	30% {
		-webkit-transform: translate(0, 2px) rotate(0deg);
		transform: translate(0, 2px) rotate(0deg);
	}
	40% {
		-webkit-transform: translate(1px, -1px) rotate(1deg);
		transform: translate(1px, -1px) rotate(1deg);
	}
	50% {
		-webkit-transform: translate(-1px, 2px) rotate(-1deg);
		transform: translate(-1px, 2px) rotate(-1deg);
	}
	60% {
		-webkit-transform: translate(-3px, 1px) rotate(0deg);
		transform: translate(-3px, 1px) rotate(0deg);
	}
	70% {
		-webkit-transform: translate(2px, 1px) rotate(-2deg);
		transform: translate(2px, 1px) rotate(-2deg);
	}
	80% {
		-webkit-transform: translate(-1px, -1px) rotate(4deg);
		transform: translate(-1px, -1px) rotate(4deg);
	}
	90% {
		-webkit-transform: translate(2px, 2px) rotate(0deg);
		transform: translate(2px, 2px) rotate(0deg);
	}
	100% {
		-webkit-transform: translate(1px, -2px) rotate(-1deg);
		transform: translate(1px, -2px) rotate(-1deg);
	}
}

@keyframes shake {
	0% {
		-webkit-transform: translate(2px, 1px) rotate(0deg);
		transform: translate(2px, 1px) rotate(0deg);
	}
	10% {
		-webkit-transform: translate(-1px, -2px) rotate(-2deg);
		transform: translate(-1px, -2px) rotate(-2deg);
	}
	20% {
		-webkit-transform: translate(-3px, 0) rotate(3deg);
		transform: translate(-3px, 0) rotate(3deg);
	}
	30% {
		-webkit-transform: translate(0, 2px) rotate(0deg);
		transform: translate(0, 2px) rotate(0deg);
	}
	40% {
		-webkit-transform: translate(1px, -1px) rotate(1deg);
		transform: translate(1px, -1px) rotate(1deg);
	}
	50% {
		-webkit-transform: translate(-1px, 2px) rotate(-1deg);
		transform: translate(-1px, 2px) rotate(-1deg);
	}
	60% {
		-webkit-transform: translate(-3px, 1px) rotate(0deg);
		transform: translate(-3px, 1px) rotate(0deg);
	}
	70% {
		-webkit-transform: translate(2px, 1px) rotate(-2deg);
		transform: translate(2px, 1px) rotate(-2deg);
	}
	80% {
		-webkit-transform: translate(-1px, -1px) rotate(4deg);
		transform: translate(-1px, -1px) rotate(4deg);
	}
	90% {
		-webkit-transform: translate(2px, 2px) rotate(0deg);
		transform: translate(2px, 2px) rotate(0deg);
	}
	100% {
		-webkit-transform: translate(1px, -2px) rotate(-1deg);
		transform: translate(1px, -2px) rotate(-1deg);
	}
}


/* Hover Overlay */
.image-hover-overlay {
	bottom: 0;
	color: rgba(255,255,255, 0.75)!important;
	left: 0;
	opacity: 0;
	padding: 1.25rem;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
	transition: all 0.20s linear 0s;
	-o-transition: all 0.20s linear 0s;
	-ms-transition: all 0.20s linear 0s;
	-moz-transition: all 0.20s linear 0s;
	-webkit-transition: all 0.20s linear 0s;
	transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
}
.image-border-radius .image-hover-overlay {
	border-radius: 3px;
}
.image-hover-overlay:hover {
	opacity: 1;
}
.image-hover-overlay-content {
	position: absolute;
	left: 0;
	right: 0;
	top: 60%;
	transition: all 0.20s linear 0s;
	-o-transition: all 0.20s linear 0s;
	-ms-transition: all 0.20s linear 0s;
	-moz-transition: all 0.20s linear 0s;
	-webkit-transition: all 0.20s linear 0s;
	transform: translateY(-50%);
	-o-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
.image-hover-overlay:hover > .image-hover-overlay-content {
	top: 50%;
}

/* Image blocks */
.image-with-hover-overlay {
	display: block;
	position: relative;
}
.image-border-radius img {
	border-radius: 3px;
}
.image-hover-zoom {
	display: block;
	overflow: hidden;
}
.image-hover-zoom img {
	transition: all 0.20s linear 0s;
	-o-transition: all 0.20s linear 0s;
	-ms-transition: all 0.20s linear 0s;
	-moz-transition: all 0.20s linear 0s;
	-webkit-transition: all 0.20s linear 0s;
}
.image-with-hover-overlay img {
	width: 100%;
}
.image-hover-zoom:hover img {
	transform: scale(1.1);
}

/* .jumbotron {
	text-align: center;
	padding: 20px;
	margin: 10px 0;
}

.gallery {
	padding: 40px;
}

.gallery img {
	width: 100%;
	border-radius: 0;
	position: relative;
} */

.flex-column {
	max-width: 230px;
}

.gallery:after {
    content: '';
    display: block;
    /* height: 2px; */
    /* margin: .5em 0 1.4em; */
    margin: 2px;
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(77,77,77,1) 50%, rgba(0, 0, 0, 0) 100%);
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(77,77,77,1) 50%, rgba(0, 0, 0, 0) 100%);
}

.gallery img {
    height: 100%;
}

.gallery a {
    /* width: 240px;
    height: 180px; */
    display: inline-block;
    overflow: hidden;
    /* margin: 4px 6px; */
    margin: 2px;
    box-shadow: 0 0 4px -1px #000;
}

.ribbon > img {
    position: absolute;
    top: 0;
    right: 0;
    border: 0;
}

/* @media (max-width: 768px) {
    .sm-hidden {
        display: none;
    }
} */

/* Highlight.js Tomorrow Night style */
.hljs-comment,.hljs-quote{color:#969896}.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#c66}.hljs-tag {color: #f8f8f2}.hljs-built_in,.hljs-builtin-name,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#de935f}.hljs-attr{color:#f0c674}.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#b5bd68}.hljs-section,.hljs-title{color:#81a2be}.hljs-keyword,.hljs-selector-tag{color:#b294bb}.hljs{display:block;overflow-x:auto;background:#1d1f21;color:#c5c8c6;padding:.8em}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}