.p,
p {
	color: #6c6c6c
}

.btn-primary {
	background-color: #27c1fd !important;
	border-color: #27c1fd !important
}

.btn-success {
	background: #15a4fa!important;
	border-color:: #15a4fa!important;
}

.bg-success {
	background: #15a4fa!important;
}

.bg-light {
	background-color: #f5f5f5 !important
}

.bg-yellow {
	background-color: #eec603 !important
}

.bg-yellow-soft {
	background-color: #fbf1bf !important
}

.bg-blue-soft {
	background-color: #c8f0ff !important
}

.bg-blue {
	background-color: #163da8 !important
}

.text-blue {
	color: #163da8 !important
}

.text-brown {
	color: grey !important
}

.text-success {
	color: #15a4fa!important;
}

.text-primary {
	color: #27c1fd !important
}

.fs-8 {
	font-size: .8em
}

.navbar {
	height: 80px
}

.logo {
	height: 50px
}

.content {
	margin-top: 80px
}

.bg-gray {
	background-color: #d9d7d7 !important
}

.bg-primary {
	background-color: #1fa4d8 !important
}

.footer-menu img {
	max-height: 30px
}

.navbar-collapse.collapsing,
.navbar-collapse.show {
	background-color: #fff;
	padding: 30px
}

.home-hero {
	width: 100%;
	height: 89vh;
	background-size: cover;
	background-position: center bottom;
	color: #fff;
	padding: 0
}

@media screen and (max-width:600px) {
	#home-slide {
		height: 400px
	}

	.img-slide {
		max-width: 200px
	}
}

.slide-caption {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	padding: 20px;
	color: #fff;
	font-weight: 700;
	font-size: 1.2em;
	border-radius: calc(.25rem - 1px);
	background: rgba(0, 0, 0, .5)
}

.event-caption {
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	padding: 20px;
	color: #fff;
	font-weight: 700;
	border-radius: calc(.25rem - 1px);
	background: rgba(0, 0, 0, .5)
}

.event-caption .desc {
	font-size: .9em;
	font-weight: 400
}

.height-300 {
	width: auto;
	height: 300px
}

.card-stat {
	height: 55px;
	align-items: center;
	display: flex;
	text-align: center;
	color: #fff
}

.card-ro {
	height: 55px;
	align-items: center;
	display: flex;
	justify-content: center;
	color: #fff
}

.card-stat a {
	color: #fff !important
}

.nav-tabs .nav-link {
	margin-bottom: -1px;
	background: 0 0;
	border: 1px solid transparent;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	height: 100%;
	align-content: center;
	display: grid;
	font-size: .9em
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
	background-color: #4b89a1 !important
}

.pp {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 2em
}

.pp img {
	width: 100px;
	height: auto
}

.thumb-pp {
	max-height: 100px
}

.pp .num {
	width: 30px;
	height: 30px;
	position: relative;
	left: 35%;
	top: -25px;
	border-radius: 50% !important;
	text-align: center;
	background-color: #90d00a;
	border: 3px solid #fff;
	color: #fff
}

.galeri-img {
	width: 400px;
	height: 200px
}

.galeri-img img {
	object-fit: cover;
	height: 100% !important
}

#producthero {
	background-image: url(../img/background-2.jpg);
	width: 100%;
	height: 500px;
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: 0
}

#effecthero {
	background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(../img/background-2.jpg);
	width: 100%;
	height: 250px;
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: 0
}

h1 {
	font-size: 3.5em
}

.item img {
	max-width: 150px
}

.owl-carousel .owl-item.big div {
	transition: transform .2s;
	transform: scale(1)
}

.owl-carousel .owl-item.medium div {
	transition: transform .2s;
	transform: scale(.9);
	opacity: .8
}

.owl-carousel .owl-item.small div {
	transition: transform .2s;
	transform: scale(.8);
	opacity: .6
}

.owl-carousel .owl-item.extrasmall div {
	transition: transform .2s;
	transform: scale(.7);
	opacity: .4
}

#abouthero {
	background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(../img/background-3.jpg);
	width: 100%;
	height: 500px;
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: 0
}

#bussineshero {
	background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(../img/background-4.jpg);
	width: 100%;
	height: 500px;
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: 0
}

#morehero {
	background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(../img/background-5.jpg);
	width: 100%;
	height: 250px;
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: 0
}

.h-paket {
	height: 55px !important;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3em
}

.paketlist li {
	list-style-image: url(../img/checklist.png)
}

#about-custom {
	background-image: linear-gradient(rgba(0, 0, 0, .50), rgba(0, 0, 0, .50)), url(../../assets/picture/pexels-fauxels-3184418.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	height: 50vh;

}

#product-custom {
	background-image: linear-gradient(rgba(0, 0, 0, .50), rgba(0, 0, 0, .50)), url(../../assets/picture/pexels-marlon-martinez-1450082.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	height: 50vh;

}

#bussines-custom {
	background-image: linear-gradient(rgba(0, 0, 0, .50), rgba(0, 0, 0, .50)), url(../../assets/picture/pexels-fauxels-3184465.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	height: 50vh;

}

#reward-custom {
	background-image: linear-gradient(rgba(0, 0, 0, .50), rgba(0, 0, 0, .50)), url(../../assets/picture/pexels-alexander-mils-2068975.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	height: 50vh;

}

#testimoni-custom {
	background-image: linear-gradient(rgba(0, 0, 0, .50), rgba(0, 0, 0, .50)), url(../../assets/picture/pexels-matheus-bertelli-3321793.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	height: 50vh;

}

#gallery-custom {
	background-image: linear-gradient(rgba(0, 0, 0, .50), rgba(0, 0, 0, .50)), url(../../assets/picture/pexels-icsa-17089361.jpg);
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	height: 50vh;

}

@media screen and (max-width: 1080px) {

	#about-custom,
	#product-custom,
	#bussines-custom,
	#reward-custom,
	#testimoni-custom,
	#gallery-custom {
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
		height: 25vh;

	}

}

@media screen and (max-width: 480px) {

	#about-custom,
	#product-custom,
	#bussines-custom,
	#reward-custom,
	#testimoni-custom,
	#gallery-custom {
		background-size: cover;
		background-position: center;
		background-attachment: fixed;
		height: 20vh;

	}

}




.more-bubble {
	height: 60px;
	width: 60px;
	background-color: rgba(0, 0, 0, 0.8);
	position: absolute;
	z-index: 10;
	margin-top: 130px;
	right: 100px;
}

.btn-call-me {
	position: fixed;
	background-color: #27c1fd;
	border: 2px solid #27c1fd;
	color: white;
	box-shadow: rgba(0, 0, 0, .2) 3px 3px 10px;
	font-size: 28px;
	padding: 0px 7.5px;
	width: 45px;
	height: 45px;
	bottom: 15px;
	right: 15px;
	text-decoration: none;
	border-radius: 5px;
	transition: 0.5s;
	z-index: 999;
}


.btn-call-me:hover {
	position: fixed;
	background-color: white;
	color: #27c1fd;
	border: 2px solid #27c1fd;
	box-shadow: rgba(0, 0, 0, .2) 3px 3px 10px;
	font-size: 28px;
	padding: 0px 7.5px;
	width: 45px;
	height: 45px;
	bottom: 18px;
	right: 15px;
	text-decoration: none;
	border-radius: 5px;
	transition: 0.5s;
	z-index: 999;
}

.no-hover:hover {
	border: 0px solid transparent
}

.carousel-item {
	transition: transform 2.6s ease-in-out;
}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
	transition: opacity 0s 2.6s;
}

* {
	box-sizing: border-box;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
	position: relative;
}

/* Hide the images by default */
.mySlides {
	display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
	cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
	cursor: pointer;
	position: absolute;
	top: 40%;
	width: auto;
	padding: 16px;
	margin-top: -50px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	border-radius: 0 3px 3px 0;
	user-select: none;
	-webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
	right: 12px;
	border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}

/* Container for image text */
.caption-container {
	text-align: center;
	background-color: #222;
	padding: 2px 16px;
	color: white;
}

.row:after {
	content: "";
	display: table;
	clear: both;
}

/* Six columns side by side */
.column {
	float: left;
	width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
	opacity: 0.6;
}

.active,
.demo:hover {
	opacity: 1;
}

body {
	margin: 2rem;
}

.modal-dialog {
	max-width: 800px;
	margin: 30px auto;
}

.modal-body {
	position: relative;
	padding: 0px;
}

.btn-close {
	position: absolute;
	right: -30px;
	top: 0;
}

.container-over {
	position: relative;
}

.overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 0, 0, 0.8);
	overflow: hidden;
	width: 0;
	height: 100%;
	transition: .5s ease;
}

.container-over:hover .overlay {
	margin-left: 12px;
	margin-right: 12px;
	width: 94%;
}

.text {
	color: white;
	font-size: 12px;
	position: absolute;
	width: auto;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	white-space: nowrap;
}