*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth;

}

body{
  background-color:white;
}
.navbar{
  height: 70px;
  width: 100%;
  background-color: rgb(55, 152, 218);
  position: fixed;
  z-index: 10;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;

}

.logo{
  cursor: pointer;
  justify-content: center;
  display: flex;
  line-height: 70px;
  color: rgb(55, 152, 218);
}

.logo h3{
  color: rgb(255,255,255);
  letter-spacing: 1px;
  font-weight: 500;
}

/* tombol-whatsapp */
.tombol-whatsapp{
  display: flex;
  flex-direction: row;
  justify-content: center;
  position: fixed;
  bottom: 0;
  right: 0;
  margin-right: 30px;
  margin-bottom: 20px;
}

.tombol-whatsapp a{
  text-decoration: none;
  color: white;
  background-color: rgb(2, 128, 56);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 2.5em;
  transition: .3s;
}

.tombol-whatsapp a:hover{
  background-color: rgb(1, 90, 40);
  box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;

}
/* end-tombol-whatsapp */

/* detail produk */

.content{
  margin-right: 100px;
  margin-left: 100px;
}

.content .title{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 10px;
  color: rgb(88, 88, 88);
}

.content .title h2{
  font-size: 3em;
  letter-spacing: .8px;
  text-align: center;
}

.pembungkus-dp{
  display: flex;
  background-color: white;
  border: 20px solid white;
  border-radius: 15px;
  margin-bottom: 50px;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
  gap: 2rem;
}

.pembungkus-dp .gambar{
  flex-basis: 40%;
}

.pembungkus-dp .gambar img{
  width: 100%;
  height: 100%;
  border-radius: 15px;
}

.pembungkus-dp .text-dp{
  flex-basis: 60%;
  padding-top: 20px;
}


.pembungkus-dp .text-dp h3{
  color: rgb(88, 88, 88);
  font-size:  2em;
  letter-spacing: 1px;
}

hr{
  border: 1px solid rgb(55, 152, 218);
  width: 250px;
  margin-bottom: 30px;
  margin-top: 10px;
}

.pembungkus-dp .text-dp .text-dp-flex{
  display: grid;
  grid-template-areas: 'text-dp-flex-a text-dp-flex-b text-dp-flex-b text-dp-flex-b text-dp-flex-b';
  margin-bottom: 30px;
}


.pembungkus-dp .text-dp .text-dp-flex .text-dp-a p{
  margin-bottom: 10px;
  letter-spacing: .5px;
  font-weight: bold;
  color: rgb(88, 88, 88);

}

.pembungkus-dp .text-dp .text-dp-flex .text-dp-b p{
  margin-bottom: 10px;
  letter-spacing: .5px;
  color: rgb(88, 88, 88);

}

.gallery{
  background-color: white;
  padding: 15px;
  border-radius: 15px;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;

}

.gallery h3{
  text-align: center;
  color: rgb(88, 88, 88);
  margin-bottom: 10px;
  letter-spacing: 1px;
  font-size: 2em;
}

.button-pesan{
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.button-pesan a{
  text-decoration: none;
  color: white;
  padding: 8px 15px;
  width: 100%;
  background-color: rgb(246, 176, 0);
  letter-spacing: .5px;
  border-radius: 30px;
  transition: .3s;
}

.button-pesan a:hover{
  box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
  padding: 8px 20px;
  background-color: rgb(202, 122, 1);
}

.row{
  display: grid;
  grid-template-areas: 'col col col col';
  gap: 20px;

  margin-bottom: 30px;
}

.col{

  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 10px;
  transition: .3s;
}
.col:hover{
  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}
.col img{
  width: 100%;
  border-radius: 10px 10px 10px 10px;
  height: 100%;
}

.col a:hover{
  background-color: rgb(25, 121, 185);
}

/* end detail produk */

.footer{
  width: 100%;
  padding: 8px;
  background-color: rgb(18, 50, 72);
}

.kontak{
  text-align: center;
  margin-bottom: 20px;
}

.kontak h2{
  color: white;
  letter-spacing: 1px;
}

.kontak a{
  color: white;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: .8em;
  cursor: default;
}

.kontak i{
  font-size: 1em;
}

.kopirek{
  display: flex;
  justify-content: center;
  align-items: center;
}

.kopirek a{

  text-decoration:none;
  color: white;
  letter-spacing: 1px;
  font-size: .8em;
  padding: 0px 10px;
}

.keluar{
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;
}

.keluar a{
  text-decoration: none;
  color:white;
  padding: 10px 15px;
  border-radius: 5px;
  background-color: rgb(219, 54, 59);
  letter-spacing: 1px;
  transition: .3s;
}

.keluar a:hover{
  background-color: rgb(146, 36, 39);
  padding: 10px 20px;
  letter-spacing: 1.5px;
}

@media (max-width:1200px){

  .gallery h3{
    text-align: center;
    color: rgb(88, 88, 88);
    margin-bottom: 10px;
    letter-spacing: 1px;
    font-size: 1.5em;
  }
  

  .pembungkus-dp .text-dp .text-dp-flex{
    margin-bottom: 15px;
  }
.button-pesan a{
    padding: 8px 15px;
    border-radius: 30px;
    font-size: .8em;
  }
  .pembungkus-dp .text-dp h3{
    color: rgb(88, 88, 88);
    font-size:  1.5em;
    letter-spacing: 1px;
  }
  
  
  .pembungkus-dp .text-dp .text-dp-flex{
    display: grid;
    grid-template-areas: 'text-dp-flex-a text-dp-flex-a text-dp-flex-b text-dp-flex-b text-dp-flex-b';
  }
  
  
  .pembungkus-dp .text-dp .text-dp-flex .text-dp-a p{
    margin-bottom: 10px;
    font-size: .8em;
  
  }
  
  .pembungkus-dp .text-dp .text-dp-flex .text-dp-b p{
    margin-bottom: 10px;
    font-size: .8em;
  
  }
  
}

@media (max-width:840px){
  .content{
    margin-right: 50px;
    margin-left: 50px;
  }
  .pembungkus-dp{
   box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
    gap: 1rem;
    border: 10px solid white;
  }
  .pembungkus-dp .text-dp{
    padding-top: 10px;
    padding-bottom: 20px;
  }


  .pembungkus-dp .text-dp .text-dp-flex .text-dp-b p{
    margin-bottom: 5px;
  }
  .pembungkus-dp .text-dp .text-dp-flex .text-dp-a p{
    margin-bottom: 5px;
  }

  hr{
    margin-bottom: 10px;
    margin-top: 10px;
  }


}

@media (max-width:750px){

  .tombol-whatsapp a{
    text-decoration: none;
    color: white;
    background-color: rgb(2, 128, 56);
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 2em;
    transition: .3s;
  }

  .content .title h2{
    font-size: 2em;
    letter-spacing: .8px;
    text-align: center;
  }
  
  .pembungkus-dp .text-dp .text-dp-flex .text-dp-b p{
    margin-bottom: 5px;
    font-size: .7em;
  }
  .pembungkus-dp .text-dp .text-dp-flex .text-dp-a p{
    margin-bottom: 5px;
    font-size: .7em;

  }


  /* jenis payung */
  .gallery{
    background-color: white;
    padding: 15px;
    border-radius: 15px;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;

  }

  .row{
    display: grid;
    grid-template-areas: 'col col';
    gap: 15px;
  }
  
  .col{
    padding: 2px 2px 2px 2px;
    background-color: white;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 10px;
    transition: .3s;
  }
  .col:hover{
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
  }
  .col img{
    width: 100%;
    border-radius: 10px 10px 10px 10px;
    margin-bottom: 00px;
  }
  
  .col h3{
    color: rgb(88, 88, 88);
    margin-bottom: 20px;
    letter-spacing: .3px;
    font-size: 1.1em;
  }
  

  .col a{
    text-decoration: none;
    padding: 8px 15px;
    background-color: rgb(55, 152, 218);
    color: white;
    letter-spacing: .5px;
    border-radius: 30px;
    font-size: .8em;
    transition: .3s;
  }
  .col a:hover{
    background-color: rgb(25, 121, 185);
  }
}
@media (max-width:640px){
  .kopirek{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .row{
    gap: 10px;
  }

  .gallery{
    background-color: white;
    padding: 10px;
    border-radius: 15px;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;

  }

  .pembungkus-dp{
    display: flex;
    flex-direction: column;
  }
  .pembungkus-dp .text-dp .text-dp-flex .text-dp-b p{
    margin-bottom: 5px;
    font-size: .8em;
  }
  .pembungkus-dp .text-dp .text-dp-flex .text-dp-a p{
    margin-bottom: 5px;
    font-size: .8em;

  }

  .pembungkus-dp .text-dp {
    margin-left: 0px;
  }

  .pembungkus-dp .text-dp .text-dp-flex .text-dp-b p{
    margin-left: 10px;

  }
  .pembungkus-dp .text-dp .text-dp-flex .text-dp-a p{
    margin-left: 10px;
  }
  .pembungkus-dp .text-dp h3{
    margin-left: 10px;
  }
  .pembungkus-dp .text-dp hr{
    margin-left: 10px;
    margin-bottom: 20px;
    margin-top: 10px;
  }

 .button-pesan {
    width: 100%;

    display: flex;
  }


  .button-pesan a{

    padding: 8px 0px;
    width: 100%;
    text-align: center;

  }
  .pembungkus-dp .text-dp a:hover{
    padding: 0px 0px;
  }


}


@media (max-width:500px){
.content{
  margin-right: 20px;
  margin-left: 20px;
}
}

@media (max-width:450px){

  .pembungkus-dp .text-dp .text-dp-flex .text-dp-b p{
    margin-bottom: 5px;
    font-size: .6em;
    letter-spacing: .3px;
  }

  .pembungkus-dp .text-dp .text-dp-flex .text-dp-a p{
    margin-bottom: 5px;
    font-size: .6em;
    letter-spacing: .3px;
  }
  
  .button-pesan{
    margin-left: 0px;
  }


  .pembungkus-dp .text-dp{
    padding-bottom: 0px;
  }
  .pembungkus-dp{
    border: 5px solid white;
  }
  hr{
    width: 200px;
  }
}