:root {
  --biru: #176BB3;
  --kuning: #FFDD00;
  --abu: #a0a0a0;
  --fontfamily: Arial, Helvetica, sans-serif;
  --putih: #f1f1f1;
  --abuterang: lightgray;
  --merah: #EE4B2B;
  --hitam: #353935;
  --hitamcharcoal: #36454F;
}

* {
  margin: 0;
  padding: 0;
  font-family: var(--fontfamily);
}
a {
  text-decoration: none;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  margin: auto;
  z-index: 2;
  right: 0;
  left: 0;
  background-color: white;
}

/* custom radio */
.radio-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio-container:hover input ~ .checkmark {
  background-color: var(--abu);
}

/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio-container .checkmark:after {
 	top: 9px;
	left: 9px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: white;
}

/* header */
.header-wrapper {
  border-bottom: 3px solid var(--abu);
}

/* header - nav */
.header-wrapper .nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.header-wrapper .nav .logo {
  padding: 5px;
}
.header-wrapper .nav .logo img {
  width: 70px;
  max-width: 100px;
}
.header-wrapper .nav .nav-main {
  display: none;
}
.header-wrapper .nav .nav-search {
  width: 60%;
  margin-top: 5px;
}
.header-wrapper .nav .nav-search div {
  position: relative;
  padding: 10px;
  border: 1px solid var(--abu);
  border-radius: 5px;
}
.header-wrapper .nav .nav-search input {
  width: 100%;
  border: none;
}
.header-wrapper .nav .nav-search input:focus {
  outline: none;
}
.header-wrapper .nav .nav-search button {
  position: absolute;
  right: 0;
  margin-top: -10px;
  padding: 10px 15px;
  background: none;
  border: none;
}
.header-wrapper .nav .akun {
  display: flex;
  align-items: center;
}
.header-wrapper .nav .akun button {
  display: none;
}
.header-wrapper .nav .akun div i {
  font-size: 25px;
  margin-right: 20px;
}

/* header - search */
.header-wrapper .search {
  display: none;
}

/* header - nav bottom */
.header-wrapper .nav-bottom {
  width: 100%;
  display: flex;
  justify-content: space-between;
  background-color: var(--putih);
  border-top: 3px solid var(--abu);
  position: fixed;
  bottom: 0;
}
.header-wrapper .nav-bottom div {
  margin-top: 5px;
  text-align: center;
  padding: 8px;
  text-transform: capitalize;
}
.header-wrapper .nav-bottom div i {
  font-size: 1.5rem;
  margin-bottom: 5px;
}

/* content */
.content-wrapper .banner {
  height: 250px;
  margin-top: 70px;
}
.content-wrapper .banner .swiper {
  width: 100%;
  height: 100%;
}
.content-wrapper .banner .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.content-wrapper .banner .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* kategori */
.content-wrapper .kategori {
  background-color: var(--putih);
  margin-top: 20px;
  padding-bottom: 20px;
}
.content-wrapper .kategori h3 {
  text-transform: capitalize;
  padding: 20px 0;
  text-align: center;
  font-size: 2rem;
  color: var(--hitam);
}
.content-wrapper .kategori .kategori-list {
  display: grid;
  grid-template-columns: auto auto;
  row-gap: 10px;
  justify-content: space-evenly;
}
.content-wrapper .kategori .kategori-list div {
  width: 100%;
}
.content-wrapper .kategori .kategori-list div img {
  width: 180px;
}
.content-wrapper .kategori .kategori-list div p {
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  margin-top: 10px;
}

/* content produk */
.content-wrapper .produk {
  margin-top: 20px;
  padding-bottom: 20px;
}
.content-wrapper .produk h3 {
  text-align: center;
  padding: 20px 0;
  text-transform: capitalize;
  font-size: 2rem;
  color: var(--hitam);
}
.content-wrapper .produk .produk-list {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-evenly;
  row-gap: 15px;
}
.content-wrapper .produk .produk-list img {
  width: 180px;
}
.content-wrapper .produk .produk-list p {
  text-align: center;
  margin-top: 5px;
}
.content-wrapper .produk .produk-pagination {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.content-wrapper .produk .produk-pagination div {
  border: 1px solid var(--abu);
  padding: 5px 10px;
  margin: 5px;
}

/* cabang */
.content-wrapper .cabang {
  background-color: var(--putih);
  margin-top: 20px;
  padding-bottom: 40px;
}
.content-wrapper .cabang h3 {
  text-align: center;
  text-transform: capitalize;
  padding: 20px 0;
}
.content-wrapper .cabang .cabang-list {
  display: grid;
  grid-template-columns: auto;
  justify-content: center;
  row-gap: 20px;
  column-gap: 30px;
}
.content-wrapper .cabang .cabang-list div {
  width: 350px;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 5px;
}
.content-wrapper .cabang .cabang-list div:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.content-wrapper .cabang .cabang-list h4 {
  text-align: center;
  text-transform: capitalize;
  background-color: var(--biru);
  color: var(--putih);
  padding: 10px 0;
  border-radius: 5px 5px 0 0;
}
.content-wrapper .cabang .cabang-list div p {
  padding: 5px 10px;
}

/* produk kategori */
.content-wrapper .produk .produk-title h3 {
  text-align: center;
}
.content-wrapper .produk .produk-title a {
  color: var(--merah);
}

/* cara pesan */
.content-wrapper .cara-pesan {
  margin-top: 20px;
  padding-bottom: 40px;
}
.content-wrapper .cara-pesan h3 {
  font-size: 2rem;
  color: var(--hitam);
  text-align: center;
  text-transform: capitalize;
  margin-bottom: 30px;
}
.content-wrapper .cara-pesan .cara-pesan-content {
  width: 100%;
}
.content-wrapper .cara-pesan .cara-pesan-content img {
  width: 100%;
}
.content-wrapper .cara-pesan .cara-pesan-content > div {
  margin-bottom: 20px;
}
.content-wrapper .cara-pesan .collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  border-radius: 5px 5px 0 0;
}  
.content-wrapper .cara-pesan .active, .collapsible:hover {
  background-color: #555;
}  
.content-wrapper .cara-pesan .collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}  
.content-wrapper .cara-pesan .active:after {
  content: "\2212";
}  
.content-wrapper .cara-pesan .content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: var(--abuterang);
  margin-bottom: 15px;
  border-radius: 0 0 5px 5px;
}
.content-wrapper .cara-pesan .content p {
  padding: 18px;
}

/* produk detail */
.content-wrapper .produk-detail .produk {
  margin: 20px 0;
}
.content-wrapper .produk-detail .produk .container {
  display: flex;
}
.content-wrapper .produk-detail .produk .container .image {
  width: 50%;
  margin-right: 10px;
}
.content-wrapper .produk-detail .produk .container .image img {
  width: 100%;
}
.content-wrapper .produk-detail .produk .container .detail {
  width: 50%;
  margin-left: 10px;
}
.content-wrapper .produk-detail .produk .container .detail .nama-produk {
  font-weight: bold;
  font-size: 30px;
  color: var(--hitam);
}
.content-wrapper .produk-detail .produk .container .detail .rating {
  font-size: 25px;
  padding-top: 20px;
}
.content-wrapper .produk-detail .produk .container .detail .rating i {
  color: var(--kuning);
}
.content-wrapper .produk-detail .produk .container .detail .deskripsi-singkat {
  font-style: italic;
  font-size: 15px;
  color: var(--hitamcharcoal);
  padding-top: 20px;
}
.content-wrapper .produk-detail .produk .container .detail .harga {
  font-weight: bolder;
  color: var(--hitam);
  padding-top: 20px;
}
.content-wrapper .produk-detail .produk .container .detail form {
  padding-top: 20px;
}
.content-wrapper .produk-detail .produk .container .detail form > div {
  margin-top: 10px;
}
.content-wrapper .produk-detail .produk .container .detail form .panjang-lebar {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.content-wrapper .produk-detail .produk .container .detail form .panjang-lebar .panjang {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-right: 10px;
  position: relative;
}
.content-wrapper .produk-detail .produk .container .detail form .panjang-lebar .panjang label {
  font-weight: bold;
  color: var(--hitamcharcoal);
  margin-bottom: 5px;
}
.content-wrapper .produk-detail .produk .container .detail form .panjang-lebar .panjang input {
  padding: 10px;
  outline: none;
  border: 2px solid var(--abuterang);
}
.content-wrapper .produk-detail .produk .container .detail form .panjang-lebar .lebar {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-left: 10px;
  position: relative;
}
.content-wrapper .produk-detail .produk .container .detail form .panjang-lebar .lebar label {
  font-weight: bold;
  color: var(--hitamcharcoal);
  margin-bottom: 5px;
}
.content-wrapper .produk-detail .produk .container .detail form .panjang-lebar .lebar input {
  padding: 10px;
  outline: none;
  border: 2px solid var(--abuterang);
}
.content-wrapper .produk-detail .produk .container .detail form .panjang-lebar .panjang span,
.content-wrapper .produk-detail .produk .container .detail form .panjang-lebar .lebar span {
  background-color: var(--abuterang);
  width: 50px;
  position: absolute;
  right: 0;
  bottom: 0;
  text-align: center;
  height: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 2px solid var(--abuterang);
}
.content-wrapper .produk-detail .produk .container .detail form .bahan {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.content-wrapper .produk-detail .produk .container .detail form .bahan label {
  font-weight: bold;
  color: var(--hitamcharcoal);
  margin-bottom: 5px;
}
.content-wrapper .produk-detail .produk .container .detail form .bahan select {
  padding: 10px;
  outline: none;
  border: 2px solid var(--abuterang);
}
.content-wrapper .produk-detail .produk .container .detail form .cutting {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.content-wrapper .produk-detail .produk .container .detail form .cutting label {
  font-weight: bold;
  color: var(--hitamcharcoal);
  margin-bottom: 5px;
}
.content-wrapper .produk-detail .produk .container .detail form .cutting select {
  padding: 10px;
  outline: none;
  border: 2px solid var(--abuterang);
}
.content-wrapper .produk-detail .produk .container .detail form .keterangan {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
.content-wrapper .produk-detail .produk .container .detail form .keterangan label {
  font-weight: bold;
  color: var(--hitamcharcoal);
  margin-bottom: 5px;
}
.content-wrapper .produk-detail .produk .container .detail form .keterangan textarea {
  padding: 10px;
  outline: none;
  border: 2px solid var(--abuterang);
}
.content-wrapper .produk-detail .produk .container .detail form .upload {
  width: 100%;
  /* border: 1px solid var(--abuterang); */
  background-color: var(--putih);
  margin-top: 20px;
  height: 150px;
}
.content-wrapper .produk-detail .produk .container .detail form .upload .tablink {
  float: left;
  border-top: none;
  border-right: none;
  border-left: none;
  border-bottom: 1px solid var(--abuterang);
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 50%;
  background: none;
}

.content-wrapper .produk-detail .produk .container .detail form .upload .tablink:hover {
  background-color: var(--abuterang)
}

/* Style the tab content (and add height:100% for full page content) */
.content-wrapper .produk-detail .produk .container .detail form .upload .tabcontent {
  display: none;
  padding: 70px;
  height: 100%;
  text-align: center;
}
.content-wrapper .produk-detail .produk .container .detail form .upload .tabcontent p {
  font-size: 12px;
}
.content-wrapper .produk-detail .produk .container .detail form .upload .tabcontent input {
  border: 1px solid var(--abu);
  border-radius: 3px;
  margin-top: 10px;
  padding: 5px;
}
.content-wrapper .produk-detail .produk .container .detail form .jumlah {
  margin-top: 20px;
}
.content-wrapper .produk-detail .produk .container .detail form .jumlah p {
  font-weight: bold;
  margin-bottom: 5px;
  color: var(--hitamcharcoal);
}
.content-wrapper .produk-detail .produk .container .detail form .jumlah > div {
  /* background-color: red; */
  position: relative;
  border: 2px solid var(--abuterang);
  padding: 5px 0;
}
.content-wrapper .produk-detail .produk .container .detail form .jumlah div input {
  text-align: center;
  outline: none;
  border: none;
  width: 100%;
}
.content-wrapper .produk-detail .produk .container .detail form .jumlah .minus {
  position: absolute;
  top: 0;
  left: 0;
  padding: 7px 15px;
  border: none;
  background-color: lightblue;
}
.content-wrapper .produk-detail .produk .container .detail form .jumlah .plus {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 15px;
  padding: 7px 15px;
  border: none;
  background-color: lightblue;
}
.content-wrapper .produk-detail .produk .container .detail form .jumlah .minus:hover,
.content-wrapper .produk-detail .produk .container .detail form .jumlah .plus:hover {
  background-color: var(--biru);
  color: var(--putih);
}
.content-wrapper .produk-detail .produk .container .detail form .pesanan {
  margin-top: 20px;
  display: grid;
  grid-template-columns: auto auto;
}
.content-wrapper .produk-detail .produk .container .detail form .pesanan > div {
  border: 1px solid var(--abuterang);
  text-align: center;
  padding: 10px;
  font-size: small;
}
.content-wrapper .produk-detail .produk .container .detail form .tombol-beli button {
  width: 100%;
  padding: 15px;
  font-size: 20px;
  background-color: var(--biru);
  color: var(--putih);
  border-color: var(--abuterang);
}
/* produk detail - deskripsi */
/* desain tab */
.content-wrapper .produk-detail .deskripsi .tab {
  overflow: hidden;
  /* border: 1px solid lightcoral;
  background-color: lightblue; */
}

/* desain tombol dalam tab */
.content-wrapper .produk-detail .deskripsi .tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  width: 200px;
  font-weight: bold;
  color: var(--abu);
}

/* Mengubah warna background tombol ketika hover */
.content-wrapper .produk-detail .deskripsi .tab button:hover {
  background-color: lightblue;
}

/* Buat link tab aktif */
.content-wrapper .produk-detail .deskripsi .tab button.active {
  background-color: lightblue;
  color: var(--hitam);
}

/* desain konten tab */
.content-wrapper .produk-detail .deskripsi .deskripsi-tab-content {
  display: none;
  padding: 6px 12px;
  background-color: lightblue;
  border-top: none;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* cart */
.content-wrapper .cart .list {
  display: flex;
  justify-content: space-between;
  background-color: var(--putih);
  margin-bottom: 5px;
}
.content-wrapper .cart .list-title {
  font-weight: bold;
}
.content-wrapper .cart .list > div {
  width: 15%;
  text-align: center;
  padding: 10px;
}
.content-wrapper .cart .list .title-produk {
  width: 45%;
  text-align: center;
}
.content-wrapper .cart .list .title-aksi,
.content-wrapper .cart .list .aksi {
  width: 5%;
}
.content-wrapper .cart .list {
  background-color: var(--putih);
  display: flex;
  justify-content: space-between;
}
.content-wrapper .cart .list > div {
  width: 15%;
  text-align: center;
}
.content-wrapper .cart .list .list-produk {
  width: 45%;
}
.content-wrapper .cart .list .list-produk .container {
  display: flex;
}
.content-wrapper .cart .list .list-produk .container img {
  width: 100px;
  margin-right: 10px;
}
.content-wrapper .cart .list .harga,
.content-wrapper .cart .list .jumlah,
.content-wrapper .cart .list .harga-total,
.content-wrapper .cart .list .aksi {
  display: flex;
  align-items: center;
  justify-content: center;
}
.content-wrapper .cart .list .jumlah p {
  position: relative;
}
.content-wrapper .cart .list .jumlah input {
  text-align: center;
  padding: 7px;
  border: none;
}
.content-wrapper .cart .list .jumlah .minus {
  position: absolute;
  top: 0;
  left: 0;
  padding: 7px 15px;
  border: none;
  background-color: lightblue;
}
.content-wrapper .cart .list .jumlah .plus {
  position: absolute;
  top: 0;
  right: 0;
  padding: 7px 15px;
  border: none;
  background-color: lightblue;
}
.content-wrapper .cart .list .aksi button {
  border: none;
  color: var(--merah);
}
/* cart - footer */
.content-wrapper .cart .list-footer {
  display: flex;
  justify-content: end;
  padding: 10px 0;
  background-color: var(--putih);
  margin-top: 20px;
}
.content-wrapper .cart .list-footer > div {
  display: flex;
  align-items: center;
}
.content-wrapper .cart .list-footer > div span {
  color: var(--merah);
  font-weight: bold;
  font-size: x-large;
  margin-right: 20px;
}
.content-wrapper .cart .list-footer button {
  padding: 10px 20px;
  width: 200px;
  margin-right: 20px;
  background-color: var(--biru);
  color: var(--putih);
  border: 2px solid var(--abuterang);
  border-radius: 4px;
}

/* appdua */
/* checkout */
.appdua-wrapper .checkout {
  margin-top: 20px;
}
.appdua-wrapper .checkout .alamat {
  background-color: var(--abuterang);
  padding: 15px 25px 15px 15px;
}
.appdua-wrapper .checkout .alamat h3 {
  margin-bottom: 20px;
}
.appdua-wrapper .checkout .alamat form {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 15px;
}
.appdua-wrapper .checkout .alamat form .alamat-detail {
  grid-column: 1 / 4;
}
.appdua-wrapper .checkout .alamat form input,
.appdua-wrapper .checkout .alamat form textarea {
  width: 100%;
  border: 1px solid #000;
  padding: 7px 0 7px 7px;
  border: 1px solid var(--abu);
  outline: none;
}

/* appdua - checkout cart */
.appdua-wrapper .checkout .cart {
  background-color: var(--abuterang);
  padding: 20px;
  margin-top: 10px;
}
.appdua-wrapper .checkout .cart h3 {
  margin-bottom: 20px;
}
.appdua-wrapper .checkout .cart .list {
  display: flex;
  justify-content: space-between;
  background-color: var(--putih);
  margin-bottom: 5px;
}
.appdua-wrapper .checkout .cart .list > div {
  width: 15%;
  text-align: center;
  padding: 10px;
}
.appdua-wrapper .checkout .cart .list .aksi {
  width: 5%;
}
.appdua-wrapper .checkout .cart .list {
  background-color: var(--putih);
  display: flex;
  justify-content: space-between;
}
.appdua-wrapper .checkout .cart .list > div {
  width: 15%;
  text-align: center;
}
.appdua-wrapper .checkout .cart .list .list-produk {
  width: 45%;
}
.appdua-wrapper .checkout .cart .list .list-produk .container {
  display: flex;
}
.appdua-wrapper .checkout .cart .list .list-produk .container img {
  width: 100px;
  margin-right: 10px;
}
.appdua-wrapper .checkout .cart .list .harga,
.appdua-wrapper .checkout .cart .list .jumlah,
.appdua-wrapper .checkout .cart .list .harga-total,
.appdua-wrapper .checkout .cart .list .aksi {
  display: flex;
  align-items: center;
  justify-content: center;
}
.appdua-wrapper .checkout .cart .list .aksi button {
  border: none;
  color: var(--merah);
}
.appdua-wrapper .checkout .opsi {
  background-color: var(--abuterang);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  /* background-color: red; */
  margin-top: 10px;
}
.appdua-wrapper .checkout .opsi h3 {
  margin-bottom: 20px;
}
.appdua-wrapper .checkout .opsi .pengiriman {
  width: 100%;
}
.appdua-wrapper .checkout .opsi .pengiriman .list .radio-container {
  position: relative;
}
.appdua-wrapper .checkout .opsi .pengiriman .list p {
  position: absolute;
  top: 0;
  left: 200px;
}
.appdua-wrapper .checkout .opsi .pembayaran {
  width: 100%;
}
.appdua-wrapper .checkout .opsi .pembayaran .list {
  display: grid;
  grid-template-columns: auto auto auto;
}
.appdua-wrapper .checkout .opsi .pembayaran .list .radio-container {
  position: relative;
}
.appdua-wrapper .checkout .total {
  display: flex;
  justify-content: end;
  background-color: var(--abuterang);
  padding: 20px;
  margin-top: 10px;
}
.appdua-wrapper .checkout .total > div {
  width: 15%;
}
.appdua-wrapper .checkout .total p {
  padding: 5px;
}
.appdua-wrapper .checkout .total .nominal {
  text-align: right;
}
.appdua-wrapper .checkout .total .nominal .nominal-text {
  color: var(--merah);
  font-size: x-large;
  font-weight: bold;
}
.appdua-wrapper .checkout .btn-pesan {
  background-color: var(--abuterang);
  border-top: 1px solid var(--abu);
  text-align: right;
  padding: 10px 20px;
}
.appdua-wrapper .checkout .btn-pesan button {
  padding: 10px 30px;
  border: 1px solid var(--biru);
  background-color: lightblue;
  border-radius: 3px;
}

/* appdua invoice */
.appdua-wrapper .invoice {
  background-color: var(--abuterang);
  margin-top: 20px;
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
}
.appdua-wrapper .invoice .invoice-container {
  /* background-color: red; */
  width: 40%;
}
.appdua-wrapper .invoice .invoice-container .bayar {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background-color: #fff;
  margin-top: 20px;
  border-bottom: 2px groove var(--abuterang);
}
.appdua-wrapper .invoice .invoice-container .tempo {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background-color: #fff;
  border-bottom: 2px groove var(--abuterang);
}
.appdua-wrapper .invoice .invoice-container .bank {
  background-color: #fff;
  padding: 20px;
  border-bottom: 1px groove var(--abuterang);
}
.appdua-wrapper .invoice .invoice-container .bank img {
  margin-bottom: 20px;
}
.appdua-wrapper .invoice .invoice-container .bank p {
  font-size: small;
  margin-bottom: 5px;
}
.appdua-wrapper .invoice .invoice-container .bank span {
  color: var(--merah);
  font-weight: bold;
  margin-right: 20px;
}
.appdua-wrapper .invoice .invoice-container .bank a {
  text-transform: uppercase;
  font-weight: bold;
  color: lightskyblue;
}
.appdua-wrapper .invoice .invoice-container .btn {
  background-color: #fff;
  text-align: center;
  padding: 10px;
}
.appdua-wrapper .invoice .invoice-container .btn button {
  width: 60%;
  padding: 10px;
  background-color: lightskyblue;
  border: 1px solid var(--biru);
  text-transform: uppercase;
  font-weight: bold;
  color: var(--hitamcharcoal);
}

/* footer */
.footer-wrapper {
  background-color: var(--putih);
  padding-bottom: 20px;
  margin-top: 20px;
}
.footer-wrapper .footer-list {
  width: 80%;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
.footer-wrapper .footer-list > div {
  padding: 20px 0;
  width: 25%;
} 
.footer-wrapper .footer-list h6 {
  font-size: 15px;
  text-transform: capitalize;
}
.footer-wrapper .footer-list .abata-list {
  margin-top: 10px;
}
.footer-wrapper .footer-list .abata-list > div {
  font-size: 13px;
  margin-top: 5px;
}
.footer-wrapper .footer-list .bantuan-list {
  margin-top: 10px;
}
.footer-wrapper .footer-list .bantuan-list > div {
  font-size: 13px;
  margin-top: 5px;
}
.footer-wrapper .footer-list .medsos-list {
  margin-top: 10px;
}
.footer-wrapper .footer-list .medsos-list > div {
  font-size: 13px;
  margin-top: 5px;
}
.footer-wrapper .footer-list .medsos-list i {
  width: 20px;
}
.footer-wrapper .footer-list .pembayaran-list {
  margin: 18px 0;
  display: flex;
  flex-wrap: wrap;
}
.footer-wrapper .footer-list .pembayaran-list div {
  margin-right: 10px;
}
.footer-wrapper .footer-list .pengiriman-list {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}
.footer-wrapper .footer-list .pengiriman-list div {
  margin-right: 10px;
}
.footer-wrapper hr {
  border: 1px ridge var(--abuterang);
  width: 80%;
  margin: auto;
}
.footer-wrapper .footer-bottom {
  text-align: center;
  margin-top: 20px;
  font-size: 12px;
  color: var(--abu);
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  /* content produk */
  .content-wrapper .produk .produk-list {
    grid-template-columns: auto auto auto;
  }

  /* content cabang */
  .content-wrapper .cabang .cabang-list {
    grid-template-columns: auto auto;
  }
  .content-wrapper .cabang .cabang-list div {
    width: 300px;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .header-wrapper {
    width: 90%;
    margin: auto;
  }

  /* header - nav main */
  .header-wrapper .nav .nav-main {
    display: flex;
    justify-content: start;
    align-items: center;
    width: 80%;
  }
  .header-wrapper .nav .nav-main div {
    padding: 10px;
    font-size: 12px;
    font-weight: bold;
    color: var(--biru);
    text-transform: uppercase;
  }
  .header-wrapper .nav .nav-main div a {
    text-decoration: none;
  }
  .header-wrapper .nav .akun button {
    display: block;
    border: 1px solid var(--abu);
    padding: 8px 12px;
    border-radius: 3px;
    text-transform: uppercase;
    margin-left: 5px;
  }
  .header-wrapper .nav .akun .register {
    background: none;
  }
  .header-wrapper .nav .akun .login {
    background-color: var(--biru);
    color: azure;
  }
  .header-wrapper .nav .nav-search {
    display: none;
  }

  /* header - search */
  .header-wrapper .search {
    display: block;
    margin-bottom: 10px;
  }
  .header-wrapper .search div {
    position: relative;
    padding: 10px;
    border: 1px solid var(--abu);
    border-radius: 5px;
  }
  .header-wrapper .search input {
    width: 100%;
    border: none;
  }
  .header-wrapper .search input:focus {
    outline: none;
  }
  .header-wrapper .search button {
    position: absolute;
    right: 0;
    margin-top: -10px;
    padding: 10px 15px;
    background: none;
    border: none;
  }

  /* header - nav bottom */
  .header-wrapper .nav-bottom {
    display: none;
  }

  /* content */
  .content-wrapper {
    width: 90%;
    margin: auto;
    margin-top: 130px;
  }

  /* content kategori */
  .content-wrapper .kategori .kategori-list {
    grid-template-columns: auto auto auto auto;
  }
  .content-wrapper .kategori .kategori-list div img {
    width: 150px;
  }

  /* content produk */
  .content-wrapper .produk .produk-list {
    justify-content: space-between;
    grid-template-columns: auto auto auto auto;
  }
  .content-wrapper .produk .produk-list img {
    width: 170px;
  }

  /* content cabang */
  .content-wrapper .cabang .cabang-list {
    grid-template-columns: auto auto auto;
    row-gap: 10px;
    column-gap: 10px;
  }
  .content-wrapper .cabang .cabang-list div {
    width: 220px;
  }

  /* cara pesan */
  .content-wrapper .cara-pesan .cara-pesan-content {
    display: flex;
    justify-content: space-between;
  }
  .content-wrapper .cara-pesan .cara-pesan-content .img {
    display: flex;
    align-items: center;
    margin-right: 20px;
  }
  .content-wrapper .cara-pesan .cara-pesan-content > div {
    width: 50%;
  }
  .content-wrapper .cara-pesan .cara-pesan-content > div > div {
    margin-left: 20px;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .header-wrapper {
    width: 80%;
    margin: auto;
  }

  /* header - nav */
  .header-wrapper .nav .nav-main div {
    font-size: 14px;
  }

  /* content */
  .content-wrapper {
    width: 80%;
    margin: auto;
    margin-top: 140px;
  }

  /* content - kategori */
  .content-wrapper .kategori .kategori-list div img {
    width: 200px;
  }

  /* content produk */
  .content-wrapper .produk .produk-list img {
    width: 200px;
  }

  /* content cabang */
  .content-wrapper .cabang .cabang-list {
    row-gap: 20px;
    column-gap: 30px;
  }
  .content-wrapper .cabang .cabang-list div {
    width: 250px;
  }

  /* appdua content */
  .appdua-wrapper {
    width: 80%;
    margin: auto;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  /* content - kategori */
  .content-wrapper .kategori .kategori-list div img {
    width: 230px;
  }

  /* content produk */
  .content-wrapper .produk .produk-list {
    justify-content: space-between;
    grid-template-columns: auto auto auto auto auto auto;
  }
  .content-wrapper .produk .produk-list img {
    width: 175px;
  }
}