/* navbar */
/* Menyusun carousel agar selalu berada di bawah navbar */
@media screen and (min-width: 800px) {
    /* Membuat navbar tetap berada di posisi fixed-top pada perangkat mobile */
    .fixed-top {
        position: fixed !important;  /* Pastikan navbar tetap di posisi fixed */
        top: 0;
        left: 0;
        width: 100%;  /* Navbar mengambil lebar penuh */
        z-index: 9999;  /* Navbar tetap di atas konten lainnya */
    }
    
    /* Mengatur carousel untuk memiliki margin-top yang cukup agar berada di bawah navbar */
    /* Menyesuaika gambar di dalam carousel untuk responsivitas */
    .carousel-img {
        width: 100%;  /* Gambar memenuhi lebar kontainer */
        height: auto;  /* Menjaga rasio gambar tetap proporsional */
        object-fit: cover;  /* Memastikan gambar tetap menutupi kontainer */
    }
}



@media screen and (max-width: 800px) {
	  /* Untuk perangkat mobile */
	  .carousel {
        margin-top: 50px;  /* Jarak lebih kecil jika navbar lebih kecil */
    }

    .carousel-img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
  
	/* Styling untuk judul logo navbar */
	nav.navbar a.navbar-brand h3 {
	  font-size: 20px; /* Ukuran font lebih kecil agar lebih pas di layar kecil */
	  padding: 0; /* Menghilangkan padding jika ada */
	}
  
	/* Styling untuk tombol navbar-toggler */
	nav.navbar button.navbar-toggler {
	  font-size: 16px; /* Menambah ukuran font untuk tombol toggler */
	  border: none; /* Menghilangkan border untuk tampilan yang lebih bersih */
	  background-color: transparent; /* Memastikan background tombol transparan */
	}
  
	/* Menyembunyikan elemen .top-nav di perangkat mobile */
	div.top-nav {
	  display: none;
	}
  
	/* Styling untuk ikon pencarian di mobile */
	i.mobile-search {
	  display: block;
	  position: absolute;
	  right: 10px; /* Mengatur posisi lebih dekat ke kanan */
	  top: 15px; /* Mengatur posisi lebih atas untuk keseimbangan */
	  font-size: 20px; /* Menambah ukuran ikon pencarian agar lebih terlihat */
	  cursor: pointer; /* Mengubah kursor untuk menunjukkan bahwa itu dapat diklik */
	}
  
	/* Menyembunyikan ikon pencarian desktop */
	i.desktop-search {
	  display: none;
	}
  
	/* Memastikan tombol pencarian lebih jelas dan mudah dijangkau di mobile */
	.search-form {
	  position: fixed;
	  top: 70px; /* Menghindari tumpang tindih dengan navbar yang fixed */
	  left: 0;
	  width: 100%;
	  background-color: #fff;
	  padding: 10px;
	  display: none;
	  z-index: 9998;
	}
  
	.search-form input {
	  width: 85%;
	  padding: 10px;
	  font-size: 16px;
	  border-radius: 5px;
	  border: 1px solid #ccc;
	}
  
	.search-form button {
	  width: 15%;
	  padding: 10px;
	  font-size: 16px;
	  border-radius: 5px;
	  background-color: #007bff;
	  color: white;
	  border: none;
	}
  

  }
  
@media screen and (max-width: 500px) {
	i.mobile-search {
		right: 15%;
	}
    .carousel-img {
        height: 200px;  /* Mengatur tinggi gambar lebih rendah untuk perangkat dengan layar kecil */
        object-fit: cover;  /* Tetap menjaga proporsi gambar */
    }


}

/* footer subsriber */
@media screen and (max-width: 1150px) {
	footer div.subscribe div.main {
		width: 900px;
	}

	  /* Mengatur carousel untuk mengambil lebar penuh */
	  .carousel {
        position: relative;
        width: 100%;
    }

    .carousel-img {
        width: 100%;  /* Membuat gambar mengikuti lebar penuh kontainer */
        height: auto;  /* Menjaga agar tinggi gambar proporsional */
        object-fit: cover;  /* Gambar tetap terpotong secara proporsional agar memenuhi area */
    }
}

@media screen and (max-width: 950px) {
	footer div.subscribe div.main {
		width: 700px;
	}

	footer div.subscribe div.main div.text p {
		font-size: 14px;
	}
}

@media screen and (max-width: 750px) {
	footer div.subscribe {
		height: auto;
		padding: 20px 0;
	}

	footer div.subscribe div.main {
		display: block;
		width: 90%;
	}

	footer div.subscribe div.main div.text {
		display: block;
		width: 100%;
	}

	footer div.subscribe div.main div.text h2 {
		font-size: 20px;
	}

	footer div.subscribe div.main div.text p {
		font-size: 12.5px;
	}

	footer div.subscribe div.main div.form {
		display: block;
		width: 100%;
	}

	footer div.subscribe div.main div.form input {
		font-size: 14px;
		height: 40px;
		width: calc(100% - 100px);
	}

	footer div.subscribe div.main div.form button {
		height: 40px;
		font-size: 14px;
		width: 100px;
	}
	

}

/* footer information */
@media screen and (max-width: 1150px) {
	footer div.information div.main {
		width: 800px;
	}

	footer div.information div.main div.about {
		width: 200px;
	}

	footer div.information div.main div.about p {
		font-size: 13px;
	}

	footer div.information div.main div.about div.sosmed a {
		font-size: 15px;
	}

	footer div.information div.main div.item h3.title {
		font-size: 15px;
	}

	footer div.information div.main div.item a,
	footer div.information div.main div.item p {
		font-size: 13px;
	}
}

@media screen and (max-width: 850px) {
	footer div.information div.main {
		width: 600px;
	}

	footer div.information div.main div.item-hide {
		display: none;
	}
}

@media screen and (max-width: 650px) {
	footer div.information div.main {
		padding: 20px;
		width: 90%;
	}

	footer div.information div.about-hide {
		display: none;
	}

	footer div.information div.main div.item-hide {
		display: none;
	}
}

@media screen and (max-width: 350px) {
	footer div.information div.main div.item {
		display: block;
		width: 100%;
	}
	footer div.information div.main div.item-hide {
		display: none;
	}
	footer div.information div.main div.item h3.title {
		font-size: 14px;
	}

	footer div.information div.main div.item a,
	footer div.information div.main div.item p {
		font-size: 12px;
	}
	
}

/* footer contact */
@media screen and (max-width: 1250px) {
	footer div.contact div.main {
		width: 900px;
	}
}

@media screen and (max-width: 950px) {
	footer div.contact {
		height: 100px;
	}

	footer div.contact div.main {
		width: 800px;
	}

	footer div.contact div.main div.item i {
		font-size: 20px;
	}

	footer div.contact div.main div.item p {
		font-size: 13px;
	}
	

}

@media screen and (max-width: 850px) {
	footer div.contact {
		height: auto;
	}

	footer div.contact div.main {
		display: block;
		width: 90%;
	}

	footer div.contact div.main div.item {
		display: block;
		height: auto;
		width: 100%;
	}

	footer div.contact div.main div.item i {
		font-size: 17px;
		text-align: center;
		width: 100%;
	}

	footer div.contact div.main div.item p {
		margin-top: 5px;
	}

	
}

/* footer copyright */
@media screen and (max-width: 400px) {
	footer div.copyright {
		display: block;
		height: auto;
	}

	footer div.copyright p {
		font-size: 12px;
		padding: 10px 0;
		position: relative;
	}

}

/* footer copyright */
@media screen and (max-width: 450px) {
	footer div.copyright {
		display: block;
		height: auto;
	}

	footer div.copyright p {
		font-size: 12px;
		padding: 10px 0;
		position: relative;
	}

}

/* Menambahkan beberapa efek responsif untuk transisi */
.carousel-inner {
    position: relative;
    overflow: hidden;
}

.carousel-item {
    transition: transform 0.5s ease; /* Menambahkan transisi halus pada gambar carousel */
}

  /* LIST PRODUK */
  .produk-wrap {
    padding: 8px;
  }
  .produk-item {
    margin: 0;
    padding: 8px;
  }
  .block2 {
    box-shadow: 0px 0px 8px #d0d1d4;
  }
  
  @media (max-width: 576px) {
  .produk-item {
    margin-bottom:2px; /* Increase space between items */
  }
  .block2 {
    margin-bottom: 2px; /* Margin between blocks */
  }
 
}




/* Untuk layar dengan lebar lebih dari 850px (desktop dan layar besar) */
@media screen and (min-width: 951px) {
  .produk-item3 {
    margin-right: 20px; /* Adjust space between items for larger screens */
    padding:10px 3px;  /* Adjust space between items for larger screens */
    flex: 0 0 calc(100% / 5.8); /* Each item takes 20% of the container width */
    max-width: calc(100% /5.8); /* Ensure items do not exceed 20% width */
    box-sizing: border-box; /* Include padding and border in the width */
  }

  .block3-txt, .block2-txt {
    font-size: 14px; /* Ukuran font lebih besar di perangkat desktop */
  }
 
  .produk-wrap3 {
    margin-left: 0px;
  }
}

/* Untuk layar dengan lebar maksimal 850px (tablet dan ukuran menengah) */
@media screen and (max-width: 950px) {
  .produk-item3 {
    margin-right: 0px; /* Adjust space between items for smaller screens */
    padding: 5px 5px;   /* Adjust space between items for smaller screens */
    flex: 0 0 calc(100% / 3.5); /* Each item takes approximately 23% of the container width */
    max-width: calc(100% / 3.5); /* Ensure items do not exceed 23% width */
    box-sizing: border-box; /* Include padding and border in the width */
  }

  .block3-txt, .block2-txt {
    font-size: 13px; /* Ukuran font lebih kecil di perangkat mobile */
  }
 .newPrice {
	font-size: 12x;

}
  .produk-wrap3 {
    margin-left: 0px;
  }
}

/* Untuk layar dengan lebar maksimal 450px (smartphone kecil) */
@media screen and (max-width: 450px) {
  .produk-item3 {
    margin-right: 0px; /* Adjust space between items for smaller screens */
    padding: 5px 5px;   /* Adjust space between items for smaller screens */
    flex: 0 0 calc(100% / 2.3); /* Each item takes approximately 43% of the container width */
    max-width: calc(100% / 2.3); /* Ensure items do not exceed 43% width */
    box-sizing: border-box; /* Include padding and border in the width */
  }

  .block3-txt, .block2-txt {
    font-size: 13px; /* Ukuran font lebih kecil di perangkat mobile */
  }

  .produk-wrap3 {
    margin-left: 0px;
  }
  
  .newPrice {
	font-size: 11x;

}
}