*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	border: none;
	outline: none;
	text-decoration: none;
	list-style: none;
	-webkit-tap-highlight-color: transparent !important;
}
html{
	scroll-behavior: smooth;
}
body{
	max-width: 1480px;
	margin: auto;
	font-family: "Open Sans", Sans-serif;
	color: #333;
}
section{
	padding: 3rem;
}
@media(max-width: 768px){
	section{
		padding: 3rem 2rem;
	}
}
@media(max-width: 480px){
	section{
		padding: 3rem 1rem;
	}
}
h1, h2, h3, h4{
	margin-bottom: 2rem;
}
p, li{
	margin-bottom: 1rem;
	line-height: 24px;
}
img{user-select: none;}
.heading{
	font-size: 38px;
	font-family: "Source Sans Pro", Sans-serif;
	color: dodgerblue;
	text-shadow: 2px 2px 4px #333;
}
.swiper-button-next:after,
.swiper-button-prev:after{
	font-size: 2rem !important;
	color: dodgerblue !important;
}
.flex-hor-CNTR{
	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;
}
.flex-hor-FS{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align: center;
	-ms-flex-align: center;
	        align-items: center;
}
.flex-hor-SE{
	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;
}
.flex-ver-cntr{
	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;
}
.grid{
	display: grid;
	display: -ms-grid;
}
.gtc-200{
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	-ms-grid-columns: repeat(auto-fit, minmax(200px, 1fr));
}
/*header*/
.header{
	background-image: url(gambar/hero.jpg);
	width: 100%;
	height: 100vh;
	background-size: cover;
	padding: 3rem;
}
.header p{
	text-align: center;
	font-size: 4rem;
	font-weight: bold;
	font-family: "Papyrus";
	background: linear-gradient(90deg, midnightblue, cyan, midnightblue);
	letter-spacing: 4px;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	background-repeat: no-repeat;
	background-size: 80%;
	animation: shine 5s linear infinite;
	position: relative;
	margin-bottom: 0;
	line-height: 4rem;
}
.header a{
	font-size: 3rem;
}
@keyframes shine {
	0% {
		background-position-x: -500%;
	}
	100% {
		background-position-x: 500%;
	}
}

@media(max-width: 768px){
	.header{
		padding: 3rem 2rem;
	}
}
@media(max-width: 480px){
	.header{
		padding: 3rem 1rem;
	}
}

/*about*/
.about .container{
	gap: 1rem;
}
.about .container .box{
	flex: 47.5%;
}
.about .container .box img{
	width: 100%;
	height: 100%;
}
.about .container:last-child{
	margin-top: 2rem;
}
@media(max-width: 768px){
	.about .container{
		flex-direction: column;
		gap: 2rem;
	}
	.about .container:first-child .box:first-child{
		order: 2;
	}
}

/*tawaran*/
.tawaran{
	background: lavender;
}
.tawaran .container{
	gap: 1rem;
}
.tawaran .container .box{
	flex: 47.5%;
}
.tawaran .container .box li i{
	margin-right: 8px;
	color: dodgerblue;
}
.tawaran .container .box img{
	width: 100%;
	height: 100%;
}
.tawaran .cta{
	margin-top: 2rem;
	text-align: center;
	background: midnightblue;
	color: lavender;
	padding: 1rem;
	box-shadow: 0 2px 8px rgba(0,0,0,.75);
}
.tawaran .cta p{
	margin-bottom: 0;
}
.tawaran .cta p:first-child{
	font-size: 24px;
	font-weight: 600;
}
.tawaran .cta p:last-child{
	font-size: 20px;
}

@media(max-width: 768px){
	.tawaran .container{
		flex-direction: column;
		gap: 2rem;
	}
	.tawaran .container .box:first-child{
		order: 2;
	}
}

/*keunggulan*/
.keunggulan .container{
	grid-gap: 2rem 1rem;
	padding-top: 2rem;
	text-align: center;
}
.keunggulan .container .box{
	border: 1px solid lavender;
	border-radius: 4px;
	padding: 16px;
	box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.keunggulan .container .box:hover{
	box-shadow: 0 2px 8px rgba(0,0,0,.75);
}
.keunggulan .container .box i{
	font-size: 48px;
	color: dodgerblue;
	margin-bottom: 1rem;
}
.keunggulan .container .box p{
	font-size: 18px;
	font-weight: bold;
	color: midnightblue;
	margin-bottom: 0;
}

/*paket*/
.paket{
	background: lavender;
}
.paket .container{
	flex-wrap: wrap;
	gap: 2rem 1rem;
}
 .paket .container .box{
	background: #fff;
	width: 275px;
	text-align: center;
	padding: 1rem;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
 .paket .container .box:hover{
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
 }
.paket .container .box .top{
	color: #fff;
	background: midnightblue;
	padding: 4px 0 16px;
	clip-path: polygon(0 0, 100% 0, 100% 53%, 49% 100%, 0 53%);
}
.paket .container .box .top h3{
 font-size: 26px;
 font-weight: bold;
 margin-bottom: 1.25rem;
}
.paket .container .box .top h3 span{
	display: block;
}
.paket .container .box .thumbnail{
	margin-top: 8px;
}
.paket .container .box .thumbnail img{
	width: 150px;
	height: 150px;
	border-radius: 50%;
}
.paket .container .box .harga{
	margin-top: 4px;
}
.paket .container .box .harga p{
	line-height: 1.25rem;
	font-weight: bold;
	font-style: italic;
}
.paket .container .box .harga p:first-child{
	text-decoration: line-through;
	margin-bottom: 0;
}
.paket .container .box .details .daftar{
	margin-bottom: 8px;
}
.paket .container .box .details .daftar i{
	color: midnightblue;
	margin-right: 8px;
}
.paket .container .box button{
	outline: none;
	background: transparent;
	border: 1px solid midnightblue;
	display: block;
	color: midnightblue;
	margin: 1rem auto 0;
	padding: 4px 32px;
	border-radius: 4px;
	font-size: 18px;
	transition: all 0.3s ease;
	cursor: pointer;
	letter-spacing: 1px;
}
.paket .container .box button:hover{
	background: midnightblue;
	color: lavender;
}
.paket .cta{
	margin-top: 2rem;
	background-image: url(gambar/cta2.jpg);
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 250px;
}
.paket .cta p{
	letter-spacing: 10px;
	font-weight: bold;
}
.paket .cta p:nth-child(1){
	font-size: 28px;
	font-family: "Copperplate";
	color: dodgerblue;
	text-shadow: 0 2px 4px rgba(230,230,250,.25);/*lavender color*/
}
.paket .cta p:nth-child(2){
	font-size: 20px;
	color: lavender;
	font-family: "Papyrus";
}
.paket .cta .cta-btn{
	margin: 1rem;
	width: 100%;
	gap: 1rem;
}
.paket .cta .cta-btn a{
	text-align: center;
	color: lavender;
	border: 1px solid lavender;
	border-radius: 4px;
	padding: 8px 24px;
}
.paket .cta .cta-btn a:hover{
	border: 1px solid dodgerblue;
	background: dodgerblue;
}
.paket .cta .cta-btn a i{
	margin-right: 8px;
}
@media(max-width: 480px){
	.paket .container{
		flex-direction: column;
	}
	.paket .container .box{
		width: 100%;
	}
	.paket .cta p{text-align: center;}
}

/*motor*/
.motor .container{
	grid-gap: 2rem 1rem;
}
.motor .container .box{
	padding: 8px;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.motor .container .box:hover{
	box-shadow: 0 2px 8px rgba(0,0,0,.75);
}
.motor .container .box img{
	width: 175px;
	height: 131px;
	display: block;
	margin: auto;
}
.motor .container .box p{
	text-align: center;
	font-weight: bold;
	font-family: "Papyrus";
	margin-top: 1rem;
	margin-bottom: 0;
}

/*materi*/
.materi{
	background: lavender;
}
.materi h3{
	font-size: 24px;
	text-align: center;
	text-shadow: 0 1px 2px midnightblue;
}
.materi h3:nth-child(4){
	margin-top: 2rem;
}
.materi .container{
	grid-gap: 2rem 1rem;
}
.materi .container .box{
	padding: 16px;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.materi .container .box:hover{
	box-shadow: 0 2px 8px rgba(0,0,0,.75);
}
.materi .container .box img{
	width: 100px;
	height: 150px;
	display: block;
	margin: auto;
}
.materi .container .box p{
	text-align: center;
	font-weight: bold;
	font-family: "Papyrus";
	margin-top: 1rem;
	margin-bottom: 0;
}
.materi .cta{
	margin-top: 2rem;
	background-image: url(gambar/cta2.jpg);
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 500px;
}
.materi .cta div{
	padding: 1rem;
}
.materi .cta div:nth-child(1){
	flex: 40%;
}
.materi .cta div:nth-child(1) img{
	width: auto;
	height: auto;
}
.materi .cta div:nth-child(2){
	flex: 60%;
}
.materi .cta div:nth-child(2) h3{
	color: lavender;
	margin-bottom: 1rem;
	text-align: left;
}
.materi .cta div:nth-child(2) p{
	color: silver;
}
.materi .cta div:nth-child(2) p:nth-child(3){
	margin-bottom: 0;
}

@media(max-width: 768px){
	.materi .cta{
		flex-direction: column;
		height: auto;
	}
}

/*galeri*/
.galeri .galeri-slider{
	user-select: none;
}
.galeri .slide img {
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 4px 4px 0 0;
	margin-bottom: -4px;
}
.galeri .slide .info {
	border-radius: 0 0 4px 4px;
	background: lavender;
	height: 75px;
	text-align: center;
}
.galeri .slide .info p {
	color: dimgrey;
	margin-bottom: 0;
}

/*review*/
.review{
	background: lavender;
}
.review .swiper-wrapper{
	user-select: none;
}
.review .swiper-slide{
	background: #fff;
	border-radius: 4px;
	padding: 0 8px;
}
.review .swiper-slide .info {
	border-radius: 0 0 4px 4px;
	height: 375px;
	text-align: center;
}
.review .swiper-slide .info p {
	color: dimgrey;
	margin-bottom: 0;
	font-style: italic;
}
.review .cta{
	margin-top: 2rem;
	background-image: url(gambar/cta2.jpg);
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 250px;
	gap: 1rem;
}
.review .cta div:nth-child(1) h2{
	font-size: 32px;
}
.review .cta div:nth-child(1) h3{
	font-size: 24px;
}
.review .cta div:nth-child(1) h2,
.review .cta div:nth-child(1) h3{
	color: yellow;
	text-align: center;
	margin-bottom: 0;
	font-family: "Papyrus";
}
.review .cta div:nth-child(2){
	gap: 1rem;
}
.review .cta div:nth-child(2) a{
	display: inline-block;
	height: 50px;
	width: 175px;
	text-align: center;
	font-size: 24px;
	border-radius: 50px;
	line-height: 50px;
	user-select: none;
}
.review .cta div:nth-child(2) a:nth-child(1){
	color: #2bb640;
	border: 1px solid #2bb640;
}
.review .cta div:nth-child(2) a:nth-child(1):hover{
	background: #2bb640;
	color: lavender;
	border: 1px solid #2bb640;
}
.review .cta div:nth-child(2) a:nth-child(2){
	color: red;
	border: 1px solid red;
}
.review .cta div:nth-child(2) a:nth-child(2):hover{
	background: red;
	color: lavender;
	border: 1px solid red;
}
.review .cta div:nth-child(2) a i{
	margin-right: 8px;
}
@media(max-width: 480px){
	.review .cta div:nth-child(2){
		flex-direction: column;
		gap: 8px;
	}
}
/*footer*/
.footer{
	background: #0c1021;
	padding: 3rem 3rem 1rem;
}
.footer .container{
	gap: 1rem;
}
.footer .container .map,
.footer .container .ket{
	flex: 50%;
	height: 400px;
}
.footer .container .map iframe{
	border: 0;
	width: 100%;
	height: 400px;
}
.footer .container .ket h2{
	font-size: 32px;
	color: dodgerblue;
	text-align: center;
}
.footer .container .ket div{
	gap: 1rem;
	margin-bottom: 1rem;
}
.footer .container .ket i{
	flex: 10%;
	color: lavender;
	text-align: center;
}
.footer .container .ket a{
	width: 100%;
	color: lavender;
}
.footer .container .ket a:hover{
	color: dodgerblue;
}
.footer .credit{
	margin-top: 2rem;
	text-align: center;
	color: silver;
}
.footer .credit p:nth-child(1){
	margin-bottom: 4px;
}
.footer .credit p:nth-child(2){
	margin-bottom: 0;
}
.footer .credit p:nth-child(2) a{
	color: lavender;
}
.footer .credit p:nth-child(2) a:hover{
	color: dodgerblue;
}

@media(max-width: 768px){
	.footer{
		padding: 3rem 2rem 1rem;
	}
	.footer .container{
		flex-direction: column;
	}
	.footer .container .map{
		width: 100%;
	}
}
@media(max-width: 480px){
	.footer{
		padding: 3rem 1rem 1rem;;
	}
}

/*back-to-top*/
.back-to-top{
	position: fixed;
	-moz-position: fixed;
	-webkit-position: fixed;
	-o-position: fixed;
	bottom: 8px;
	right: 8px;
	border: 1px solid dodgerblue;
	color: dodgerblue;
	width: 2rem;
	height: 2rem;
	border-radius: 2rem;
	z-index: 10;
}
.back-to-top:hover{
	color: midnightblue;
	border: 1px solid midnightblue;
}
.back-to-top i{
	font-size: 2rem;
}

/* --------------- Pop Up Window --------------- */
.popup-window{
  display: none;
  width: 100vw;
  height: 100%;
  background-color: black;
  position: relative;
}
.modal-content{
  position: fixed;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #fff;
  width: 82.5vw;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 1s;
  animation-name: animatetop;
  animation-duration: 1s;
  z-index: 1000;
}
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}
@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}
.tutup{
  position: absolute;
  top: 0;
  right: 1.5%;
  color: #202020;
  font-size: 32px;
  font-weight: bold;
  transition: .25s;
}
.tutup:hover, .tutup:focus {
  color: red;
  cursor: pointer;
}
.modal-body{
  gap: 16px;
  padding: 16px;
}
.modal-body img, .modal-body .isi-modal{flex: 50%;}
.modal-body img{
  width: 100%;
  height: 100%;
  display: block;
  margin: auto;
}
.modal-body .isi-modal{text-align: center;}
.modal-body .isi-modal h3{
  font-size: 32px;
  color: darkturquoise;
}
.modal-body .isi-modal p{
  font-size: 24px;
  margin: 1rem auto;
  color: #202020;
}
.modal-body .isi-modal .modal-sosmed{
  gap: 2rem;
}
.modal-body .isi-modal .modal-sosmed a{
  font-size: 32px;
  transition: .1s;
}
.modal-body .isi-modal .modal-sosmed a:nth-child(1){color: #4ac959;}
.modal-body .isi-modal .modal-sosmed a:nth-child(2){color: #2481cc;}
.modal-body .isi-modal .modal-sosmed a:nth-child(3){color: #ff0000;}
.modal-body .isi-modal .modal-sosmed a:nth-child(4){color: #18bcef;}
.modal-body .isi-modal .modal-sosmed a:hover{color: #202020;}

.modal-body .isi-modal .atribut{
  margin-top: 1rem;
  padding-top: 8px;
  border-top: 1px solid gainsboro;
}
.modal-body .isi-modal .atribut a{
  font-size: 24px;
  font-weight: bold;
  color: darkblue;
}
.modal-body .isi-modal .atribut a:hover{
  color: black;
}
@media(max-width: 768px){
  .modal-body{flex-direction: column;}
  .modal-content{width: 80vw;}
  .modal-body img{
    width: 90%;
    height: 90%;
  }
}
@media(max-width: 480px){
  .tutup{top: -1%;}
  .modal-content{width: 95vw;}
}