*{padding: 0; margin: 0}
p{margin: 0 !important}
body{font-family: "Work Sans", Sans-serif; color: #113B3A}
li{list-style: none;}
a, h3{text-transform: uppercase;}
header{    background-image: url("../../img/bground.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; height: auto;
}
.head{padding: 5%;  color: #113B3A; font-family: "Work Sans", Sans-serif; }
.judul{padding: 15px 0 10px 0; }
.judul h2{  font-size: 40px; font-weight: 700; line-height: 1em}
.subjudul{  font-size: 20px; font-weight: 400; padding: 15px 0 10px 0;  }
.subjudul li{list-style: none;}
.link, .link_promo, .link_lokasi{padding: 0 !important}
.link a, .link_promo a, .link_ex a{text-decoration: none; color: #113B3A; padding: 10px 25px; font-size: 18px; display: inline-block;
    font-weight: 700; text-align: center; border-radius: 3px;
    background-image: radial-gradient(at center center, #E1BB54 69%, #BF7F20 100%);}
.gbhead img{width: 600px;height: 650px !important}
.harga{padding-top: 40px; width: 80%}
p.lh{padding-top: 30px}
.po{padding: 0}
.harga p{font-size: 18px;font-weight: 700; padding: 10px 0  }
p.hnc{font-size: 80px;font-weight: 700; color: #3A3A11; /*#BF7F20;*/ line-height: 30px;  text-shadow: 2px 2px 5px orange; }
.hnc span.c{font-size: 18px; color: #113B3A; font-weight: 600; text-shadow: none; }
/*PROMO*/
.promo{background-image: url('../../img/bg_radial.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    color:#FFFFFF; padding: 5%;
}
.promo_judul h3{font-weight: 700; font-size:40px;line-height: 1.3em; padding:20px 50px 20px 0;}
figure img{width:330px; height:350px !important; border: 6px solid #fbd68f; border-top-right-radius: 50%; border-bottom-left-radius: 50%; }
figure h4{font-weight: 700; font-size:30px;line-height: 1.3em; color: #ffffff}
figure span{color:#BF7F20;font-size:40px; }
/*Fitur*/
.bi{width: 2.5em; height: 2.5em}
.fitur{background: #ffffff; padding-bottom: 60px}
.fitur h3{font-weight: 700; padding: 60px; font-size: 40px}
.fitur h4{font-weight: 700; font-size: 20px; padding: 15px}
.fitur p{font-size: 16px; color: #373737}
/*LOKASI*/
.lokasi{padding: 5%}
.lokasi h3{font-weight: 700; padding-bottom: 30px; font-size: 40px}
.gblok img{width:500px;max-height: 550px; height: auto; }
.menit, .menit2{padding: 5px}
.menit p{font-size: 65px; font-weight: 700; float: right; line-height: 1em; }
.menit2 p{width: 150px}
.jlok{margin: 20px 0}
 h3.p2 ,p.p2{padding-left: 40px; width: 80%}
.jl{padding-bottom: 30px}
.link_lokasi a{    font-family: "Work Sans", Sans-serif;font-size: 18px;font-weight: 700; text-decoration: none;
    text-align: center; display: inline-block; padding: 10px 25px;color: #F8D958; border-radius: 3px;
    background-image: radial-gradient(at center center, #20641F 37%, #3B3911 100%);}
/*exfitur*/
.exfitur{padding: 5%}
.exfitur h3{font-weight: 700; padding-top:60px; font-size: 40px; width: 80%}
.exfitur p, .exfitur li{font-size: 18px; line-height: 1.5em}
.exfitur p{padding: 15px 0}
.fa-check{padding-right: 10px}
.exj, .exj1{padding-bottom: 80px}
.exj2{padding-left: 50px}
.tipe{width: 90%; border-bottom: 2px solid orange; }
.tipe p.p{line-height: 50px}
.tipe p{font-size: 40px; font-weight: 700;  line-height: 28px}
.tipe span{font-size: 18px; font-weight: 400;}
.exgbr img{width: 300px; padding: 20px 0} .no{display: none;}
/*SLIDER*/
.slider{padding-bottom: 50px}
/*Carousel*/
   .carousel .carousel-indicators li {
    display: inline-block;
    width: 10px;
    height: 10px;
    text-indent: -99px;
    cursor: pointer;
    border: 1px solid #fff;
    background: #fff;
    border-radius: 2px}
    .carousel-item img{max-width: 1000px; width:100%; height: 100% }
/*GALLERY*/
.gallery{padding: 5%}
.gallery img{padding: 15px 0;}
/*MODAL*/
.modal{z-index: 999999}
.modal-content{background: #0E271D; color: #ffffff; border-radius: 1em}
.modal-header{padding: 0; border:0!important;}
.modal-body{border: 0; padding: 0}
.modal-footer{border:0!important;}
.modalin img{width: 430px;}
.modal-header .close{border-radius: 50%; opacity: 1; padding: 5px 10px; background: #FFF; z-index: 999}
.modal-body img{width: 100%}
.m-satu{padding: 3em}
.m-a{padding: 20px 0}
.m-a a{ color: #ffffff; font-family:"Work Sans", Sans-serif;font-weight: bold;font-size: 25px;line-height: 50px;background: #2AA300;border-radius: 12px;width:300px; height: 50px; text-decoration: none; display: inline-block; margin-top: 20px }
/*BBTOP*/
    #btn-back-to-top {position: fixed;bottom: 100px;right: 20px;display: none;}
    .show {display: block!important; opacity: 0.6}
    .wafixed {position: fixed; right: 30px; bottom: 10px; z-index: 999;}
    .fa-lg{font-size: 2.3em !important}
    .text-wa{color: #2BAA2C}
footer{padding-top: 30px; padding-bottom: 30px;font-size: 13px;text-align: center; background: #EEEEEE}
/*==========================================================================================================*/
@media only screen and (max-width: 767px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
    padding: 0 !important;
  }
  .head{position: absolute; top:60%; left: 0;  z-index: 99999; text-align:  center; }
  .gbhead{position: relative; }
  .gbhead img{height: 600px !important;}
  .harga{width: 100%; margin: 0 auto; position: absolute; top: 65%; color:#ffffff; }
  .harga p{font-weight: 400; font-size: 15px; padding: 0; text-shadow: 2px 2px 5px #000}
  p.hnc{font-size: 30px;font-weight: 700;  color: orange; text-shadow:2px 2px 5px #000}
  .judul h2{color: #ffa500; border: 1px solid #ffa500; background:rgba(0,0,0,0.5); font-size: 23px; display: block; width:85%; margin: 5px auto; padding: 5px 0; border-radius: 8px; text-shadow: 2px 2px 5px #000}
  .judul h2.m1{ width: 75% }
  .judul{padding:5px 0;}
  .subjudul{font-size: 12px}
  .subjudul li{padding: 1%; border: 1px solid #ffa500; background: rgba(255,255,255,0.7); display: inline-block; border-radius:10px;font-weight: 600; width: 37%; line-height: 12px; color:#373737}
  .subjudul li.sp{margin-right: 20px}
  .hnc span.c{font-size: 12px; color: #ffffff; font-weight: 400;text-shadow: 2px 2px 5px #000 }
  .link {position: absolute; width: 45%; top: 130%; left: 22%; display: inline-block; }
  .link a{font-size: 16px; width: 120%; padding: 3%}
  /*PROMO*/
  .promo{background: #0E271D; padding: 0}
  .promo_judul{text-align: center;}
  .promo_judul h3{font-size:25px; padding:15px 20px; }
  figure img{border: none;border-top-right-radius:0;border-bottom-left-radius:0; width: 100%; height: 400px !important}
  figure h4{font-weight: 700; font-size:25px; padding:15px 20px;}
  figure span{font-size:30px; }
  .figure{ display: block;}
  .klaim{position: relative; width: 100%}
  .link_promo {position: absolute; width: 45%; bottom: 3%;left: 25%; display: inline-block; }
  .link_promo a{font-size: 14px; width: 100%; padding: 3%}
  .tombol{padding-bottom: 40px}
  /*Fitur*/
  .fitur h3{ font-size: 30px; padding:20px; }
  .f-1{padding: 20px 0 !important}
   /*LOKASI*/
   .lokasi{padding: 0 !important}
   .lokasi h3{ font-size: 30px; }
    h3.p2 ,p.p2{padding:30px 20px 5px 20px; width: 100%; margin: 0}
   .menit p{padding-right: 10px; text-align: center; float: right; font-size: 40px}
   .menit2 p{width: 100%}
   .ll{padding: 0; margin: 0}
   .ll > .col-6{max-width: 38%}
   .menit, .menit2{font-size: 12px}
   .link_lokasi a, .link_ex a{font-size: 14px; padding: 2% 3% }
   .gblok img{max-height:600px }
   /*Exfitur*/
   .exfitur{padding: 40px 0}
   .exfitur h3{ padding:50px 0 0 25px; font-size: 28px; width: 70%}
   .exfitur p, .exfitur li{font-size: 18px; line-height: 1.5em; padding-left:25px }
   .exj{padding-bottom: 0}
   .exj2, .exj1 {padding: 0; text-align: center; }
   .exj1 h3{ font-size: 28px; width: 100%; padding: 40px 20px }
   .tipe{width: 100%; margin: 0 }
   .tipe p{font-size: 32px;line-height: 28px}
   .exfitur ul{margin-bottom: 3em}
   
    /*Gallery*/
    .gallery{padding: 0}
    /*MODAL*/
    .m-a a{font-size: 20px; width: 240px; height: 45px; line-height: 45px}
    

}

@media only screen and (max-width: 440px) {
    .link a{font-size: 14px;}
    .head{top:40%;}
    .gallery img{padding: 1px 0}
    .gblok img{max-height: 400px}
}


@media only screen and (max-width: 366px) {
    .head{top:30%;}
    .link{width: 65%; left: 10%;}
    .link a{width: 120%; padding: 3%}
    .tombol{padding-bottom: 50px}
    figure img{height: 400px !important}
    .tipe p{font-size: 28px;line-height: 28px}
    .m-satu {padding: 2em;}
}

.row::after {
  content: "";
  clear: both;
  display: block;
}
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 900px) 
  and (-webkit-min-device-pixel-ratio: 1) {

    .head{padding-bottom: 0}
    figure img{height: 230px !important}
    .promo_judul h3{font-size: 32px;}
    h3.p2, p.p2{padding-left: 0; width: 100%}
    .harga{width: 100%}
    .menit2 p{width: 100%; font-size: 14px}
    .menit p{font-size: 40px}
    .exj2 {padding-left: 20px}
    .exfitur h3{width: 100%; padding-top: 0}
    .tipe p{font-size: 32px} 
    .tipe{width: 100%}
    .tipe span{font-size: 15px}
    .link_ex a{font-size: 16px; padding: 10px 20px}
    .gblok img{height: 300px}
    p.hnc{font-size: 40px}
    figure span{font-size: 28px}

}