@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700");
@import url("https://use.fontawesome.com/releases/v5.3.1/css/all.css");

/* Fonts */
:root {
  --default-font: "Poppins", sans-serif;
  --default-size: 18px;
  --heading-font: "Poppins", sans-serif;
  --heading-size: 180%;
  
}
@media only screen and (max-width: 768px){
  :root {
    --default-size: 16px;
  }
}

/* Global */
:root {
  --body-width:1200px;
  --bg-white: #ffffff;
  --bg-kuning: #eeb301;
  --bg-grey: #f1f3f6;
  --nav-color: #222222;
  --bg-nav: #ffffff;
  --bg-nav-hover: #f1f3f6;
  --color-body: #222222;
  --color-primer: #eeb301;
  --color-second: #fffff;
  --color-link: gold;
  --color-hover: goldenrod;
  --border-radius: 12px;
  --padding-default: 15px;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/* Heading */
.headline,.heading{
  text-align:center;
  padding:0 15px;
}
h1{
  font-size:270%;
  padding:5px 0;
  margin:0;
  font-weight:900;
  text-transform:uppercase;
}
h2{
  font-size:180%;
  line-height:1.3em;
  font-weight:900;	
  padding:10px 0 0;
  margin:0;
  color:#000000;
  text-transform:uppercase;
}
h3{
  font-size:135%;
  padding:10px 0 0;
  margin:0;
  font-weight:600;
  line-height:1.2em;
  color:#000000;
}
h4{
  font-size:120%;
  padding:0 0 10px;
  margin:0;
  font-weight:600;
  line-height:1.2em;
  color:#000000;
}
p{
  padding:5px 0;
  margin:0;
}
li{
  padding:0 0 5px;
  margin:10px;
  line-height:1.2em;
}
.bold{
  font-weight:900;
}
.strong{
  font-weight:600;
}

/* General */
body {
  color: var(--color-body);
  background-color: var(--bg-white);
  font-family: var(--default-font);
  font-size: var(--default-size); 
  margin:0 auto;
  padding:0;
}
.container {
  width:100%;
  max-width:var(--body-width);
  margin:0 auto;
}
.container:after{
  content:"";
  display:table;
  clear:both
}
.group:after {
  content: "";
  display: table;
  clear: both;
}
.grid{
  display:flex;
  display:-webkit-flex;
  flex-wrap:wrap;
  -webkit-flex-wrap:wrap;
  -ms-flex-wrap:wrap;
  justify-content: center;	
}
.col-2,.col-12,.col2{
  float:left;
  width:calc(100% / 2);
}
.col-3,.col-13,.col3{
  float:left;
  width:calc(100% / 3);
}
.col-4,.col-14,.col4,.col14{
  float:left;
  width:calc(100% / 4);
}
.col-5,.col-15,.col5,.col15{
  float:left;
  width:calc(100% / 5);
}
.col-6,.col-16,.col6,.col16{
  float:left;
  width:calc(100% / 6);
}
.col-34,.col-134,.col34,.col134{
  float:left;
  width:calc(100% / 4 * 3);
}
.col-23,.col-123,.col23,.col123{
  float:left;
  width:calc(100% / 3 * 2);
}
.col-40{
  float:left;
  width:40%;
}
.col-60{
  float:left;
  width:60% ;
}
.col-25,.col-125,.col25,.col125{
  float:left;
  width:calc(100% / 5 * 2);
}
.center{
  text-align:center;
}
.centered,.centered2{
  display:flex;
  justify-content:center;
  align-items:center;
}
.col-container,.padding,.inner-container{
  padding:var(--padding-default);
}
.col-container2,.padding2,.inner-container2{
  padding:calc(var(--padding-default)*2);
}
.gap{
    margin:15px 0;
}
.full-width{
  width:100%;
}
.melengkung{
  border-radius:var(--border-radius)!important;
}
.section{
  width:100%;
  padding:60px 0;
}
.section-bottom{
  width:100%;
  padding:0 0 60px;
}
.section-headline{
  width:100%;
  padding:30px 0;
}
.lebar-bawah{
  width:100%;
  padding:0 0 30px;
}
.mepet{
  padding:0;
}
@media only screen and (max-width: 768px){
h1{
  font-size:250%;
}
.col-12,.col-13,.col-14,.col-15,.col-134,.col-123,.col-40,.col-60,.col-16, .col-125,.col-25{
  width:100%;
}
.col14,.col15,.col-4{
  width:50%;
}
.col16,.col-6,.col-5{
  width:calc(100% / 3);
}
.centered{
  display:block;
}
}
@media only screen and (max-width: 480px){
h1{
  font-size:160%;
}
.col-2,.col-3,.col-4,.col-5,.col-34,.col-23,.col-6,.col-25{
  width:100%;
}
.centered2{
  display:block;
}
}

/* link */
a {
  color:var(--color-link);
  transition:all .5s ease 50ms;
  text-decoration:none;
}
a:hover {
  color:var(--color-hover);
  text-decoration:none;
  transition:all .5s ease 50ms;
}  

/* Img */
img {
  max-width: 100%; 
  height: auto;
}

/* Video */
.video-width{
    width:100%;
    max-width:800px;
    margin:15px auto;
}
.video {
  position: relative;
  padding-bottom: 56.35%;
  height: 0; overflow: hidden;
  }
  .video iframe,.video object,.video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
}

/* Button */
button{
  background: transparent;
  border:none;
}
.btn {
  font-size:18px;
  border: none;
  margin:3px;
  padding: 8px 20px;
  cursor: pointer;
  display:inline-block;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  font-weight:600;
  border-radius:4px;
}
.btn-large {
  font-size:22px;
  padding: 16px 30px;
}
.btn-orange {
  background: #ff6600;
  border: 2px solid #ff6600;
  color:#ffffff;
}
.btn-orange:hover {
  background: #ffffff;
  color: #ff6600;
}
.btn-darkcyan {
  background: darkcyan;
  border: 2px solid darkcyan;
  color:#ffffff;
}
.btn-darkcyan:hover {
  background: #ffffff;
  color: darkcyan;
}
.btn-green {
  background: #0a8b00;
  border: 2px solid #0a8b00;
  color:#ffffff;
  border-radius:50px;
}
.btn-green:hover {
  background: #086501;
  border-color: #086501;
  color:#ffffff;
}
.btn-yellow,.btn-kuning {
  background: linear-gradient(#ffde00,#ffde00,#ff8a00);
  border: 4px solid #ffffff;
  color:#000000;
  border-radius:50px;
  font-weight:900;
  box-shadow:0 0 5px 0 #acacac inset;
  filter:drop-shadow(0 5px 5px rgba(0,0,0,.4))
}
.btn-kuning{
  border: none;
}
.btn-yellow:hover,.btn-kuning:hover {
  background: linear-gradient(#ff8a00,#ffde00,#ffde00);
  border-color: white;
  color:#000000;
}
.btn-white {
  background: #ffffff;
  border: 2px solid #ffffff;
}
.btn-white:hover {
  color: #ffffff;
}
.btn-menu {
  margin:0px;
  border: none;
  padding: 4px 10px!important;
  cursor: pointer;
  display:inline-block;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  background:goldenrod!important;
  color:white!important;
}
.btn-menu:hover{
  background:#f0b300!important;
}

/* Label Ribbon*/
.have-ribbon{
  position: relative;}
.ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
}
.ribbon::before,
.ribbon::after {
  position: absolute;
  z-index: -1;
  content: '';
  display: block;
  border: 5px solid #2980b9;
}
.ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 15px 0;
  background-color: goldenrod;
  box-shadow: 0 5px 10px rgba(0,0,0,.1);
  color: #fff;
  font: 700 18px/1 'Lato', sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  text-transform: uppercase;
  text-align: center;
}  
.ribbon-top-right {
  top: -20px;
  right: -20px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
  border-top-color: transparent;
  border-right-color: transparent;
}
.ribbon-top-right::before {
  top: 0;
  left: 0;
}
.ribbon-top-right::after {
  bottom: 0;
  right: 0;
}
.ribbon-top-right span {
  left: -25px;
  top: 30px;
  transform: rotate(45deg);
}

/* ================================ */

/* Nav Menu*/
.headermenu{
  position: fixed;
  top:0; left:0;
  right: 0;
  z-index: 1000;
  background:var(--bg-nav);
  box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:0 6%;
  font:normal normal 16px Poppins;
  line-height:2em;
  transition: all .3s ease-out;
}
.headermenu .logos{
  margin: 0;
}
.headermenu .logos img{
  max-height:52px;
}
.headermenu .navbar{
  margin:0;
  padding:1rem 0rem 1rem 2rem;
  transition: all .3s ease-out;
}
.headermenu .navbar a{
  font-size: 1rem;
  color: var(--nav-color);
  padding:1rem;
  border-radius: .5rem;
  transition: all .3s ease-out;
}
.headermenu .navbar a:hover{
  color:var(--nav-color);
  background: var(--bg-nav-hover);
  transition: all .3s ease-out;
}
#menu-btn{
  cursor: pointer;
  font-size: 2rem;
  padding:.3rem .5rem;
  border-radius: .5rem;
  color:#ffffff;
  background: goldenrod;
  display: none;
  transition: all .3s ease-out;
}
#menu-btn:hover{
  color: #ffffff;
  background: goldenrod;
  transition: all .3s ease-out;
}
.headermenu .dropbtn {
  background:var(--bg-nav);
  color:var(--nav-color);
  cursor:pointer;
  width: 200px;
}
.headermenu .dropdown {
  position: relative;
  display: inline-block;
}
.headermenu .dropdown-content {
  display: none;
  position: absolute;
  background:#008b8b;
  width: 300px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 5;
  border-radius: .5rem;
  color:var(--nav-color);
  max-height: calc(100vh - 50px);
  overflow-y: auto;
}
.headermenu .dropdown-content a{
  text-decoration: none;
  display: block;
  background:transparent;
  color:var(--nav-color);
}
.headermenu .navbar .dropdown-content a{
  padding:.5rem 1rem;
}
.headermenu .dropdown-content a:hover {
  background: var(--bg-nav-hover);
  border-radius: .5rem;
  color:var(--nav-color);
}
.headermenu .dropdown:hover .dropdown-content {
  display: block;
  border-radius: .5rem;
}
.headermenu .dropdown:hover .dropbtn {
  background:var(--bg-nav);
}
@media (min-width:1600px){
.headermenu{
  padding:0 13%;
  transition: all .3s ease-out;
}
}
@media (min-width:1920px){
.headermenu{
  padding:0 19%;
  transition: all .3s ease-out;
}
}
@media (max-width:1200px){
.headermenu{
  padding:0 2%;
  transition: all .3s ease-out;
}
}
@media (max-width:991px){
#menu-btn{
  display: initial;
}
.headermenu{
  padding:.5rem 2%;
  transition: all .3s ease-out;
}
.headermenu .navbar{
  position: absolute;
  top:110%; right: 1rem;
  background:var(--bg-nav);
  box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
  border:.1rem solid rgba(0,0,0,.1);
  border-radius: .5rem;
  width: 300px;transform: scale(0);
  transform-origin: top right;
  opacity: 0;
  margin-top: 0.5rem;
  padding:0;
  transition: all .3s ease-out;
}
.headermenu .dropdown:hover .dropbtn {
  background:var(--bg-nav-hover);
}
.headermenu .navbar.active{
  transform: scale(1);
  opacity: 1;
  background:var(--bg-nav);
  transition: all .3s ease-out;
}
.headermenu .navbar a{
  font-size: 1rem;
  display: block;
  padding:.7rem 1.2rem;
  margin: 0;
  border-radius: .5rem;
  background:var(--bg-nav);
  color: var(--nav-color);
  transition: all .3s ease-out;
}
.headermenu .navbar a:hover{
  background:var(--bg-nav-hover);
  color:var(--nav-color);
}
.headermenu .logos{
  margin:0;
}
.headermenu .logos img{
  max-height:40px;
}
.dropdown:hover .dropbtn{
  width: 262px;
}
.headermenu .dropdown-content {
  max-height:50vh
}
}

/* Header Hero*/
.hero,.hero-page,.hero-landingpage {
  width: 100%;
  min-height: 80vh;
  position: relative;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-page {
  min-height: 30vh;
  padding-top:40px
}
.hero img,.hero-page img,.hero-landingpage img.background{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  z-index: 1;
}
.hero:before,.hero-page:before{
  content: "";
  background: linear-gradient(to bottom, rgba(230,0,0,.9), rgba(250,75,0,.8));
  position: absolute;
  inset: 0;
  z-index: 2;
}
.hero-landingpage:before{
  content: "";
  background: linear-gradient(to bottom, rgba(0,0,0,.7), rgba(0,0,0,.6));
  position: absolute;
  inset: 0;
  z-index: 2;
}
.hero .container,.hero-page .container,.hero-landingpage .container{
  position: relative;
  z-index: 3;
  text-align:center;
  text-transform:capitalize;
  color:white;
  padding: 100px 15px 40px;
}
.hero-landingpage .container{
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-landingpage h1,.hero-landingpage h2,.hero-landingpage p,.hero-landingpage button{
  text-align:left;
  line-height:1.3em;
}
.hero h1,.hero-page h1,.hero h2{
  line-height:1.3em;
  font-weight:900;
  padding:5px 0;
  margin:5px 0;
}
.hero-page h1{
  padding:5px 0 0;
  margin:5px 0 0;
}
.hero p{
  padding:5px 0;
  margin:5px 0;
}
.hero-page p{
  font-size:75%;
}
.hero p.description{
  font-size:110%;
  font-weight:900;
}
@media only screen and (max-width: 768px){
.hero .container,.hero-page .container{
  padding: 80px 15px 40px;
}
}
@media only screen and (max-width: 480px){
.hero-landingpage,.hero-landingpage .container{
display: block;
padding:40px 0 0 0;
margin:0;
}
.hero-landingpage h1,.hero-landingpage p,.hero-landingpage h2,.hero-landingpage button{
  text-align:center;
}
}

details{
  margin-top:15px;
  border-radius:4px;
  border:1px solid var(--bg-grey);
}
details summary{
  background:var(--bg-kuning);
  padding: 10px;
  border-radius:4px;
  color:#ffffff;
  font-weight:600;
  font-size:100%;
  cursor:pointer;
}
details p{
  font-size:85%;
  padding:var(--padding-default);
}


.google-map{
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
  border-radius:var(--border-radius);
}
.google-map iframe{
  left:0;
  top:0;
  height:100%;
  width:100%;
  position:absolute;
}


a.sosmed{
  background-color:#ffffff;
  color:var(--bg-kuning);
  padding:4px 8px;
  margin:0 5px 0 0;
  font-size:18px;
  line-height:1.4em;
  border-radius:50%;
}


/* Copyright*/
.copyright {
  max-width:100%;
  background:#000000;
}
.copyright .container{
  color:white;
  text-align:center;
}
.copyright p{
  padding:25px 15px 15px;
  font-size:85%;
}
.copyright a{
  color:white;
}
@media (max-width: 480px) {
.copyright p{
  padding:25px 15px 15px;
}
.copyright {
  padding-bottom:70px;
}
}

/* Back to top*/
#back-to-top{
  background:#ffffff;
  opacity:1;
  color:#000000;
  padding:2px 6px;
  font-size:20px;
  border-radius:4px;
  transition:all .5s ease 50ms;
}
#back-to-top:hover{
  background:#dddddd;
  color:#000000;
  transition:all .5s ease 50ms;
}
.back-to-top{
  position:fixed!important;
  z-index:5;
  text-align:center;
  bottom:15px;
  left:15px;
}

/* Footer Menu*/
.footer-menu{
  line-height:0;
  height:55px;
  position:fixed;
  bottom:0px;
  width:100%;
  z-index:1000;
  display:none;
}
.footer-menu .container{
  position:relative;
  text-align:center;
  background:#ffffff;
  box-shadow:0px 0px 5px 0px #c5c6c7;
}
.footer-menu a{
  color:var(--color-body);
}
.footer-menu a:hover{
  color:var(--bg-kuning);
}
.footer-menu .main a{
  color:#ffffff;
}
.footer-menu .item{
  float:left;
  width:20%;
  padding:10px 0 10px;
  font-size:23px;
}
.footer-menu p{
  font-size:10px;
  padding-top:10px;
}
.footer-menu .main{
  float:center;
  position:relative;
  border:1px solid white;
  border-radius:50%;
  max-width:65px;
  max-height:65px;
  margin:-25px auto 0;
  aspect-ratio:1/1;
  background:var(--bg-kuning);
}
.footer-menu .item-container{
  font-size:28px!important;
  padding-top:15px;
}
@media (max-width: 480px) {
.footer-menu{
  display:block;
}
.back-to-top{
  bottom:75px;
}
}


/* Short Code*/
.icon{
  float:left;
  text-align:left;
  width:30px;
  height:30px;
  font-size:30px;
  padding:0 15px 0 0;
  margin:0;
  background:goldenrod;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display:block;
}
.gradient-orange{
  background:linear-gradient(to top left, rgba(250,200,0,1), rgba(237,4,51,1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.photo{
  float:left;
  text-align:left;
  width:72px;
  height:72px;
  font-size:72px;
  padding:0 15px 0 0;
  margin:0;
}
.icon-center{
  text-align:center;
  width:100%;
  height:auto;
  font-size:72px;
  
}
.photo img{
  border-radius:50%;
}
.text {
  overflow:hidden;
  min-height:40px;
  padding-bottom:10px;
}
.line{
 border-bottom:1px solid #cdcecf;
 margin:10px 0;
}
.border-grey{
 border:4px solid #cdcecf;
}
.border-white{
 border:4px solid #ffffff;
}
.center{
  text-align:center!important;
}
.left{
  text-align:left!important;
}
.kecil,.small{
  font-size:90%;
}
.normal,.default{
  font-size:100%;
}
.medium,.sedang{
  font-size:110%;
}
.besar,.large{
  font-size:130%;
}
.x-besar,.x-large{
  font-size:180%;
  line-height:1.3em;
}
.xx-besar,.xx-large{
  font-size:200%;
}
.xxx-besar,.xxx-large{
  font-size:350%;
}
hr.yellow {color:#f8ce26; border-bottom: 4px solid #f8ce26; width:70%; max-width: 600px;margin-top:10px;clear:both}
hr.black {color:#222222; border-bottom: 4px solid #222222; width:70%; max-width: 600px;margin-top:10px;clear:both}
hr.white {color:#ffffff; border-bottom: 4px solid #ffffff; width:70%; max-width: 600px;margin-top:10px;clear:both}
hr.gold {color:goldenrod; border-bottom: 4px solid goldenrod; width:70%; max-width: 600px;margin-top:10px;clear:both}
hr.gold-left {color:goldenrod; border-bottom: 4px solid goldenrod; width:70%; max-width: 600px;margin-top:10px;clear:both;float:left}
.merah,.red{
  color:#e50000;
}
.white,.putih{
  color:#ffffff;
}
.biru,.blue{
  color:#10399f;
}
.ungu,.purple{
  color:#64288f;
}
.coklat,.brown{
  color:#562614;
}
.gold{
  color:goldenrod;
}
.orange{
  color:#fb5900;
}
.yellow{
  color:yellow;
}
.kuning{
  color:#ffde00;
}
.hitam{
  color:#000000;
}
.bg-orange{
  background:#fb5900;
  color:#ffffff;
}
.bg-gold{
  background:goldenrod;
  color:#ffffff;
}
.bg-gradient-red{
  background: linear-gradient(to bottom, rgba(230,0,0,1), rgba(250,75,0,1));
  color:#ffffff;
}
.uppercase{
text-transform:uppercase;
}
.bg-gradient-blue{
  background: linear-gradient(to top, rgba(0,80,250,1), rgba(0,0,230,1));
  color:#ffffff;
}
.bg-company{
  background:linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.7)),url("/assets/images/bg-company.jpg") center center no-repeat; 
  background-size:cover;
  background-attachment:fixed;
  color:#ffffff;
}
.bg-ornamen{
  background:linear-gradient(to top, rgba(0,0,0,0), rgba(0,0,0,0)),url("/assets/images/ornamen.jpg") repeat; 
}
.bg-mp{
  background:linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.7)),url("/assets/images/bg-mp.jpg") center center no-repeat; 
  background-size:cover;
  background-attachment:fixed;
  color:#ffffff;
}
.bg-footer{
  background:linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.8)),url("/assets/images/bg-footer.jpg") center center no-repeat; 
  background-size:cover;
  color:#ffffff;
  background-attachment:fixed;
}
.bg-overlay-black{
  background:linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.7)),url("/assets/images/bg-pembayaran.jpg") center center no-repeat; 
  background-size:cover;
  color:#ffffff;
}
.bg-overlay-black{
  background:linear-gradient(to bottom, rgba(0,0,0,0.7), rgba(0,0,0,0.7));
}
.bg-kuning,.bg-kuning a{
  background:var(--bg-kuning);
}
.bg-grey {
  background:var(--bg-grey);
}
.bg-gold{
  background:goldenrod;
}
.bg-black{
  background:#000000;
  color:#ffffff
}
.bg-hitam{
  background:#222222;
  color:#ffffff
}
.bg-kuning{
background-color:#ffde00;
  color:#000000;
}
.bg-white{
  background-color: #ffffff;
}
.warning{
  border:4px dashed #e50000;
  color:#000000;
  background:#ffde00;
  padding:15px;
  font-size:140%;
  line-height:1.3em;
  text-align:center;
  font-weight:600;
}
.line5{
	line-height:1.3em;
}
.shadow{
  box-shadow:0 10px 10px rgba(0,0,0,.2);
  transition:all .5s ease 50ms;
}
.shadow:hover{
  box-shadow:0 10px 10px rgba(0,0,0,.3);
  transition:all .5s ease 50ms;
}
.kanan{
    float:right!important;
}
@media (max-width: 768px) {
.warning{
  font-size:125%;
}
.besar,.large{
  font-size:120%;
}
.x-besar,.x-large{
  font-size:140%;
}
.xx-besar,.xx-large{
  font-size:160%;
}
}
@media (max-width: 480px) {
hr.gold-left {float:none}
.mobilecenter{
  text-align:center;
}	
.warning{
  font-size:110%;
}
.x-besar,.x-large{
  font-size:130%;
}
.besar,.large{
  font-size:120%;
}
.xx-besar,.xx-large{
  font-size:150%;
}
.medium,.sedang{
  font-size:105%;
}
}