/*!
 * Custome CSS
 * Created Date: 21/05/2022
 */

.info-30 {
    width: 30%;
}
.info-70 {
    width: 70%;
}
.w-m-200 {
    width: 200px;
}
.w-m-200 {
    width: 200px;
}
.w-m-120 {
    width: 120px;
}
.w-m-130 {
    width: 130px;
}
.img-badge-download {
    max-height: 40px;
}
footer #bg-footer {
    background: url(../images/background.jpg) no-repeat;
    background-size: cover;
}
.img-w-25 {
    width: 25px !important;
}
.cl-white {
    color: white;
}
@media (max-width: 1150px){
    .img-badge-download {
        max-height: 33px;
    }
}
@media (max-width: 992px) {
    .img-badge-download {
        max-height: 20px;
    }
}
@media (min-width: 992px) {
    .navbar-menu-sub {
        /* top: 33.5px; */
        top: 49px;
    }
}

.card-content-product {
    background-color: #001E5A;
    /* width: 100%; */
    height: 320px;
    color: #6C6E72;
}

#wechat .rw-widget-container {
    right: 5px !important;
}

ul#menu-header .nav-item .nav-link.active {
    background-color: rgb(250 165 32 / 100%);
    border-radius: 100px;
}

ul#menu-header .navbar-menu-sub .nav-sub-item .nav-sub-link.active {
    /* color: #ffd88c !important;
    font-weight: bold; */
    background-color: rgb(250 165 32 / 100%);
}

button {
    font-family: Montserrat !important;
}

body {
    padding: 0;
    margin: 0;
}

@media(min-width: 768px) {
    .img-home-content-slide {
        margin-top: 20px;
    }

    section#playstore {
        background: url(../images/il_bg-home-content.png) no-repeat right;
        background-size: contain;
    }

    section#our-latest-update {
        background: url(../images/il_bg-discover.png) no-repeat right;
        background-size: contain;
    }
}

@media(min-width: 786px) {
    .img-home-content-slide {
        margin-top: 0;
    }
}

@media(max-width: 767px) {
    section#playstore {
        padding-top: 0;
    }
}

@media screen and (max-width: 767px) {
    .tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-bottom: 15px;
        display: flex;
    }

    .tabs .tab {
        margin-right: 2rem;
        white-space: nowrap;
        display: inline-block;
    }
}

a.nav-link--keyword:hover {
    background-color: transparent;
    color: inherit;
}

.img-icon {
    width: 25px;
}

.owl-carousel .owl-nav button.owl-next .fa {
    color: white;
}
.owl-carousel .owl-nav button.owl-prev .fa {
    color: white;
}

/* === SLOT DEMO — DESKTOP STYLES === */

/* ≥992px: kartu rapi, gambar besar (cover), judul & tombol center */
@media (min-width: 992px){
  #slot-demo .card{
    display:flex !important;
    flex-direction:column !important;
    height:100% !important;
  }

  /* Gambar besar, tidak mengecil (crop rapi) */
  #slot-demo .card-img-top{
    order:0 !important;
    display:block !important;
    width:100% !important;
    height:260px !important;          /* ubah 240–280px sesuai selera */
    object-fit:cover !important;       /* penuh, tidak distorsi */
    margin:0 !important;
    border-top-left-radius:.25rem;
    border-top-right-radius:.25rem;
  }

  /* Body di bawah gambar, center & rapi */
  #slot-demo .card-body{
    order:1 !important;
    flex:1 1 auto !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    text-align:center !important;
    padding:12px 16px !important;
  }

  #slot-demo .card-title{
    margin:0 0 .5rem !important;
    line-height:1.25 !important;
    font-weight:600;
  }

  /* Tombol seragam & di tengah */
  #slot-demo .card-body .btn{
    margin-top:.25rem !important;
    align-self:center !important;
    min-width:140px !important;
    width:auto;
  }

  /* Hover (opsional) */
  #slot-demo .card:hover{
    box-shadow:0 .5rem 1rem rgba(0,0,0,.08);
    transform:translateY(-1px);
    transition:.2s ease;
  }
}

/* ≥1200px: paksa 4 kolom + kecilkan tinggi gambar sedikit agar tajam */
@media (min-width: 1200px){
  /* 4 kolom */
  #slot-demo .row > div.col-md-6,
  #slot-demo .row > div.col-lg-4{
    flex:0 0 25% !important;
    max-width:25% !important;
  }
  /* gutter lebih rapat */
  #slot-demo .row{ margin-left:-10px; margin-right:-10px; }
  #slot-demo .row > div[class*="col-"]{ padding-left:10px; padding-right:10px; }

  /* tinggi gambar sedikit turun agar tidak pecah */
  #slot-demo .card-img-top{
    height:300px !important;          /* bisa 210–230px sesuai kualitas aset */
  }
}