@keyframes slideInFromLeft {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }
  
  html {
    scroll-behavior: smooth;
  }
  #judul{
    animation: 1s ease-out 0s 1 slideInFromLeft;
    margin-top:15px;
    font-size: 50px !important;
    color:#3A2D28;
    
  }
  #judul_best_seller{
    font-size:50px !important;
    color:#3A2D28 !important;
  }
  #pilihbunga{
    border:0px solid black;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    background: linear-gradient(to left, #d68b2d 50%, #E8B865 50%) right;
    background-size: 200%;
    
      transition: .5s ease-out;
      animation: 2s ease-out 0s 1 slideInFromLeft;
  }
  
  #pilihbunga:hover{
    background-color:#E3BC9A;
    border-color:#E3BC9A;
    background-position: left;
  
  }
  
  .custom_nav-container.navbar-expand-lg .navbar-nav .nav-item.active .nav-link::after{
    background-color:#714423 !important;
   
  }
  .nav-link:hover{
  
    text-underline-offset:8px;
    text-decoration : underline #714423 2px;
  }
  /* Ini Style Product */
  #kotakproduk #container{
    box-shadow: 0 15px 30px 1px rgba(128, 128, 128, 0.31);
    background: rgba(255, 255, 255, 0.90);
    text-align: center;
    border-radius: 5px;
    overflow: hidden;
    margin: 5em auto;
    height: 350px;
    width: 100%;
    
  }
  
  
  
  
  
  
  /* @keyframes chan-sh {
    from  {content: 'free shipping';}
    to  {content: 'New';}
    
  } */
  
  /*Product Rating  */
  #kotakproduk .hint-star {
    display: inline-block;
    margin-left: 0.5em;
    color: gold;
    width: 50%;
  }
  
  
  /* The most important information about the product */
  #kotakproduk #container .product-details > p {
    font-family: 'Farsan', cursive;
    text-align: center;
    font-size: 15px;
    color: #7d7d7d;
    
  }
  
  /* control */
  
  #kotakproduk .control{
    position: relative;
    text-align: center;
    width: 100%;
    margin:auto;
    /* bottom: 20%; */
    /* left: 22.8%; */
    
  }
  /* the Button */
  #kotakproduk .btn {
    transform: translateY(0px);
    transition: 0.3s linear;
    background: #714423;
    border-radius: 5px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    outline: none;
    border: none;
    color: #eee;
    padding: 0;
    margin: 0;
    
  }
  
  #kotakproduk .btn:hover{transform: translateY(-4px);}
  
  #kotakproduk .btn span {
    font-family: 'Farsan', cursive;
    transition: transform 0.3s;
    display: inline-block;
    padding: 5px 10px;
    font-size: 1.2em;
    margin:0;
    
  }
  /* shopping cart icon */
  #kotakproduk .btn .price, .shopping-cart{
    background: #333;
    border: 0;
    margin: 0;
  }
  
  #kotakproduk .btn .price {
    /* transform: translateX(-10%); padding-right: 15px; */
  }
  
  /* the Icon */
  #kotakproduk .btn .shopping-cart {
    transform: translateX(-100%);
    position: absolute;
    background: #333;
    z-index: 1;
    left: 0;
    top: 0;
  }
  
  /* buy */
  #kotakproduk .btn .buy {z-index: 3; font-weight: bolder;}
  
  /* #kotakproduk .btn:hover .price {transform: translateX(-110%);} */
  
  /* #kotakproduk .btn:hover .shopping-cart {transform: translateX(0%);} */
  
  
  
  /* product image  */
  #kotakproduk .product-image {
    transition: all 0.3s ease-out;
    display: inline-block;
    position: relative;
    overflow: hidden;
    height: 100%;
    float: right;
    width: 50%;
    display: inline-block;
  }
  
  #container img {width: 100%;height: 350px;}
  
  #kotakproduk .info {
      background: rgba(27, 26, 26, 0.9);
      font-family: 'Farsan', cursive;
      transition: all 0.3s ease-out;
      transform: translateX(-100%);
      position: absolute;
      line-height: 1.9;
      text-align: left;
      font-size: 80%;
      cursor: no-drop;
      color: #FFF;
      height: 350px;
      width: 100%;
      left: 0;
      top: 0;
      padding-top:20px;
  }
  
  #kotakproduk .info h2 {text-align: center}
  #kotakproduk .product-image:hover .info{transform: translateX(0);}
  
  #kotakproduk .info ul li{transition: 0.3s ease;}
  #kotakproduk .info ul li:hover{transform: translateX(50px) scale(1.3);}
  
  #kotakproduk .product-image:hover img {transition: all 0.3s ease-out;}
  #kotakproduk .product-image:hover img {transform: scale(1.2, 1.2);}
  
  /* End Style Product */
  
  
  .product-card {
      width: 100%;
      position: relative;
      box-shadow: 0 2px 7px #dfdfdf;
      margin: 50px auto;
      background: #fafafa;
  }
  
  .badge {
      position: absolute;
      left: 0;
      top: 20px;
      text-transform: uppercase;
      font-size: 13px;
      font-weight: 700;
      background: red;
      color: #fff;
      padding: 3px 10px;
  }
  
  .product-tumb {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      /* padding: 50px; */
      background: #f0f0f0;
  }
  
  .product-tumb img {
      max-width: 100%;
      max-height: 100%;
  }
  
  .product-details {
      padding: 0px;
  }
  
  .product-catagory {
      display: block;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      color: #ccc;
      margin-bottom: 18px;
  }
  
  .product-details h4 a {
      font-weight: 500;
      display: block;
      margin-bottom: 18px;
      text-transform: uppercase;
      color: #363636;
      text-decoration: none;
      transition: 0.3s;
      font-size:20px;
  }
  
  .product-details h4 a:hover {
      color: #fbb72c;
  }
  
  .product-details p {
      font-size: 15px;
      line-height: 22px;
      margin-bottom: 18px;
      color: #999;
      display: -webkit-box;
    max-width: 400px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
      
  }
  
  .product-bottom-details {
      overflow: hidden;
      border-top: 1px solid #eee;
      padding-top: 10px;
      padding-left:5px;
  }
  
  .product-bottom-details div {
      float: left;
      width: 100%;
  }
  
  .product-price {
      font-size: 18px;
      color: #fbb72c;
      font-weight: 600;
  }
  
  .product-price small {
      font-size: 80%;
      font-weight: 400;
      text-decoration: line-through;
      display: inline-block;
      margin-right: 5px;
  }
  
  .product-links {
      text-align: right;
  }
  
  .product-links a {
      display: inline-block;
      margin-left: 5px;
      color: #e1e1e1;
      transition: 0.3s;
      font-size: 17px;
  }
  
  .product-links a:hover {
      color: #fbb72c;
  }
  
  
  
  #kotaklogin a{
    cursor: pointer;
  }
  
  .mylinks {
    display: inline-block;
  }
  
  .mylinks a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
  }
  
  .mylinks a.active {
    background-color: #4CAF50;
    color: white;
  }
  
  .mylinks a:hover:not(.active) {background-color: #ddd;}
  #line_mobile{
    display:none;
   }
 
  @media (max-width: 576px) { 
    /* .slider_section .container{
      max-width: 500px !important;
    } */
      #judul{
        font-size:35px !important;
          color: #f9c265 !important;
          text-align: left;
          
      }
      #description_judul{
        font-size:14px !important;
      }
      .detail_box{
      width:300px;
    }
      #description_judul{
        text-align: left;
      }
      .mobileonly{
        display:block !important;
      }
      #carousel_category{
        padding-left:5px !important;
        margin-top:20px !important;
      }
   }
  @media (min-width: 576px) { 
    /* .slider_section .container{
      max-width: 500px !important;
    } */
    .detail_box{
      width:250px;
    }
      #judul{
        font-size:35px !important;
          color: #f9c265 !important;
      }
      .mobileonly{
        display:block !important;
      }
   }
   
  
  
  @media (min-width: 768px) { 
    /* .slider_section .container{
      max-width: 500px ;
    } */
    #line_mobile{
      display:block;
     }
    #judul{
      
      font-size:30px ;
          color:#f9c265 !important;
      }
    .detail_box{
      width:300px;
    }
    .mobileonly{
        display:none !important;
      }
   }
  
  
  @media (min-width: 992px) { 
    #judul{
          color:#f9c265 !important;
      }
      .mobileonly{
        display:none !important;
      }
   }
  
  
  @media (min-width: 1200px) { 
    #judul{
          color:#f9c265 !important;
      }
      .mobileonly{
        display:none !important;
      }
   }
  
   .contact_section {
    background-image: none !important;
  }
  
  .footer_section::before {
  
    background-image: none !important;
  
  }
  
  
  
  
  
  
  .shell{
    padding:40px 0;
  }
  .wsk-cp-product{
    background:#fff;
    padding:15px;
    border-radius:6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    position:relative;
    margin:20px auto;
  }
  .wsk-cp-img{
    position:absolute;
    top:5px;
    left:50%;
    transform:translate(-50%);
    -webkit-transform:translate(-50%);
    -ms-transform:translate(-50%);
    -moz-transform:translate(-50%);
    -o-transform:translate(-50%);
    -khtml-transform:translate(-50%);
    width: 100%;
    padding: 15px;
    transition: all 0.2s ease-in-out;
  }
  .wsk-cp-img img{
    width:100%;
    transition: all 0.2s ease-in-out;
    border-radius:6px;
  }
  .wsk-cp-product:hover .wsk-cp-img{
    top:-40px;
  }
  .wsk-cp-product:hover .wsk-cp-img img{
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  }
  .wsk-cp-text{
    padding-top:100%;
  }
  .wsk-cp-text .category{
    text-align:center;
    font-size:12px;
    font-weight:bold;
    padding:5px;
    margin-bottom:45px;
    position:relative;
    transition: all 0.2s ease-in-out;
  }
  .wsk-cp-text .category > *{
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -khtml-transform: translate(-50%,-50%);
      
  }
  .wsk-cp-text .category > span{
    padding: 12px 30px;
    border: 1px solid #d68b2d;
    background:#d68b2d;
    color:#fff;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    border-radius:27px;
    transition: all 0.05s ease-in-out;
    
  }
  .wsk-cp-product:hover .wsk-cp-text .category > span{
    border-color:#ddd;
    box-shadow: none;
    padding: 11px 28px;
  }
  .wsk-cp-product:hover .wsk-cp-text .category{
    margin-top: 0px;
  }
  .wsk-cp-text .title-product{
    text-align:center;
  }
  .wsk-cp-text .title-product h3{
    font-size:20px;
    font-weight:bold;
    margin:15px auto;
    overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    width:100%;
  }
  .wsk-cp-text .description-prod p{
    margin:0;
  }
  /* Truncate */
  .wsk-cp-text .description-prod {
    text-align:center;
    width: 100%;
    height:62px;
    overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    margin-bottom:15px;
  }
  .card-footer{
    padding: 25px 0 5px;
    border-top: 1px solid #ddd;
  }
  .card-footer:after, .card-footer:before{
    content:'';
    display:table;
  }
  .card-footer:after{
    clear:both;
  }
  
  .card-footer .wcf-left{
    float:left;
    
  }
  
  .card-footer .wcf-right{
    float:right;
  }
  
  .price{
    font-size:18px;
    font-weight:bold;
  }
  
  a.buy-btn{
    display:block;
    color:#212121;
    text-align:center;
    font-size: 18px;
    width:35px;
    height:35px;
    line-height:35px;
    border-radius:50%;
    border:1px solid #212121;
    transition: all 0.2s ease-in-out;
  }
  a.buy-btn:hover , a.buy-btn:active, a.buy-btn:focus{
    border-color: #FF9800;
    background: #FF9800;
    color: #fff;
    text-decoration:none;
  }
  .wsk-btn{
    display:inline-block;
    color:#212121;
    text-align:center;
    font-size: 18px;
    transition: all 0.2s ease-in-out;
    border-color: #FF9800;
    background: #FF9800;
    padding:12px 30px;
    border-radius:27px;
    margin: 0 5px;
  }
  .wsk-btn:hover, .wsk-btn:focus, .wsk-btn:active{
    text-decoration:none;
    color:#fff;
  }  
  .red{
    color:#F44336;
    font-size:22px;
    display:inline-block;
    margin: 0 5px;
  }
  @media screen and (max-width: 991px) {
    .wsk-cp-product{
      margin:40px auto;
    }
    .wsk-cp-product .wsk-cp-img{
    top:-40px;
  }
  .wsk-cp-product .wsk-cp-img img{
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  }
    .wsk-cp-product .wsk-cp-text .category > span{
    border-color:#ddd;
    box-shadow: none;
    padding: 11px 28px;
  }
  .wsk-cp-product .wsk-cp-text .category{
    margin-top: 0px;
  }
  a.buy-btn{
    border-color: #FF9800;
    background: #FF9800;
    color: #fff;
  }
  }
  .owl-stage{
    margin:auto;
  }
  .owl_category_card{
    border-radius: 20px;
    /* box-shadow: #f1f1f1 0px 7px 29px 0px; */
    padding:10px;
    border: 2px solid #f1f1f1 ;
  }
  .owl_category_card:hover{
    /* border-radius: 20px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding:10px;
    border: 3px solid #f1f1f1 ; */
    background-color: #FF9800;
  }
  .category_active{
    background-color: #FF9800;
  }