/*

Template: Appino - Responsive App Landing Page
Author: iqonicthemes.in
Version: 1.0
Design and Developed by: iqonicthemes.in

NOTE: You can use your styling layout by this file to your website.

*/

/* ============================================
   Bunihayu Forest - Custom Styles
   ============================================ */

/* Floating WhatsApp Button */
.wa-float {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 999;
    width: 56px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    background: #25d366;
    color: #ffffff !important;
    font-size: 30px;
    border-radius: 50%;
    -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
}
.wa-float:hover, .wa-float:focus {
    background: #1ebe5b;
    color: #ffffff !important;
    -webkit-transform: scale(1.08);
    -moz-transform: scale(1.08);
    transform: scale(1.08);
}

/* Harga & Reservasi */
.price-card {
    background: #ffffff;
    border: 1px solid #ededed;
    border-top: 4px solid #8ec140;
    border-radius: 8px;
    padding: 25px 30px;
    height: 100%;
    -webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.06);
}
.price-card, .price-card p, .price-list li span { color: #333333; }
.price-card .blog-title h4 { color: #28524e; }
.price-card .price-note { color: #666666; }
.price-list { list-style: none; padding: 0; margin: 0 0 15px; }
.price-list li {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed #ededed;
}
.price-list li:last-child { border-bottom: none; }
.price-list li strong { color: #28524e; }
.price-note { font-size: 13px; font-style: italic; color: #666666; }
.policy-list, .route-list { list-style: none; padding: 0; margin: 0; }
.policy-list li { padding: 6px 0; }
.policy-list li i { color: #8ec140; margin-right: 8px; }
.route-list { counter-reset: route; }
.route-list li {
    position: relative;
    padding: 8px 0 8px 40px;
    counter-increment: route;
}
.route-list li::before {
    content: counter(route);
    position: absolute;
    left: 0;
    top: 8px;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    background: #8ec140;
    color: #ffffff;
    font-weight: 600;
    border-radius: 50%;
}

/* CTA WhatsApp (override template blue gradient) */
.button.wa-cta, .button.wa-cta:visited {
    background: #8ec140;
    background-image: none;
    color: #ffffff;
}
.button.wa-cta:hover, .button.wa-cta:focus {
    background: #28524e;
    background-image: none;
    color: #ffffff;
}
.button.wa-cta i { margin-right: 8px; font-size: 18px; }

/* Google Maps embed */
.map-responsive {
    border: 4px solid #8ec140;
    border-radius: 8px;
    overflow: hidden;
    -webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.08);
}
.map-responsive iframe { display: block; width: 100%; height: 400px; }

/* Coming Soon label */
.label-coming-soon {
    display: inline-block;
    background: #8ec140;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 18px;
    border-radius: 90px;
}

/* Footer */
.iq-footer-03 p { margin: 0; }

@media (max-width: 767px) {
    .wa-float { right: 15px; bottom: 15px; width: 48px; height: 48px; line-height: 48px; font-size: 26px; }
    .map-responsive iframe { height: 300px; }
}

/* ============================================
   Navbar fit (banyak item menu)
   ============================================ */
@media (min-width: 768px) {
    header .navbar-nav > li { margin: 0 6px 0 0; }
    header .navbar-default .navbar-nav > li > a,
    header .navbar-default .navbar-nav > li > a:hover,
    header .navbar-default .navbar-nav > li > a:focus,
    header .navbar-default .navbar-nav > li.active > a,
    header .navbar-default .navbar-nav > li.active > a:focus,
    header .navbar-default .navbar-nav > li.active > a:hover {
        font-size: 13px;
        padding: 5px 9px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    header .navbar-nav > li { margin: 0 3px 0 0; }
    header .navbar-default .navbar-nav > li > a,
    header .navbar-default .navbar-nav > li > a:hover,
    header .navbar-default .navbar-nav > li > a:focus,
    header .navbar-default .navbar-nav > li.active > a,
    header .navbar-default .navbar-nav > li.active > a:focus,
    header .navbar-default .navbar-nav > li.active > a:hover {
        font-size: 11px;
        padding: 5px 6px;
    }
}

/* ============================================
   Paket & Program (#packages)
   ============================================ */

/* Filter kategori */
.pkg-filter { margin-bottom: 50px; }
.pkg-filter-btn {
    background: transparent;
    color: #ffffff;
    border: 2px solid #8ec140;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 22px;
    margin: 4px;
    border-radius: 90px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}
.pkg-filter-btn:hover, .pkg-filter-btn:focus, .pkg-filter-btn.active {
    background: #8ec140;
    color: #ffffff;
    outline: none;
}

/* Kategori (disaring via jQuery class toggle) */
.pkg-cat { display: none; }
.pkg-cat.active { display: block; }
.pkg-cat-title { color: #ffffff; font-size: 26px; line-height: 34px; margin-bottom: 8px; }
.pkg-cat-title span { color: #8ec140; font-size: 18px; font-weight: 400; }
.pkg-cat-tag { color: #8ec140; font-weight: 600; letter-spacing: 1px; margin-bottom: 35px; }

/* Grid kartu paket (equal height, flex wrap) */
.pkg-grid { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.pkg-grid > .pkg-col, .pkg-grid > .discount-col { display: -webkit-flex; display: flex; margin-bottom: 30px; }
.pkg-card {
    background: #ffffff;
    border: 1px solid #ededed;
    border-top: 4px solid #8ec140;
    border-radius: 8px;
    width: 100%;
    -webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease-in-out;
}
.pkg-card:hover {
    -webkit-transform: translateY(-4px);
    -moz-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.12);
    box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.12);
}
.pkg-card .iq-blog-detail { padding: 25px 25px 30px; }
.pkg-code { display: inline-block; color: #8ec140; font-size: 12px; font-weight: 700; letter-spacing: 2px; margin-bottom: 10px; }
.pkg-card .blog-title h4, .pkg-card .blog-title h4 a { color: #28524e; font-size: 18px; line-height: 26px; margin-bottom: 12px; }
.pkg-card .blog-title h4 a:hover, .pkg-card .blog-title h4 a:focus { color: #8ec140; }
.pkg-card .iq-blog-detail p { color: #555555; font-size: 14px; }
.pkg-emoji { font-size: 22px; }
.pkg-badge {
    display: inline-block;
    background: rgba(142, 193, 64, 0.12);
    color: #28524e;
    border: 1px solid #8ec140;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 90px;
}
.pkg-meta { margin-bottom: 15px; }
.pkg-price { color: #28524e; font-size: 24px; font-weight: 800; margin: 15px 0; }
.pkg-price small { font-size: 13px; font-weight: 600; color: #666666; }
.pkg-wa {
    display: inline-block;
    background: #8ec140;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 20px;
    border-radius: 90px;
    transition: all 0.3s ease-in-out;
}
.pkg-wa:hover, .pkg-wa:focus { background: #28524e; color: #ffffff !important; }
.pkg-wa i { margin-right: 6px; font-size: 14px; }

/* Gambar lebar selingan kategori */
.pkg-wide { margin-bottom: 45px; }
.pkg-wide img { width: 100%; max-height: 400px; object-fit: cover; object-position: center; border-top-left-radius: 20px; border-bottom-right-radius: 20px; }
.pkg-wide-text h4 { color: #ffffff; line-height: 32px; margin-bottom: 15px; }
.pkg-wide-text p { color: #ffffff; }

/* Catatan harga */
.pkg-note { color: #ffffff; font-size: 13px; font-style: italic; text-align: center; opacity: 0.85; margin: 30px auto 0; max-width: 800px; }

/* Sub-heading di dalam section */
.heading-title.heading-sub { margin: 70px 0 45px; }
.heading-title.heading-sub h3 { color: #ffffff; font-size: 28px; line-height: 38px; }
.heading-title.heading-sub h3 span { color: #8ec140; }
.heading-sub-tag { color: #ffffff; opacity: 0.85; margin-top: 12px; }

/* Kartu Komunitas & CSR */
.impact-card { border-top-color: #28524e; }
.impact-emoji { font-size: 38px; line-height: 1; margin-bottom: 15px; }

/* Badge diskon */
.discount-badge {
    background: #ffffff;
    border: 1px solid #ededed;
    border-top: 4px solid #28524e;
    border-radius: 8px;
    text-align: center;
    padding: 20px 12px;
    width: 100%;
    -webkit-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.06);
    -moz-box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.06);
}
.discount-badge strong { display: block; color: #8ec140; font-size: 22px; font-weight: 800; }
.discount-badge span { display: block; color: #28524e; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin: 8px 0; }
.discount-badge p { color: #555555; font-size: 12px; line-height: 18px; margin: 0; }

/* Link ke #packages dari section experience */
.iq-blog-detail a.link-packages { color: #8ec140; font-weight: 600; }
.iq-blog-detail a.link-packages:hover, .iq-blog-detail a.link-packages:focus { color: #ffffff; }

@media (max-width: 767px) {
    /* Filter kategori scrollable di mobile */
    .pkg-filter { overflow-x: auto; white-space: nowrap; text-align: left; padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
    .pkg-filter-btn { display: inline-block; font-size: 12px; padding: 7px 16px; }
    .pkg-cat-title { font-size: 21px; line-height: 30px; }
    .pkg-cat-title span { font-size: 15px; }
    .pkg-wide-text { margin-top: 20px; }
    .heading-title.heading-sub { margin: 50px 0 35px; }
}


/* ===== Konsistensi ukuran gambar (v2.2) ===== */
/* Kartu Experience: semua foto sama tinggi, rata, crop tengah */
#experience .iq-blog-box .iq-blog-image {
    overflow: hidden;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
#experience .iq-blog-box .iq-blog-image img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    object-position: center;
}
/* Thumbnail galeri: seragam */
.img-gallery {
    width: 100%;
    height: 260px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}
@media (max-width: 991px) {
    #experience .iq-blog-box .iq-blog-image img { height: 280px; }
    .img-gallery { height: 220px; }
}
@media (max-width: 767px) {
    #experience .iq-blog-box .iq-blog-image img { height: 240px; }
    .img-gallery { height: 200px; }
}


/* ===== Blok Kebijakan K3-HSE (v2.3) ===== */
.policy-intro { color: #666666; font-size: 14px; line-height: 22px; margin: 10px auto 0; max-width: 760px; text-align: center; }
.policy-col { margin-top: 25px; }
.policy-cat { color: #28524e; font-size: 16px; font-weight: 700; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 2px solid #8ec140; }
.policy-cat i { color: #8ec140; margin-right: 8px; }
.policy-col .policy-list li { font-size: 13px; line-height: 20px; padding: 6px 0 6px 24px; position: relative; }
.policy-col .policy-list li i { position: absolute; left: 0; top: 9px; margin-right: 0; }
.policy-note { color: #666666; font-size: 12.5px; line-height: 20px; margin: 28px 0 0; padding: 12px 16px; background: #f4f8f0; border-left: 4px solid #8ec140; border-radius: 6px; }
.policy-note i { color: #8ec140; margin-right: 6px; }
@media (max-width: 991px) {
    .policy-col { margin-top: 20px; }
}

/* v2.4.8 - kartu harga sama tinggi, bawah lurus */
.price-row { display: flex; flex-wrap: wrap; }
.price-row > [class*="col-"] { display: flex; flex-direction: column; }
.price-row .iq-blog-box.price-card { width: 100%; display: flex; flex-direction: column; flex: 1; }
.price-row .iq-blog-box.price-card .iq-blog-detail { display: flex; flex-direction: column; flex: 1; width: 100%; }
.price-row .iq-blog-box.price-card .blog-content { flex: 1; display: flex; flex-direction: column; justify-content: center; }

/* v2.4.11 - kartu paket clickable */
.pkg-card { cursor: pointer; transition: transform .25s ease, box-shadow .25s ease; }
.pkg-card:hover { transform: translateY(-5px); box-shadow: 0 12px 28px rgba(0,0,0,.28); }


/* v2.4.17 - Tagline hero & narasi penguat */
.hero-tagline {
    font-size: 17px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #b8e05f !important;
    font-weight: 600;
    margin: 18px 0 6px;
    text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.coming-soon h5 { line-height: 1.9; }
.heading-subtitle {
    max-width: 720px;
    margin: 10px auto 0;
    font-size: 16px;
    line-height: 1.8;
    color: #4a5a58;
    text-align: center;
}
.heading-subtitle-light { color: rgba(255,255,255,.85); }
@media (max-width: 767px) {
    .hero-tagline { font-size: 13px; letter-spacing: 2px; }
    .heading-subtitle { font-size: 14px; padding: 0 10px; }
}