/* Untuk membuat ukuran gambar produk seragam */
.card-img-container {
    height: 200px; /* Anda bisa sesuaikan tingginya */
    overflow: hidden;
    position: relative;
}

.card-img-container img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    transform: translate(-50%, -50%);
}

/* Ganti primary color sesuai logo */
.text-color-primary,
a,
a:hover,
a:focus {
  color: #7A0C17 !important;
}

.bg-color-primary,
.btn-primary,
.header-body.border-color-primary {
  background-color: #7A0C17 !important;
  border-color: #7A0C17 !important;
}

/* Hover lebih terang */
.btn-primary:hover,
.btn-primary:focus {
  background-color: #A0202C !important;
  border-color: #A0202C !important;
}

/* Footer */
#footer {
  background-color: #333333;
  color: #eeeeee;
}
#footer a {
  color: #eeeeee;
}
#footer a:hover {
  color: #A0202C;
}

/* Header background putih */
#header .header-body {
  background-color: #ffffff !important;
  border-bottom: 1px solid #eee;
}

/* Logo lebih jelas */
.header-logo img {
  max-height: 60px;
}

/* Menu link style */
#header .header-nav-main .nav > li > a {
  color: #333333 !important;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* #header .header-nav-main nav > ul > li.active > a, #header .header-nav-main nav > ul > li.open  */
/* Hover menu */
#header .nav .nav-link{
  color:#ffffff;
}
#header .header-nav-main .nav > li > a:hover {
  color: #7A0C17 !important;
}

/* Dropdown menu */
#header .header-nav-main .dropdown-menu {
  border-radius: 0;
  border: 1px solid #eee;
}
#header .header-nav-main .dropdown-menu > li > a {
  color: #333 !important;
}
#header .header-nav-main .dropdown-menu > li > a:hover {
  color: #7A0C17 !important;
  background-color: #f8f8f8;
}

/* Underline (hover/active) nav item */
#header .header-nav-main .nav > li:hover > a,
#header .header-nav-main .nav > li.open > a,
#header .header-nav-main .nav > li.active > a {
  border-bottom: 2px solid #7A0C17 !important;
}

/* Dropdown top border (yang biru) */
#header .header-nav-main .dropdown-menu {
  border-top: 2px solid #7A0C17 !important;
}

/* Hover item di dropdown */
#header .header-nav-main .dropdown-menu > li > a:hover {
  color: #7A0C17 !important;
}

/* Tombol utama (primary) */
.btn-primary {
  background-color: #7A0C17 !important;
  border-color: #7A0C17 !important;
  color: #ffffff !important;   /* teks putih */
}

/* Highlight Porto (default biru) ubah ke maroon */
.text-color-primary,
a.text-color-primary,
a.text-color-primary:hover,
a.text-color-primary:focus {
  color: #7A0C17 !important;
}

/* Background highlight (span highlight di heading) */
.highlight {
  background-color: #7A0C17 !important;
  color: #ffffff !important; /* teks jadi putih */
  padding: 0 5px;
}

/* Override Porto .bg-primary jadi maroon */
.bg-primary {
  background-color: #7A0C17 !important;
}

/* teks di dalam word-rotator tetap putih */
.word-rotator-words.bg-primary b {
  color: #ffffff !important;
}

/* General button reset */
.btn {
  border-radius: 6px;       /* biar ada sedikit rounded */
  font-weight: 600 !important; /* semi-bold */
  text-transform: none;     /* biar sesuai teks (bukan uppercase semua) */
}

/* Semua tombol utama disamakan */
.btn-primary,
.btn-dark,
.btn-outline,
.btn-default {
  background-color: #7A0C17 !important;
  border-color: #7A0C17 !important;
  color: #ffffff !important;
}

/* Hover state */
.btn-primary:hover,
.btn-dark:hover,
.btn-outline:hover,
.btn-default:hover {
  background-color: #A0202C !important;  /* versi lebih terang maroon */
  border-color: #A0202C !important;
  color: #ffffff !important;
}


/* Footer Ribbon (default Porto biru) */
/* Warna pita footer */
.footer-ribbon {
  background: #7A0C17 !important;
  color: #ffffff !important;
  font-weight: 600;
}

/* Segitiga kecil di kiri pita */
.footer-ribbon:before {
  border-right-color: #7A0C17 !important; /* segitiga ganti maroon */
}

/* Footer umum */
footer {
  background-color: #212121;   /* abu gelap */
  color: #cccccc;
  font-size: 14px;
  line-height: 1.6;
}

/* Teks di footer */
footer p, 
footer li, 
footer a, 
footer span {
  color: #cccccc !important;
}

/* Base semua social icon di footer */
footer .social-icons li a {
  background-color: #ffffff !important; /* base putih */
  color: #7A0C17 !important;           /* icon maroon */
  border: none !important;             /* hilangkan border */
}

/* Pastikan semua icon di dalam ikut warnanya */
footer .social-icons li a i,
footer .social-icons li a .fab {
  color: #7A0C17 !important;
}

/* Hover: maroon bulat + icon putih */
footer .social-icons li a:hover {
  background-color: #7A0C17 !important;
  color: #ffffff !important;
}

/* Khusus override facebook (Porto punya default spesifik) */
footer .social-icons li.social-icons-facebook a,
footer .social-icons li.social-icons-facebook a i,
footer .social-icons li.social-icons-facebook a .fab.fa-facebook-f {
  background-color: #ffffff !important;
  color: #7A0C17 !important;
  border: none !important;
}
footer .social-icons li.social-icons-facebook a:hover,
footer .social-icons li.social-icons-facebook a:hover i,
footer .social-icons li.social-icons-facebook a:hover .fab.fa-facebook-f {
  background-color: #7A0C17 !important;
  color: #ffffff !important;
}


/* === MOBILE MENU FIX === */

/* tombol toggle nav (hamburger) */
#header .header-btn-collapse-nav {
  background-color: #7A0C17 !important;  /* maroon base */
  border: none !important;
  padding: 8px 10px;
  border-radius: 4px;
}

/* icon garis (porto pakai span atau i biasanya) */
#header .header-btn-collapse-nav i,
#header .header-btn-collapse-nav span {
  color: #ffffff !important;   /* garis putih */
}

/* state hover/focus */
#header .header-btn-collapse-nav:hover,
#header .header-btn-collapse-nav:focus {
  background-color: #A0202C !important;  /* maroon lebih terang saat hover */
}

/* Background menu dropdown mobile */
#header .header-nav-main nav > ul > li > a,
#header .header-nav-main nav > ul > li.open > a,
#header .header-nav-main nav > ul > li.active > a {
  background-color: #ffffff !important;  /* putih */
  color: #333333 !important;             /* teks hitam */
}

/* Hover / Active di mobile */
#header .header-nav-main nav > ul > li > a:hover,
#header .header-nav-main nav > ul > li.open > a,
#header .header-nav-main nav > ul > li.active > a {
  background-color: #ffffff !important;  /* maroon */
  color: #333333 !important;             /* teks putih */
}

/* Submenu caret (panah kanan/bawah) */
#header .header-nav-main nav > ul > li.dropdown > a:after,
#header .header-nav-main nav > ul > li.dropdown-submenu > a:after {
  border-top-color: #7A0C17 !important;  /* panah bawah */
  border-left-color: #7A0C17 !important; /* panah samping */
}

/* Untuk ikon sosial media */
footer .social-icons li a {
  background-color: transparent !important; /* Latar belakang ikon transparan */
  color: #ffffff !important;           /* Ikon putih */
  border: 1px solid #ffffff !important; /* Beri garis pinggir putih agar terlihat */
}

/* Efek hover untuk ikon sosial media */
footer .social-icons li a:hover {
  background-color: #ffffff !important; /* Latar jadi putih saat disentuh */
  color: #ffffff !important;           /* Ikon jadi merah marun */
}

.text-color-primary, a.text-color-primary, a.text-color-primary:hover, a.text-color-primary:focus {
    color: #ffffff !important;
}

.list.list-icons li > [class*="fa-"]:first-child, .list.list-icons li > .icons:first-child, .list.list-icons li a:first-child > [class*="fa-"]:first-child, .list.list-icons li a:first-child > .icons:first-child {
    color: #ffffff;
    border-color: #ffffff;
}

/* Tampilan Default untuk Mobile & Tablet */
.cascading-images {
    display: flex;
    flex-direction: column;
    align-items: center; /* Gambar di tengah di layar kecil */
    gap: 1rem;
}

.cascading-images img {
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    max-width: 85%;
}


/* Tampilan Estetik Bertumpuk HANYA UNTUK LAYAR BESAR (Desktop) */
@media (min-width: 992px) {
    .cascading-images {
        position: relative;
        min-height: 450px; /* Memberi ruang untuk posisi absolut */
        display: block;
    }

    .cascading-images img {
        position: absolute;
        max-width: 70%; /* Ukuran gambar di desktop */
    }

    .cascading-images .cascading-img-1 {
        top: 0;
        left: 0;
        z-index: 1;
    }

    .cascading-images .cascading-img-2 {
        top: 30%;
        left: 45%;
        z-index: 3;
    }

    .cascading-images .cascading-img-3 {
        top: 55%;
        left: -10%;
        z-index: 2;
    }
}	

/* Breadcrumb dasar */
.breadcrumb {
    background: transparent;   /* biar nggak ada background default */
    padding: 8px 0;
    margin-bottom: 1rem;
    list-style: none;
}

/* Link breadcrumb */
.breadcrumb a {
    color: #ffffff;            /* putih */
    text-decoration: none;
    transition: color 0.2s ease;
}

/* Hover link */
.breadcrumb a:hover {
    color: #cccccc;            /* abu-abu */
}

/* Item terakhir (active) */
.breadcrumb li:last-child span,
.breadcrumb .active {
    color: #f5f5dc;            /* krem/putih krem */
    font-weight: bold;
}

/* ============================================== */
/* GAYA UNTUK TOMBOL WHATSAPP MENGAMBANG          */
/* ============================================== */
.whatsapp-float {
    position: fixed; /* Membuatnya mengambang */
    width: 60px;
    height: 60px;
    bottom: 40px; /* Jarak dari bawah */
    right: 40px; /* Jarak dari kanan */
    background-color: #25d366; /* Warna hijau WhatsApp */
    color: #FFFFFF; /* Warna ikon putih */
    border-radius: 50%; /* Membuatnya bulat */
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
   /* TAMBAHKAN BARIS INI */
    z-index: 9999 !important;
    transition: transform 0.3s ease;
    
}

.whatsapp-float:hover {
    transform: scale(1.1); /* Efek membesar saat disentuh */
}

.whatsapp-icon {
    margin-top: 15px; /* Menengahkan ikon di dalam lingkaran */
}

.scroll-to-top i { color: #fff !important; }
.fas .fa-chevron-up { color: #fff !important; }

.card-img-top {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 4px;
}