html {
	overflow-x: hidden;
}
button:focus {
	outline-style: none;
}
.nav-tab {
	background-color: #fff;
}
.text-black {
	color: #212121;
}
.dropdown-item {
	color: #212121;
}
@media only screen and (max-width: 992px) {
	.sec1-box-responsive {
		width: 190px;
		height: 240px;
		margin-left: 0px;
	}
}

@media only screen and (min-width: 992px) {
	.box-collapse {
		width: 120px;
	}
	.telp {
		padding: 3px 18px;
	}
}
@media only screen and (max-width: 991px) {
	.box-collapse {
		width: 250px;
	}
	.telp {
		padding: 6px 18px;
	}
	.telp-collapse {
		padding: 4px;
		width: 100%;
	}
}
@media screen and (min-width: 1317px) {
	.nav-space {
		margin-right: 40px;
	}
}
@media screen and (max-width: 1316px) and (min-width: 1182px) {
	.nav-space {
		margin-right: 20px;
	}
}
@media screen and (max-width: 1181px) {
	.nav-space {
		margin-right: 1%;
	}
	.nav-lg .head-img-link .head-img {
		margin-left: -30px;
	}
}

.text-black {
}
/*RESPONSIVE FOR ALL IN BOOTSTRAP*/

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	.box-flag {
		margin-top: 2px;
	}
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
}

/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
	.box-flag {
		margin-top: 0px;
	}
	.font-size-16 {
		font-size: 16px;
	}
}

/*END OF RESPONSIVE FOR ALL IN BOOTSTRAP*/

.navbar {
	padding: 0 1rem;
}
.navbar {
	padding: 3px 15px;
}
.dropdown-custom {
	width: 150px;
	position: absolute;
	padding: 0px;
	border-radius: 5px;
	box-shadow: 0 0 15px #00000019;
	background-color: #fff;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-60px) scale(0.65);
	transition: 0.35s ease-in-out;
	overflow: hidden;
}

.dropdown-custom2 {
	width: 215px !important;
}
/*@supports (overflow:-webkit-marquee) and (justify-content:inherit)
{
  .dropdown-custom{
    width: 150px;
  }
}*/
_::-webkit-full-page-media,
_:future,
:root .dropdown-custom {
	width: 150px;
}
.dropdown-custom a:first-child {
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.dropdown-custom a:last-child {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
.dropdown-custom-hover {
	transform: translateY(-5px) scale(1);
	opacity: 1;
	visibility: visible;
	transition: 0.35s ease-in-out;
}
.dropdown-menu a {
	font-size: 16px;
}
.dmenu .dropdown-toggle:after {
	visibility: hidden;
}

.opened .dropdown-toggle:after {
	transform: rotate(180deg);
	transition: 0.5s;
}
.navbar-light .nav-item .nav-link {
	font-weight: bold;
	color: #343a40;
}
@media screen and (min-width: 949px) {
	.navbar-light .nav-item .nav-link {
		font-size: 18px;
	}
	.button {
		width: 110px;
	}
}
@media screen and (max-width: 950px) {
	.navbar-light .nav-item .nav-link {
		font-size: 14px;
	}
	.button {
		width: 150px;
	}
}
/*Responsive for Brand Navbar*/
@media screen and (max-width: 1200px) {
	.head-img-link {
		margin-left: 18px;
	}
}
.link-img-whatsapp {
	position: fixed;
	z-index: 1;
}
.navbar {
	background-color: transparent;
}
.box-flag {
	width: 19px;
	height: 19px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 5px;
	box-shadow: 0 0 10px #00000020;
	cursor: pointer;
	position: absolute;
	transform: translateY(2px);
}
.box-flag-navbar:after {
	font-family: FontAwesome;
	content: "\f0d7";
	position: absolute;
	transform: translateY(-3px) translateX(25px);
}
.indo {
	background-image: url("../../asset/img/image/indo.png");
}
.english {
	background-image: url("../../asset/img/image/english.png");
}
.box-img-whatsapp {
	width: 55px;
	height: 55px;
	background-color: #21bdff;
	border-radius: 50%;
	box-shadow: 0px 0px 10px grey;
	padding-top: 10px;
	padding-bottom: 20px;
}
.img-whatsapp {
	width: 34px;
	height: 34px;
	margin-left: auto;
}
.head-img-mobile {
	z-index: 99999999;
	left: 50%;
	top: 10px;
	transform: translateX(-50%);
}
.margin-nav {
	padding-top: 10px;
}
.margin-ul {
	margin-left: -60px;
}
.box-navbar {
	width: 120px;
}
.colour:hover {
	color: black;
}
.colour {
	color: grey;
	font-size: 16px;
}
.marge-login {
	margin-right: 90px;
}
.link-telp:hover {
	text-decoration: none;
}
.telp {
	width: 200px;
	height: 30px;
	align-items: center;
	color: #000000de;
	font-size: 15px;
	margin-top: 3px;
	transform: translateY(-2px);
}
.telp i {
	margin-right: 10px;
}
.telp span {
	color: #000000de;
}
.telp-collapse {
	border-style: solid;
	border-radius: 10px;
	border-color: #343a40;
	align-items: center;
	color: #343a40;
	font-size: 15px;
}
.telp-collapse i {
	margin-right: 10px;
}
.telp-collapse span {
	color: #343a40;
}
.button {
	height: 30px;
	width: 115px;
	font-weight: bold;
	color: #27a9e0 !important;
	background-color: transparent;
	border: 2px #27a9e0 solid;
	border-radius: 5px;
	transition: all 0.3s ease 0s;
	cursor: pointer;
	outline: none;
	transform: translateY(0px);
	padding-top: 2px;
	/*letter-spacing: 0.01em;*/
}

.button:hover {
	/*background-color: white;
  border: #27A9E0 solid;
  color: #27A9E0;*/
}
.button-admin {
	height: 30px;
	width: 120px;
	font-weight: bold;
	color: white;
	border: 2px solid #27a9e0;
	background-color: #27a9e0;
	border-radius: 10px;
	transition: all 0.3s ease 0s;
	box-shadow: 0px 0px 10px -3px #27a9e0;
	font-size: 13px;
}
.button-admin:hover {
	background-color: white;
	color: #27a9e0;
}
.button-sales {
	padding-top: 3px;
	height: 30px;
	font-weight: bold;
	letter-spacing: 2.5px;
	color: white;
	background-color: #27a9e0;
	border-width: 3px;
	border-right: 3px solid #27a9e0;
	border-top: 3px solid #27a9e0;
	border-bottom: 3px solid #27a9e0;
	border-left: 3px solid #bce4f5;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	transition: all 0.3s ease 0s;
	cursor: pointer;
	outline: none;
	box-shadow: 0px 0px 10px -3px #27a9e0;
	font-size: 13px;
}

.button-sales:hover {
	background-color: white;
	border-right: 3px solid #27a9e0;
	border-top: 3px solid #27a9e0;
	border-bottom: 3px solid #27a9e0;
	border-left: 3px solid #bce4f5;
	color: #27a9e0;
}
.button-collapse {
	width: 100%;
	padding: 1pt 0px;
	font-weight: bold;
	letter-spacing: 2.5px;
	color: #343a40;
	background-color: white;
	border: white solid;
	border-radius: 10px;
	transition: all 0.3s ease 0s;
	cursor: pointer;
	outline: none;
	box-shadow: 0px 0px 10px #00000010;
	font-size: 18px;
}

.button-collapse:hover {
	background-color: #27a9e0;
	color: white;
}
.dropdown-menu {
	transform: translateY(-12px);
	padding: 0px;
	border: none;
	border-radius: 4px;
	box-shadow: 0 0 15px #00000019;
}
.dropdown-item-custom {
	padding-left: 5px;
	padding-right: 5px;
}
.dropdown-item {
	padding: 8px 70px 6px 12px;
	color: #212121;
	font-weight: 600;
}
.dropdown-item:hover {
	color: #656565;
	background-color: #f2f2f2;
}
/* Icon 1 */

.nav-link span.menu-bar {
	transition: 0.3s;
	font-size: 18px;
	color: #000000de;
}
.nav-link span.menu-bar:hover {
	transition: 0.3s;
	color: #000000de;
}
.nav-head {
	color: #343a40;
}
.link-service {
	cursor: pointer;
}
.btn-coba {
	padding: 2px 70px;
	border-radius: 5px;
	border: 3px solid #27a9e0;
	background-color: #26aae2 !important;
	white-space: nowrap;
	color: #fff !important;
	user-select: none;
	/* transition: 2s ease; */
}
@media screen and (min-width: 571px) {
	.head-img-collapse {
		transform: translate(28vw);
		transition: 1s;
	}
}
@media screen and (max-width: 570px) and (min-width: 424px) {
	.head-img-collapse {
		transform: translate(23vw);
		transition: 1s;
	}
}
@media screen and (max-width: 424px) {
	.head-img-collapse {
		transform: translate(19vw);
		transition: 1s;
	}
}
.head-img-mini-collapse {
	transform: translate(95vw);
	transition: 1s;
}
.head-img {
	transition: 1s;
	width: 123px;
	height: 33px;
}
.head-img-mini {
	z-index: 1112;
	position: relative;
	margin-left: -235px;
	width: auto;
	height: 38px;
}
.head-img-none {
	display: none;
}

.main-menu {
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	background: white;
}
.nav-open .main-menu {
	opacity: 1;
	z-index: 111;
	visibility: visible;
	z-index: 11111;
	background: white;
	padding-top: 10px;
	transform: translateY(-15px);
}
.nav-md a {
	margin-left: auto;
}
.main-menu .nav li,
.main-menu .nav-desc .nav-back {
	opacity: 0;
	-webkit-transform: translateY(-40px);
	transform: translateY(-40px);
	-webkit-animation-timing-function: cubic-bezier(0.45, 0.005, 0, 1);
	-moz-animation-timing-function: cubic-bezier(0.45, 0.005, 0, 1);
	-o-animation-timing-function: cubic-bezier(0.45, 0.005, 0, 1);
	animation-timing-function: cubic-bezier(0.45, 0.005, 0, 1);
}
.nav-open .main-menu .nav li,
.nav-open .main-menu .nav-desc .nav-back {
	opacity: 1;
	-webkit-transform: translateY(0px);
	transform: translateY(0px);
	-webkit-transition:
		-webkit-transform 0.2s,
		opacity 0.2s;
	transition:
		transform 0.2s,
		opacity 0.2s;
}

.main-menu .nav li.delay-1 {
	-webkit-transition-delay: 0.1s;
	-moz-transition-delay: 0.1s;
	-ms-transition-delay: 0.1s;
	-o-transition-delay: 0.1s;
	transition-delay: 0.1s;
	margin-bottom: -20px;
}
.main-menu .nav li.delay-2 {
	-webkit-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	-ms-transition-delay: 0.2s;
	-o-transition-delay: 0.2s;
	transition-delay: 0.2s;
	margin-bottom: -20px;
}
.main-menu .nav li.delay-3 {
	-webkit-transition-delay: 0.3s;
	-moz-transition-delay: 0.3s;
	-ms-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	transition-delay: 0.3s;
	margin-bottom: -20px;
}
.main-menu .nav-desc .nav-back {
	-webkit-transition-delay: 0.3s;
	-moz-transition-delay: 0.3s;
	-ms-transition-delay: 0.3s;
	-o-transition-delay: 0.3s;
	transition-delay: 0.3s;
	margin-bottom: -20px;
}
.main-menu .nav li.delay-4 {
	-webkit-transition-delay: 0.4s;
	-moz-transition-delay: 0.4s;
	-ms-transition-delay: 0.4s;
	-o-transition-delay: 0.4s;
	transition-delay: 0.4s;
	margin-bottom: -20px;
}
.main-menu .nav li.delay-5 {
	-webkit-transition-delay: 0.5s;
	-moz-transition-delay: 0.5s;
	-ms-transition-delay: 0.5s;
	-o-transition-delay: 0.5s;
	transition-delay: 0.5s;
}
.main-menu .nav li.delay-6 {
	-webkit-transition-delay: 0.6s;
	-moz-transition-delay: 0.6s;
	-ms-transition-delay: 0.6s;
	-o-transition-delay: 0.6s;
	transition-delay: 0.6s;
}
.main-menu .nav li.delay-7 {
	-webkit-transition-delay: 0.7s;
	-moz-transition-delay: 0.7s;
	-ms-transition-delay: 0.7s;
	-o-transition-delay: 0.7s;
	transition-delay: 0.7s;
}

.nav-button {
	position: relative;
	z-index: 1111111;
	border: solid 1px transparent;
	height: 42px;
	display: block;
	width: 50px;
	padding: 10px;
	margin-right: -1vmin;
	transform: translateX(-20px);
}
.nav-button #nav-icon3 {
	width: 24px;
	height: 22px;
	display: inline-block;
	position: relative;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	-o-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
	cursor: pointer;
}
.nav-button #nav-icon3 span {
	display: block;
	position: absolute;
	height: 3px;
	background: #212121;
	border-radius: 35px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;
}
.nav-button #nav-icon3 span:nth-child(1) {
	top: -4px;
	width: 100%;
}
.nav-button #nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) {
	top: 4px;
	width: 80%;
}
.nav-button #nav-icon3 span:nth-child(4) {
	top: 12px;
	width: 60%;
}
.nav-open #nav-icon3 span:nth-child(1) {
	top: 9px;
	width: 0;
	left: 50%;
}
.nav-open #nav-icon3 span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg) translate(-2px, 2px);
	width: 22px;
}
.nav-open #nav-icon3 span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg) translate(-2px, -2px);
	width: 22px;
}
.nav-open #nav-icon3 span:nth-child(4) {
	top: 9px;
	width: 0;
	left: 50%;
}
.btn-navbar {
	width: 13.9%;
	top: 8px;
}
@media screen and (max-width: 425px) {
	.btn-navbar {
		padding-left: 2%;
	}
}
@media screen and (max-width: 320px) {
	.btn-navbar {
		padding-left: 1.5%;
	}
}
.nav-lg,
.nav-md {
	visibility: hidden;
}
.bg-navbar {
	/*background-size: auto;
  position: absolute;
  z-index: -1;
  width: 510px;
  opacity: 0.03;
  margin-top: -20px;*/
	position: absolute;
}
.bg-navbar-box {
	width: 130%;
	height: 120%;
	margin-top: -18px;
	/*background-image: #f5f5f5;*/
	background-color: #f2f2f2;
}
.bg-navbar-circle1 {
	width: 150px;
	height: 150px;
	border-radius: 24%;
	background-color: transparent;
	border: 11px solid white;
	bottom: 90px;
	left: 10%;
}
.bg-navbar-circle2 {
	width: 100px;
	height: 100px;
	border-radius: 23%;
	background-color: transparent;
	border: 10px solid white;
	bottom: 40px;
	left: 45%;
}
.bg-navbar-circle3 {
	width: 60px;
	height: 60px;
	border-radius: 28%;
	background-color: transparent;
	border: 9px solid white;
	bottom: 20px;
	left: 12%;
}
hr {
	height: 1px;
	border: none;
}
.bg-navbar-circle4 {
	width: 80px;
	height: 80px;
	border-radius: 28%;
	background-color: transparent;
	border: 11px solid white;
	bottom: 155px;
	left: 68%;
}
.nav-scroll {
	z-index: 100;
	padding: 10px;
	width: 100%;
	border-radius: 5px;
}
.slide-up-tawkto {
	transform: translateY(-45px) !important;
}
.slide-down-tawkto {
	transform: translateY(0) !important;
}
#tawkchat-container {
	transition: 0.7s;
}
.nav-bottom-desc {
}
.nav-bottom-button {
	background-color: #27a9e0;
	border-radius: 8px;
	padding: 0px 20px;
	color: white;
	height: 10px;
	border: solid #27a9e0;
	font-size: calc(4vmin + 2px);
	transition: 0.5s;
	width: 80%;
}
.d-flex {
	width: 100%;
}
.nav-mobile {
	margin-top: 45px;
	height: 600px;
	transform: translateY(-7px);
}

.nav-mobile .fa-angle-right {
	margin-top: -2px;
	font-size: 26px;
	color: #343a40;
}
.nav-mobile .nav {
	margin-top: -13px;
}
.nav-mobile .nav-link {
	font-size: 16px;
}
.nav-mobile hr {
	width: 117%;
}
.nav-mobile .telp {
	width: 100%;
	height: 35px;
	font-size: 16px;
	padding: 4px 0px;
}
.nav-mobile .button {
	width: 100%;
	height: 35px;
	font-size: 20px;
	padding: 1px 0px;
}
.nav-back {
	top: -52px;
	left: 0;
	position: absolute;
	cursor: pointer;
}

.nav-back-icon {
	margin-top: 0px;
	margin-right: -25px;
	margin-left: -10px;
}
.fa-angle-left {
	font-size: 28px;
}
.navbar-link {
	width: 113%;
	margin-left: -15px;
	padding: 8px;
	border-top: 1px solid white;
}
.nav-ppop {
	border-bottom: 1px solid white;
}
.text-decor-none:hover {
	text-decoration: none;
}
.fa-plus {
	color: #212121;
	font-size: 12px;
	transform: translateY(6px);
}

.plus {
	position: relative;
	transform: translateY(10px);
}
.plus span {
	display: inline-block;
	position: absolute;
	width: 12px;
	height: 2px;
	right: 0;
	background-color: #27a9e0;
}

.collapsed .plus span:nth-child(1) {
	transform: rotate(90deg);
	transition: 0.3s ease-in-out;
}
.collapsed .plus span:nth-child(2) {
	opacity: 1;
	transform: rotate(0deg);
	transition: 0.3s ease-in-out;
}
.plus span:nth-child(1) {
	transform: rotate(0deg);
	transition: 0.3s ease-in-out;
}
.plus span:nth-child(2) {
	opacity: 0;
	transform: translateX(15px);
	transition: 0.3s ease-in-out;
}
.devider {
	width: 110%;
	height: 1px;
	background-color: #cbcbcb60;
	margin-left: -20px;
}
.devider-bold {
	width: 115%;
	height: 1px;
	background-color: #212121;
	margin-left: -20px;
}
.devider-light {
	width: 110%;
	height: 1px;
	background-color: #cbcbcb30;
	margin-left: -20px;
}
.devider-shadow {
	width: 120%;
	box-shadow: 0 5px 10px #00000080;
	background-color: white;
}
.bg-collapse {
	background-color: #00000010 !important;
	transition: 0.4s;
}
.bg-collapse-white {
	background-color: #fff;
	transition: 0.4s;
}
.padding-custom {
	padding-top: 12px;
	padding-bottom: 12px;
}
.z-index-navvbar {
	z-index: 99999;
}
.z-index-navbar-open {
	z-index: 99999999999;
}
.nav.top-md {
	z-index: 99999;
}