@font-face {
    font-family: clicker-script;
    src: url(../font/clickerscript.ttf) ;
}

@font-face{
  font-family: questrial;
  src: url(../font/questrial.ttf);
}

.body{
  background-color: #efe2b2;
  color:#270d0b;
  font-family: "questrial";
}


.font-clicker{
  font-family: "clicker-script";
}

.judul{
  font-size:50pt
}


/* section 1 */

/* sudah tidak bundar lagi :v */
.img-round{
    border-radius: 100%;
    border: #270d0b solid 14px;
    object-fit: cover;
    height: 450px;
    width: 450px;
    margin-left: -50%;
    margin-top: 26%;
}

.paragraph-1{
    margin-top: 9%!important;
    float: right;
    background-color: #270d0b;
    color: #efe2b2;
    /* border-radius: 20px; */
    border-radius: 5px;
    display: inline-block;
    height:20%;
}
.paragraph-1 p{
    margin: 4%;
    padding: 5%;
    font-size: 20pt;
}

.paragraph-1 h2{
    font-size: 79pt;
    margin: 1%;
}



@media (max-width: 540px){
    .img-round{
      border-radius: 25px;
      margin-left: 0;
      border: #270d0b solid 10px;
      object-fit: cover;
      height: 250px;
      width: 100%;
      margin-top:-10%;
      
  }

}


/* section 2 */

.card{
    background-color: #270d0b !important;
    margin:1.59%;  
    border-radius: none!important;
    color: #efe2b2;
}

.a-card{
  color: #efe2b2;
  text-decoration: none;
}

.a-card:hover{
  color:#f0d069;
}

.img-cookie{
    object-fit: cover;
    margin-top:5%;
    height: 300px;
    width: 192px;
}

.name-cookie{
    margin-top:5%;
}

.price-cookie{
    margin-top:-1;
}

.input-txt{
    background-color: #efe2b2;
    border:none;
    border-radius: 5px;
    width: 20%;
}


.btn-add-cart{
  margin-left:30%;
  background-color: #efe2b2;
  padding: 3%;
  border-radius: 2px;
  color: #270d0b;
}

.btn-add-cart:hover{
  transition:0.5s;
  color: #f0d069;
  background-color: #270d0b;
}



.btn-plus-minus{
    background: transparent;
    border:none;
    color: #efe2b2;
}

.txt-info{
  margin-bottom: 5%;
}

.show-kilat{
  display: none;
}

@media screen and (max-width: 540px) {
    .card{
      margin:0;
      margin-bottom: 2%;
    }
    .img-cookie {
      margin-top:5%;
      height: 110px;
      width: 110px;
      margin-bottom: 5%;
    }

    .txt-info{
      width:70% !important;
    }

    .cookie-card-image{
      width: 30%!important;
    }

    .promo-kilat{
      display: none;
    }

    .shopping{
      margin-bottom: 2%;
    }

    .txt-promo-cart{
      display: none;
    }
}


  /* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
  }
  
  ::-webkit-scrollbar-track {
    background-color:#270d0b;
    -webkit-border-radius: 10px;
    border-radius: 10px;
  }
  
  ::-webkit-scrollbar-thumb {
    background:#efe2b2; 
    border: #270d0b 1px solid;
    border-radius:15px;
  }
  
  .owl-carousel .owl-stage, .owl-carousel.owl-drag .owl-item {
    -ms-touch-action: auto;
        touch-action: auto;
    }

/* section 3 */

.section-cookie{
    overflow-x: hidden;
    background-color:#270d0b!important;
    color: #efe2b2!important;
}

.section-center{
    display: inline-block;
    padding-top:3%;
}

.shopping{
    color: #270d0b;
    background:#efe2b2;
    border-radius:2px;
    padding:2%;
    width: 110px;
    text-align: left;
}

.txt-promo{
    margin-top:-0.5;
    margin-left: 4%;
}



.background-brown{
  background-color: #270d0b !important;
  color: #efe2b2!important;
  width: 14%;
  margin-bottom: 5%;
}

.gto-cart:hover{
  color: #f0d069;
}

.txt-promo-cart{
  font-size: 13pt;
}

  /* header */
  
  .header {
    top: 0;
    background-color: #efe2b2;
    box-shadow: 2px 2px 8px 0 #270d0b;
    position: fixed;
    color: #270d0b !important; 
    width: 100%;
    z-index: 3;
  }

  .header a{
    color: #270d0b !important; 
  }
  
  .header ul {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #270d0b !important; 
    overflow: hidden;
    background-color: #270d0b;
  }
  
  .header li a {
    display: block;
    color: #270d0b !important; 
    padding: 20px 20px;
    text-decoration: none;
  }
  
  .header li a:hover,
  .header .menu-btn:hover {
    background-color: #f0d069;
  }
  
  .header .logo {
    display: block;
    float: left;
    font-size: 15pt;
    padding: 5px 10px;
    text-decoration: none;
  }
  
  /* menu */
  
  .header .menu {
    background-color: #efe2b2;
    color: #270d0b;
    border: none;
    clear: both;
    margin-right: 5%;
    max-height: 0;
    transition: max-height .2s ease-out;
  }

  .menu-contact1{
    margin-left: 120px;
    margin-right: 40px
  }
  
  .menu-contact{
    margin-left: 5px;
    margin-right: 40px
  }

  .menu-contact:hover{
    color: #f0d069!important;
  }

  .menu-contact1:hover{
    color: #f0d069!important;
  }
  /* menu icon */
  
  .header .menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 28px 20px;
    position: relative;
    user-select: none;
  }
  
  .header .menu-icon .navicon {
    background:#270d0b !important; 
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
  }
  
  .header .menu-icon .navicon:before,
  .header .menu-icon .navicon:after {
    background: #270d0b !important;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
  }
  
  .header .menu-icon .navicon:before {
    top: 5px;
  }
  
  .header .menu-icon .navicon:after {
    top: -5px;
  }
  
  /* menu btn */
  
  .header .menu-btn {
    display: none;
  }
  
  .header .menu-btn:checked ~ .menu {
    max-height: 240px;
  }
  

  .header .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
  }
  
  .header .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
  }
  
  .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
  .header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
  }
  
  /* 48em = 768px */
  
  @media (min-width: 48em) {
    .header li {
      float: left;
    }
    .header li a {
      padding: 20px 30px;
    }
    .header .menu {
      clear: none;
      float: right;
      max-height: none;
    }
    .header .menu-icon {
      display: none;
    }

    
  }


  /* footer */

  .footer{
    background-color: #270d0b;
    color: #efe2b2;
    padding-top: 4%;
  }

  .txt-paragraph-footer{
    padding-left:15%;
    padding-top: 5%;
    padding-right: 15%;
    font-size: 14pt;
    margin-bottom: 10%;
  }

  .menu-footer{
    padding-top: 5%;
    list-style-type: none;
    margin-bottom: 10%;
   
  }

  .inp-footer{
    padding: 2%;
    width: 100%;
    border-radius: 15px;
  }

  .btn-footer{
    border-radius: 10px;
    margin-bottom: 10%;
  }
 
  /* cart */

  .cart{
    background-color: #270d0b;
    color: #efe2b2;
    margin-top: 10%;
    margin-bottom: 10%;
    border-radius:none;
  }

  .cart-section-search{
    background-color: #270d0b;
    color: #efe2b2;
    margin-top: 0%;
    margin-bottom:10%;
  }

  .cart-section-search .container{
    padding-top:6%;
    padding-bottom: 6%;
  }

  .cart .container{
    padding-top:6%;
    padding-bottom: 6%;
  }

  .hr-separator{
    border-top:5px solid #efe2b2!important;
  }

  .fl-right{
    text-align: right;
  }

  .media-cookie{
    margin-right: 2%;
    margin-left: 2%;
    height: 300px;
    width: 300px;
    object-fit: cover;
  }

  

  @media (max-width: 540px){
    
    #cookie-1{
      display: none;
    }

    .media-cookie{
      margin-right: 0;
      margin-left: 0;
    }

    #cookie-2{
      display: none;
    }

    .cart-section-search{
      margin-top: 10%;
    }

}


/* search */

 .img-search{
   height: 400px;
   width: 400px;
   object-fit: cover;
  
 }

 .img-search:hover{
   transform: scale(1.2);
   transition: 0.8s;
   cursor: pointer;
 }


 /* cart */
 .cookie-cart{
   height: 120px;
   width: 120px;
   object-fit: cover;
 }

 .ck-info, .ck-info-harga{
   padding-top: 3%;
 }

 .ck-info-harga{
   text-align: center;
 }

 .payment-box{
    padding: 5%;
   background-color: #270d0b;
   color: #efe2b2;
 }

 .btn-checkout{
   background-color: #efe2b2!important;
   color: #270d0b!important;
 }

 .btn-checkout:hover{
  color: #f0d069!important;
  background-color: #270d0b!important;
  transition: 0.5s;
}

 @media (max-width: 540px){
  
  .search-another{
    width: 50%!important;
  }

  .img-search{
    width: 150px;
    height: 150px;
  }
  
  .cart-body{
    width: 100%!important;
  }
  .ck-cart{
    width: 25% !important;
  }

  .ck-info{
    padding-left: 5%!important;
    width:40% !important;
  }

  .ck-info-harga{
    font-size: 12pt!important;
    width: 30%!important;
  }

  .ck-info .input-txt{
    width: 25%;
  }

  .payment{
    width: 100%!important;
  }
}

/* detail product */

.img-detail{
  width: 850px;
  height: 550px;
  object-fit: cover;
}

/* .detail-sub-content h2{
  background-color: #efe2b2;
  color: #270d0b;
} */

.input-in-detail{
  background-color: #efe2b2;
  border:none;
  border-radius: 5px;
  width: 75%;
  padding:1%; 
  margin-top:-2%
}

@media (max-width: 540px){
  .section-img{
    width: 100%!important;
  }

  .section-info{
    width: 100%!important;
  }

  .img-detail{
    width: 100%;
    height: 150px;
  }

  .detail-sub{
    width: 100%!important;
  }

  .detail-sub-content{
    width: 50%!important;
  }

  .input-in-detail{
    width: 81%;
  }
}

/* promo */

.box-promo{
  background-color: #270d0b;
  color: #efe2b2;
}

.go-home{
 background-color: #270d0b!important;
 padding: 2%;
 color: #efe2b2;
  width: 15%!important;
}

.go-home:hover{
  color: #f0d069;
  transition: 0.7s;
}

.ket-promo{
  padding-top:3%;
}

.box-pr{
  padding-left:15%!important;
}

.logo-img-promo{
  width: 120px;
  height: 120px;
}

@media (max-width:540px) {
  .img-promo{
    width: 100%!important;
  }
  .ket-promo{
    width: 100%!important;
  }

  .box-pr{
    width: 100%!important;
    padding-left: 0!important;
  }
  .logo-img-promo{
    width: 110px;
    height: 110px;
  }
  .go-home{
    width: 25%!important;
  }
}