/*FONT*/

body{
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: #9a9a9a;
  line-height: 1.5;
  background-color: #FFFCF8;
}

.nav-link
{padding-left:12px !important;padding-right:12px !important;}

.deskripsi{
  font-style: italic;
  font-weight: 600;
  color: #9a9a9a;
  line-height: 1.5;
}

 .jost-link {
    font-family: "Mulish", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
    color: #9a9a9a;
    line-height: 1.5;
    font-size: 16px;
  }


  .mullis-foot
  {
    font-family: "Mulish", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #9a9a9a;
    line-height: 1.5;
    font-size: 14px;
  }

  .fs-7{
    font-size:24px;
  }

  /*END FONT*/

  .p6{}

  /*TOMBOL*/
  .btn-gold {
    --bs-btn-color: #000;
    --bs-btn-bg: #d4a762;
    --bs-btn-border-color: #d4a762;
    --bs-btn-hover-color: #d4a762;
    --bs-btn-hover-bg: #000;
    --bs-btn-hover-border-color: #000;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #d4a762;
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #d4a762;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
  }

  .book
  {padding: 14px 34px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
     border-radius: 10px !important; 
     box-shadow: 0px 11px 11px -7px rgb(144 60 0 / 36%)  !important; 
  }
  .btn-white  {
    --bs-btn-color: #000;
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #d4a762;
    --bs-btn-hover-color: #d4a762;
    --bs-btn-hover-bg: #d4a762;
    --bs-btn-hover-border-color: #d4a762;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #d4a762;
    --bs-btn-active-border-color: #d4a762;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
  }

  .pagination {
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.375rem;
    --bs-pagination-font-size: 16px;
    --bs-pagination-color: #4a4a4a;
    --bs-pagination-bg: #fff;
    --bs-pagination-border-width: var(--bs-border-width);
    --bs-pagination-border-color:#4a4a4a;
    --bs-pagination-border-radius: 8px;
    --bs-pagination-hover-color: #d4a762;
    --bs-pagination-hover-bg: #fff;
    --bs-pagination-hover-border-color: #d4a762;
    --bs-pagination-focus-color: #4a4a4a;
    --bs-pagination-focus-bg: #d4a762;
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: #d4a762;
    --bs-pagination-active-border-color: #d4a762;
    --bs-pagination-disabled-color: var(--bs-secondary-color);
    --bs-pagination-disabled-bg: var(--bs-secondary-bg);
    --bs-pagination-disabled-border-color: var(--bs-border-color);
    display: flex;
    padding-left: 0;
    list-style: none;
  }

  /*END TOMBOL */

  /*ACCORDION */
  .accordion-item {
    /* margin-bottom: 10px; /* Atur jarak antar item 
  border-radius:25px !important;*/
    background-color: #fffcf8 !important;
  }
  
  .accordion-button:not(.collapsed) {
   color:#af6900 !important;   
  }

  .accordion-button:focus {box-shadow: none !important;}

  .txt_banner_srv
  {
    font-size: 60px !important;
    line-height: 1.32;
    font-weight: 600;
    padding-left:60px;
    text-shadow:1px 1px 10px 0 rgba(0, 0, 0, .1) !important
  }

  .txt_banner_srv_slogan
  {
    font-size: 20px;
    line-height: 1.32;
    font-weight: 600;
    padding-left:60px;
    text-shadow:1px 1px 10px 0 rgba(0, 0, 0, .1) !important
  }
  .accordion-button:not(.collapsed) {
    background-color: #fffcf8 !important;
  }



  .accordion-item-top,
  .accordion-button-top {
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
  }

  .accordion-item-bottom,
  .accordion-button-bottom {
    border-bottom-left-radius: 16px !important;
    border-bottom-right-radius: 16px !important;
  }

  #detail{    --bs-gutter-x: unset;}

  .accordion-button {
    font-weight: 600 !important;

  }

  /*END ACCORDION */

  .navbg , .footer {
    background-image: url("../../asset/img/background.jpg");
  }

  .div-transparan-top {
    background: linear-gradient(to top, transparent 0%, rgba(255, 252, 248, 0.9) 10%) !important;
  }

  .div-transparan-bottom {
    background: linear-gradient(to bottom, transparent 0%, rgba(255, 252, 248, 0.9) 10%) !important;
  }

  .div-solid {
    background-color: rgba(255, 252, 248, 0.7) !important;
  }

  .div-transparan-bottom-blue {
    background: linear-gradient(to top, transparent 0%, rgba(255, 252, 248, 0.9) 10%) !important;
  }

  .text-gold {
    color: #D4A762 !important;
  }

  .mt-7
      {
          margin-top:6rem !important;
      }

  .harga {
    color: #D4A762 !important;
    line-height: 1.5;
    font-size: 14px;
    font-weight: 800;
    text-align: right;
  }

  .harga-coret {
    color: #9a9a9a !important;
    text-decoration: line-through;
    opacity: 0.5;
    font-size: 14px;    
    line-height: 1.5;
    margin-bottom: 0;
    font-weight: 800;
    text-align: left;
  }



  .btn-red {
    color: #fff;
    background: #BA2030;
    font-weight: 600;
  }

  .card-srv {

    background-color: #fffcf8;
  }


  

  .banner-font {
    font-family: Satisfy-Regular;
  }

  .head-div-font {
    
    color: #af6900;
    /*text-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.15);*/
  }

  .faq {
    color: #fffcf8 !important;
  }

  /*.card-item-srv{
     width:199px;height:199px;align-self:center;
     }*/
  .img-radius {
    border-radius: 15px;
  }

  .dropdown-item.active,.dropdown-item:active
  {
    background-color: #D4A762 !important;
  }

  .nav-link.active {
    color: #D4A762 !important;
    text-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }
  .nav-link-detail
      {
        border:1px solid #d4a762 !important;
        background-color:#fff;
        color:#000;
      }

      .nav-tabs .nav-link-detail.active {
          background-color: #d4a762;
          color: #000 !important;
      }

      .nav-tabs .nav-link-detail:hover {
          
          color: #000 !important;
      }

  .custom-col {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 20px;
    text-align: center;
  }

  .dropdown-menu {
    background-color: #fffcf8 !important;
  }

  .dropdown-menu li .dropdown-item:hover {
    background-color: #FFFCF8 !important;
    color: #d4a762;
  }

  @font-face {
    font-family: Satisfy-Regular;
    src: url('asset/font/Satisfy-Regular.ttf');
  }

  @font-face {
    font-family: buffalo;
    src: url('asset/font/Buffalo Nickel.ttf');
  }

  .text-btn {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
  }

  /*divider*/
  .divider-wrap {
    position: relative;
    height: 100px;
    overflow: hidden;
    top: -100px;
  }

  .divider-wrap svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .divider-wrap svg path {
    fill: #d4a762;
    /* Adjust this color to match your background */
  }


  .divider-wrap-terbalik {
    position: relative;
    height: 100px;
    overflow: hidden;
    top: -100px;
    transform: rotate(180deg);
  }

  .divider-wrap-terbalik svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .divider-wrap-terbalik svg path {
    fill: #CDF0EA;
    /* Adjust this color to match your background */
  }

  /*footer*/
  .footer {
    color: #050709 !important;
    padding: 40px 0;
    border-top:2px solid #d4a762;
  }

  .footer .col h5 {
    color: #050709 !important;
  }

  .footer a {
    color: #050709;
    text-decoration: none;
  }

  .footer a:hover {
    color: #d4a762;
    text-decoration: underline;
  }

  .footer .social-icons a {
    font-size: 2em;
    margin-right: 15px;
    color: #9a9a9a;
  }

  .footer .social-icons a:hover {
    color: #d4a762 !important;
  }

  
  /* sub menu*/
  .dropdown-submenu {
    position: relative;
  }

  .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    border-radius: 0.25rem;
  }

  /*card hover*/
  .card {
    box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, .1) !important;
    display: block;
    transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
    margin-top: 10px;
    cursor: pointer;
  }

  .judul-card {
    text-align: center;
    font-size: 0.9em;
    font-weight: 800;
    /*min-height: 60px !important;*/
    margin-bottom: 0px !important;
  }

.card-price
{
  text-align: center;
  padding-right: 0px !important;
  padding-left: 0px !important;
}  

  .card-label
  {font-size: 0.8em;}

  .card:hover {

    box-shadow: 5px 10px 20px 0 rgba(0, 0, 0, .2) !important;
  }

  .card .glow-wrap {
    overflow: hidden;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    margin-top: 10px;
  }

  .card .glow {
    display: block;
    position: absolute;
    width: 40%;
    height: 200%;
    background: rgba(255, 255, 255, .2);
    top: 0;
    filter: blur(5px);
    transform: rotate(45deg) translate(-450%, 0);
    transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  .card:hover .glow {
    transform: rotate(45deg) translate(450%, 0);
    transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
  }

  .card:hover,
  .card:hover .glow-wrap {
    margin-top: 0;
  }

  /*end card hover*/

.carousel-indicators button {
    background-color: #d4a762;
}

.list_header
{
    min-height: 200px !important;    
    display: flex;
    align-items: center;
    position: relative;
}

.pt-7
{ padding-top: 100px;}

.sort-by
{
flex: none;
    margin-right: 12px;
    line-height: 150%;
}

.form-select:focus {box-shadow: none !important;}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  color: #fff;
  font-size: 25px;
  text-shadow:1px 1px 10px 0 rgba(0, 0, 0, .1) !important
}

.barlow-category {
  font-family: "Mulish", sans-serif;
  font-weight: 800;
  font-style: normal;
}


iframe{ width:100% !important;}

/*swiper*/
/* Style umum untuk tombol Next dan Prev */
.swiper-button-next, .swiper-button-prev {
  background-color: rgba(0, 0, 0, 0.6); /* Background semi-transparan yang lebih gelap */
  color: #ffffff !important; /* Warna ikon putih */
  width: 36px !important; /* Lebar tombol lebih kecil */
  height: 36px !important; /* Tinggi tombol lebih kecil */
  border-radius: 50%; /* Membuat tombol menjadi lingkaran sempurna */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Bayangan yang halus */
  transition: all 0.3s ease; /* Efek transisi */
  border: none; /* Menghapus garis batas */
  margin-top: 0 !important;
}

/* Menambahkan ikon panah pada tombol Next dan Prev */
.swiper-button-next::after, .swiper-button-prev::after {
  font-size: 12px !important; /* Ukuran ikon lebih kecil */
  font-weight: 600; /* Ketebalan ikon tetap elegan */
}

/* Spesifik untuk tombol Next */
.swiper-button-next {
  right: 15px; /* Jarak dari sisi kanan */
}

/* Spesifik untuk tombol Prev */
.swiper-button-prev {
  left: 15px; /* Jarak dari sisi kiri */
}

/* Menyesuaikan posisi di tengah secara vertikal */
.swiper-button-next, .swiper-button-prev {
  top: 50%; /* Posisi di tengah vertikal */
  transform: translateY(-50%); /* Mengimbangi efek top 50% */
}


/*end swiper*/