/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

<link href="css/custom.css" rel="stylesheet">

*/

.star-icon {
  vertical-align: middle; /* Membuat gambar sejajar dengan teks */
  margin-right: 10px; /* Menambahkan jarak antara gambar dan teks */
  width: 40px; /* Sesuaikan ukuran gambar */
  height: auto;
}

/* 1. Warna Biru Tua untuk Header dan Footer */
header, footer {
  background-color: ; /* Biru Tua */
  color: #ffffff; /* Warna teks putih untuk kontras */
}

/* 2. Warna Oranye untuk Tombol CTA */
.btn, .cta-button {
  background-color: #FF6600; /* Oranye */
  color: #ffffff; /* Teks putih di tombol */
  padding: 10px 20px;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: bold;
}

.btn:hover, .cta-button:hover {
  background-color: #e65c00; /* Warna oranye lebih gelap saat hover */
}

/* 3. Warna Putih untuk Latar Belakang Utama */
body {
  background-color: #FFFFFF; /* Putih */
  color: #333333; /* Warna teks utama */
}

/* warna biru muda dan kuning terang bg konten */

#section {
  background-color:RGB(200, 216, 230); /* biru Muda */
  padding: 60px 0;
}

#section2 {
  background-color:rgba(245, 245, 220, 0.5) ; /* kuning terang */
  padding: 60px 0;
}

#section3 {
  background-color:RGB(180, 216, 230); /* biru Muda */
  padding: 60px 0;
}

.price-menu-list li {
  background-color:rgba(245, 245, 220, 0.7); /* Untuk list produk */
  margin: 10px 0;
  padding: 20px;
}

#section4 {
  background-color:rgba(245, 245, 220, 0.5) ; /* kuning terang */
  padding: 60px 0;
}

#allproduk {
  background-color:rgba(245,245, 220, 0.5) ; /* kuning terang */
  padding: 60px 0;
}

/* 5. Warna Hijau Muda untuk Penawaran dan Diskon */
.discount, .special-offer {
  color: #66CC66; /* Hijau Muda untuk diskon atau penawaran */
  font-weight: bold;
}

/* Menambahkan gaya untuk harga atau penawaran spesial */
h3 {
  color: #66CC66; /* Hijau Muda untuk harga atau teks diskon */
}

/* Menambahkan efek hover untuk elemen dengan Hijau Muda */
.discount:hover {
  color: #4CAF50; /* Hijau lebih gelap untuk hover */
}

html {
    scroll-behavior: smooth; /* Mengaktifkan efek scroll halus */
}

.img-thumbnail {
  width: 80%; /* Atur lebar gambar agar sesuai dengan container */
  height: auto; /* Atur tinggi gambar agar proporsional */
  max-width: 100%; /* Pastikan gambar tidak melebihi ukuran container */
}

.product .product-image > a, .product .product-image img {
  display: block;
  width: 340px;
  height: 301px;
} 
.product .e-commerce-image > a, .product .e-commerce-image img {
  display: block;
  width: 200px;
  height: 300px;
} 

.text-custom {
  color:RGB(110, 110, 109); /* Contoh warna oranye */
}