/* Custom CSS Tambahan untuk Contoh Ini */
:root {
--primary-color: #007bff; /* Warna utama Bootstrap */
--secondary-color: #6c757d;
--light-bg: #f8f9fa;
--dark-text: #343a40;
}

body {
font-family: 'Arial', sans-serif;
color: var(--dark-text);
}

.navbar-brand img {
height: 40px; /* Sesuaikan ukuran logo */
margin-right: 10px;
}



.hero-section h1 {
font-size: 3.5rem;
margin-bottom: 20px;
}

.hero-section p {
font-size: 1.25rem;
margin-bottom: 40px;
}

.feature-icon {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: 15px;
}

.category-card img, .product-card img {
max-width: 100%;
height: 200px; /* Tinggi gambar konsisten */
object-fit: cover; /* Pastikan gambar mengisi area tanpa distorsi */
margin-bottom: 15px;
border-radius: 8px;
}

.product-card {
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
text-align: center;
transition: transform 0.3s ease;
}

.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.product-card .price .original-price {
text-decoration: line-through;
color: #999;
margin-right: 10px;
}

.rating .fas {
color: #ffc107; /* Warna bintang kuning */
}

.testimonial-item {
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
margin-bottom: 20px; /* Untuk tampilan non-carousel */
}

.testimonial-item p {
font-style: italic;
margin-bottom: 15px;
}

.footer-link-list li a {
color: #ccc;
text-decoration: none;
}

.footer-link-list li a:hover {
color: white;
text-decoration: underline;
}

.payment-methods img {
height: 30px;
margin-right: 10px;
filter: grayscale(100%); /* Contoh: membuat logo pembayaran hitam putih */
opacity: 0.7;
}
.payment-methods img:hover {
filter: grayscale(0%);
opacity: 1;
}

/* Kelas untuk animasi kustom */
.animate-on-scroll {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease-out;
}
.animate-on-scroll.in-view {
opacity: 1;
transform: translateY(0);
}