#toTop {
     width: 50px;
     height: 50px;
     position: fixed;
     bottom: 20px;
     right: 60px;
     cursor: pointer;
     display: none;
     z-index: 999;
     background: url(../../../images/frontend/2/totopoff.png) center center no-repeat;
     border: none;
}


body {
     color: #333;
     font-family: "Raleway", sans-serif;
     padding: 0px;
     margin: 0px;
     font-size: 18px;
     background: white;
}



h1 {
     margin-top: 10px;
     font-size: 6px;
     text-transform: uppercase;
     font-weight: 300;
     text-align: center;
}

h2 {
     margin: 0px 0px 10px 0px;
     font-size: 56px;
     font-family: "Inter", sans-serif;
}



.alamat {
     font-size: 12px;
}

.alamat p {
     margin: 0px;
     padding: 0px;
}


.pad11 {
     padding: 10px 0px;
}
.pad7 {
     padding: 30px 0px;
}

.pad8 {
     padding: 60px 0px;
}

.pad9 {
     padding: 90px 0px;
}

.gap10 {
     grid-gap: 10px;
}

.gap20 {
     grid-gap: 20px;
}

.gap30 {
     grid-gap: 30px;
}

.head {
     font-size: 45px;
     font-weight: bold;
     padding-bottom: 10px;
     margin: 20px 0px;

}

.isi {
     margin-bottom: 30px;
}

.warna-text-putih {
     color: white;
}

/* ============  footer =============== */

footer {
     color: white;
}

footer a {
     color: white;
}

footer a:hover {
     color: white;
}

.overlay {
     background: rgb(0, 0, 0, 0.8);
    
}


.no-data {
     font-size: 16px;
     font-weight: bold;
     color: #de3713;
}


#logo {
     align-items: center;
     color: #333;
}



.border-bawah-grey {
     border-bottom: 1px solid #f7f3f2;
}

#baratas {
     background-color: white;
}

.background-abu {
     background-color: #F3F3F3;
}

#tombol-pencarian {
     justify-content: center;
     align-items: center;
}

#tutup-pencarian , #tombol-pencarian{
     cursor: pointer;
}

#tombol-pencarian img {
     margin-right: 5px;
}

#pencarian {
     padding: 10px 20px 50px 20px;
     height: 200px;
     background: white;
     box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.63);
        -webkit-box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.63);
        -moz-box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.63);
        position: absolute;
        z-index: 2000;
        width: 100%;
        display: none;
}

#jelajahi {
     color: #585858;
     font-size: 16px;
     margin-bottom: 30px;
}

#search {
     grid-template-columns: 3fr max-content;
}

#search > input {
     background: none;
     border-top: none;
     border-left: none;
     border-right: none;
     border-bottom: 1px solid #818181;
     padding-bottom: 20px;
}

#search > button {
     background: none;
     border: none;
}

#search ::-ms-input-placeholder { /* Edge 12-18 */
     color: #919191;
     font-weight: bold;
     font-size: 20px;
     font-family: "Inter", sans-serif;

   }
   
   #search ::placeholder {
     color: #919191;
     font-weight: bold;
     font-size: 20px;
     font-family: "Inter", sans-serif;
   }

   .tombol-whatsapp  {
     justify-content: center;
     align-items: center;
     display: flex;
  background-color: #13aa52;
  border: 1px solid #13aa52;
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-family: "Rajdhani", sans-serif;
  font-size: 20px;
  font-weight: 400;
  outline: none;
  outline: 0;
  padding: 10px 25px;
  text-align: center;
  transform: translateY(0);
  transition: transform 150ms, box-shadow 150ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.tombol-whatsapp :hover {
  box-shadow: rgba(0, 0, 0, .15) 0 3px 9px 0;
  transform: translateY(-2px);
}

.tombol-whatsapp img {
     height: 30px;
     margin-right: 10px;
}

@media (max-width: 740px) {
     .sticky {
          position: relative;
     }

     .wrapper {
          margin-left: 10px;
          margin-right: 10px;
     }

     .alamat {
          text-align: center;
     }


     .bank li {
          text-align: center;
     }


     #logo {
          margin: auto auto;
     }

     h1 {
          text-align: center;
     }
  

}

@media (min-width: 741px) {
     #logo img {
          height: 50px;
     
     }
     .bank {
          display: flex;
     }

     .bank li {
          margin-right: 10px;
     }

     .wrapper {
          margin-left: 10px;
          margin-right: 10px;
     }


     .sticky {
          position: -webkit-sticky;
          /* Safari */
          position: sticky;
          top: 0;
          z-index: 1000;
     }

     #atas {
          grid-template-columns: max-content 3fr max-content;
          align-self: center;
     }

}

@media (min-width: 992px) {
     .wrapper {
          margin-right: auto;
          margin-left: auto;
          max-width: 1170px;
     }
}