html,
body {
	font-family: BioRhyme !important;
    color: #202926 !important;
    font-size: 16px !important;
    scroll-behavior: smooth;
    color: #252525;
}

h1, h2, h3, h4, h5, h6 {
    font-family: BioRhyme;
}

a { color: #252525;}
a:hover { color: #e9427f;}

.btn-primary {
    background-color: #e9427f;
    color: white;
    border: none;
    transition: none !important;
}

/* Hover & focus */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible {
    background-color: #ffdcec !important;
    color: #000 !important;
    box-shadow: none !important;   /* hilangkan glow biru */
    border: none;
}

/* Active (klik) – Bootstrap pakai selector ini */
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: #ffdcec !important;
    color: #000 !important;
    border: none !important;
    box-shadow: none !important;
}


.title-header {
    font-family: PhotoWallPosterSans !important;
    color: #e9427f;
    position: relative; /* Penting untuk positioning pseudo-element */
    font-size: 2.75rem;
    letter-spacing: .068em;
    line-height: 1.23;
    text-align: center;
    margin-bottom: 2rem; /* agar underline tidak bertabrakan dengan elemen bawah */
}

.title-header:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -10px; /* Jarak 5px dari bawah teks */
    height: 11px;
    background-size: 50% auto;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../images/icon/illustration-underline.svg");
}
.h6 {
    font-size: 50px;
    font-weight: 500;
    letter-spacing: 0em;
}

.founder h2 {
    font-size: 24px;
    color:#e64080;
}

.padding5peren{
    padding: 5% 15%;
}

.photowall {
    font-family: LatoItalic !important;
    line-height:1;
    text-align:left; 
    margin-top:30px;
    margin-bottom:30px;
    
}
.LatoReguler {
    font-family: Lato !important;
    font-size: 12px;
    margin-top: 10px;
    text-align:left; 
    color:#e64080;
}
.LatoItalic{
    font-family: LatoItalic !important;
    text-align:left; 
    color: #060100;
}
.LatoRegulerDesc {
    font-family: Lato !important;
    text-align:left; 
    color: #060100;
    font-size: 16px;
    margin-top: 30px;
}
.LatoBold{
    font-family: LatoItalic !important;
    text-align:center; 
    color: #060100;
    font-size:18px !important;
    font-weight:800; 
    padding-top: 15px;
}
.LatoBold span{
    font-family: LatoBold !important;
    font-weight:800; 
    /* text-transform:uppercase;  */
    font-size:20px;
    color:#060100;
}

.learn-more{
    text-align:center;
    padding-top: 15px;
}
.learn-more a{
    font-weight:bold !important;
    font-weight:800; 
    color:#060100;
}

.container {
	max-width: 1366px !important;
}

.header__top {
    background-color: #e64080; /* rgb(230, 57, 132); #e63984 */
	
}

.header__cart ul li a span {

    background: #e9427f;
}

.header__top__left ul li {
    font-size: unset !important;
    color: #ffffff !important;
}

.header__top__right__social a, .header__top__right__auth a {
    font-size: unset !important;
}

.header__top__left ul li i, .header__top__right__social a, .header__top__right__auth i, .header__top__right__auth a{
    color: #ffffff !important;
}

.header__top__right__auth{
    float: right;
}

.header__top__left ul li:after, .header__top__right__social:after {
    background: #ffffff !important;
    opacity: 0.5;
}

.bg-pink {
    background-color: #ffdcec;/* rgb(237, 196, 196); /*background-color: #edc4c4;*/
}

.header__logo {
    padding: 5px 0 !important;
}

.header__logo img{
    max-width: 134px;
}

.pl-0{ padding-left: 0px !important; }
.pr-0 { padding-right: 0px !important; }
.pt-10 { padding-top: 10px; }
.mt-10 { margin-top: 10px; }


.header__menu {
    padding: 26px 0;
    font-family: LatoBold !important;
}

.header__menu ul {
    justify-content: center; /* ini yang memposisikan item ke tengah */
    list-style: none;
    padding: 0;
    margin: 0;
}

.header__menu li {
    position: relative;
    margin: 0 15px; /* jarak antar menu */
}

.header__menu ul li a {
    color: #252525;
    text-transform: uppercase;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.header__menu ul li:hover>a {
    color: #e9427f;
}

.header__menu ul li.active a {
    color: #e9427f;
}

.header__menu ul li .header__menu__dropdown {
    background: white;
}

.header__menu__dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    display: none;
    background-color: white;
    padding: 12px 16px;
    border: 1px solid #252525; /* garis hitam */
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    min-width: 180px;
    z-index: 100;
}

.header__menu li:hover .header__menu__dropdown {
    display: block;
}

/* Segitiga (ekor awan komentar) */
.header__menu__dropdown::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 20px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 10px solid white; /* isi segitiga */
    z-index: 101;
}

/* Outline hitam untuk segitiga */
.header__menu__dropdown::after {
    content: "";
    position: absolute;
    top: -11px;
    left: 19px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 11px solid black; /* garis hitam luar */
    z-index: 100;
}

.header__menu ul li .header__menu__dropdown li>a {
    color: #252525;
}

.header__menu ul li .header__menu__dropdown li:hover>a {
    color: #252525;
}

.header__menu ul li .header__menu__dropdown li:hover>a:hover {
    text-decoration: underline;
}

.header__menu ul li {
    margin-right: 20px !important; /* margin-right: 50px; */
}

.header__menu ul li .header__menu__dropdown {
    width: 190px !important;
}

/* MEGAMENU */
.mega-menu {
    position: fixed;
    /* fixed biar full lebar dan menempel ke layar */
    top: 0;
    left: 0;
    width: 100vw;
    display: none;
    background: #fff;
    padding: 40px 10% 60px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    z-index: 99;
    /* border: 1px solid black; */
}

.mega-menu .mega-arrow {
    position: absolute;
    top: 0;
    transform: translateY(-100%);
    /* panah muncul di atas menu */
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 12px solid #fff;
    z-index: 100;
}

.mega-content {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    /* border: 1px solid black; */
}

.mega-item {
    text-align: center;
    max-width: 200px;
    margin: 10px;
}

.mega-item div{
    text-align: center;
    max-width: 200px;
    height: 120px;
    overflow: hidden;
    border-radius: 10px;
}

.mega-item img {
    width: 100%;
    border-radius: 10px;
}

.mega-item p {
    font-size: 14px;
    margin-top: 10px;
}

.header__menu .mega-menu .mega-content .mega-text h6{ 
    color: #e9427f;
    text-transform: uppercase;
}

.header__menu .mega-menu .mega-content .mega-text a{
    /* color: #252525; */
    text-transform: unset !important;
    font-weight: normal !important;
}
/* @media (max-width: 768px) {
    .mega-content {
        flex-direction: column;
        align-items: center;
    }

    nav ul {
        flex-direction: column;
        gap: 10px;
    }
} */
/*END MEGA MENU*/

.header__cart {
    /* padding: 10px 0; */
}

.header__cart ul li a span {
    top: -10px;
}

.hero__search__form {
    width: 100%;
    height: 30px;
}

.hero__search__form form input {
    width: 100%;
    height: unset !important;
    font-size: 16px;
    padding-left: 10px;
    padding-right: 30px;
    color: #252525;
}

.hero__search__form form .fa-search {
    border: 0px solid #252525;
    padding: 5px;
}

.hero__search__form form button {
    position: absolute;
    right: 0;
    top: -2px;
    height: 30px;
}

.site-btn {
    color:  unset;
    padding: unset;
    background: unset;
}

header .row {
    margin-right: unset !important;
    margin-left: unset !important
}

.modal {
z-index: 1050; /* default Bootstrap */
}

.modal-backdrop {
z-index: 1040; /* default Bootstrap */
}
.modal.show {
display: block !important;
}

.close {
    font-size: 3.5rem;
    color: #e9427f;
    opacity: 1;
    margin-top: -37px !important;
    margin-right: -27px !important;
}

.blog__item__pic {
    overflow: hidden;
    max-height:260px;
}

.banner img{
    width: 100% !important;
}

.banner__pic {
    overflow: hidden;
    max-height:405px; /*324px;*/
}

.banner__pic img{
    margin-bottom: 15px;
}

.featured__controls ul li:after {
    background: #e9427f;
}

.featured__item__pic__hover li:hover a {
	background: #e9427f;
	border-color: #e9427f;
}

.footer {
    background: #ffdcec;
    padding-top: 40px;
}

.footer__widget ul li a:hover {
    color: #e9427f;
    text-decoration: underline;
}

.blog__item__pic {
    overflow: hidden;
    max-height: 198px;
}

.m-cart-show { display: none;}

/*--------------------------------- header sticky -----------------------------*/

.sticky-container,.m-sticky-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    background-color: #ffdcec; /*rgb(237, 196, 196); background-color: #f0e6d8 !important;*/
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    /* transition: all 0.3s ease; */
    /* animation: slideDown 0.3s ease; */
    width: 100%;
}
.m-sticky-container .header__logo img{
    margin-left: 20px;
}
.sticky-container-menu {
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 9;
    background-color: #edc4c4 !important;
    /* transition: all 0.3s ease;
    animation: slideDown 0.3s ease; */
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }
    to {
        transform: translateY(0);
    }
}

/*--------------------------------- slide banner -----------------------------*/

.carousel-control .control-icon {
    font-size: 48px;
    height: 30px;
    margin-top: -15px;
    width: 30px;
    display: inline-block;
    position: absolute;
    top: 50%;
    z-index: 5;
}
.carousel-control .prev { margin-left:  -15px;  left: 50%; }
.carousel-control .next { margin-right: -15px; right: 50%; }

.carousel-inner .item img {
    width: 100% !important;
}

.latest-product__item__pic{
    width: 110px;
    overflow: hidden;
}

/*--------------------------------- founder -----------------------------*/

.founder {
    background-color: #fddfd8;
    padding: 40px;
    /* margin-top: 40px; */
}

.founder a{
    /* -webkit-text-decoration: underline; */
    /* text-decoration: underline; */
    text-underline-offset: 6px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.founder .col-lg-5 img, .founder .col-lg-4 img{
    /* width: 490px; */
    /* bottom: -41px; */
    /* position: absolute; */
    text-align: right;
    margin-top: -10%;
}

.shadow-person {
    /* filter: drop-shadow(0 0 10px rgba(0,0,0,0.5)); */
}

/*--------------------------------- vidio embed -----------------------------*/

.video {
    padding: 40px;
}

.video-wrapper {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    border-radius: 1rem;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.video-wrapper:hover {
    transform: scale(1.01);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 1rem;
}

/*--------------------------------- vidio embed -----------------------------*/

.banner {
    padding: 40px;
}

/*--------------------------------- Whatsapp -----------------------------*/

.footer__widget, .footer__about {
    margin-bottom: 0px !important;
}

#wabutton {
    position: fixed;
    right: 30px;
    bottom: 120px;
    z-index: 99;
    /* background: rgb(40 167 69); */
    height: 68px;
    width: 68px;
    color: #f5f5f5;
    font-size: 24px;
    text-align: center;
    border-radius: 50%;
    line-height: 50px;
    box-shadow: 0px 10px 30px 1px rgba(0, 0, 0, 0.15);
}

a.back-to-top {
    position: fixed;
    bottom: 14em;
    right: 28px;
    text-decoration: none;
    color: #000000;
    background: transparent url("../images/icon/back-to-top.png") no-repeat;
    text-indent: -9999px;
    padding: 0.1em;
    display: none; /* awalnya disembunyikan */
    width: 50px;
    height: 50px;
    outline: none;
    z-index: 99;
  }

/*--------------------------------- Offer Box & Email Promo -----------------------------*/

/* #offer-box {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: white;
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    z-index: 9;
    cursor: pointer;
    display: flex;
    align-items: center;
}
#offer-box .close-offer{
    position: absolute;     
    top: -8px;              
    right: -8px;            
    cursor: pointer;
    background: black;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    line-height: 1;
    z-index: 10;
} */
#offer-box {
    position: fixed;
    left: 0;
    bottom: 150px; /* posisi vertikal di layar */
    background: #1c1c1c;
    color: white;
    padding: 20px 20px;
    border-radius: 0 10px 10px 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    text-transform: uppercase;
}

#offer-box .close-offer {
    background: transparent;
    color: white;
    border: none;
    font-size: 40px;
    cursor: pointer;
    margin-bottom: 10px;
    line-height: 1;
}

#offer-box .offer-text {
    writing-mode: vertical-rl;
    transform: rotate(180deg); /* supaya teks dari bawah ke atas */
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}

#exampleModalCenter .modal-content {
    position: relative;
    background-color: unset;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: unset;
    border-radius: unset;
    outline: 0;
    -webkit-box-shadow: unset;
    box-shadow: unset;
}

#exampleModalCenter .modal-content .modal-body{
    border-radius: 2rem;
    overflow: hidden;
    background-color: #ffffff;
    max-height: 346px;
}
#exampleModalCenter .modal-content .modal-body{ padding: 0 !important;}

#exampleModalCenter .modal-content .modal-body .font-promo{
	font-size: 48px !important;
}

.circle-button {
    width: 40px;
    height: 40px;
    background-color: #e9427f !important;
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    /* HAPUS: right: -100px; */
}

.fixed-top-right {
    position: absolute; /* BUKAN fixed, agar relatif ke modal */
    top: 25px;
    right: 18px;
    z-index: 1050; /* pastikan muncul di atas */
}


.circle-button:hover {
    background-color: #e9427f !important;
    opacity: 1 !important;
}


/*--------------------------------- Drawer Cart -----------------------------*/

/* Drawer Container */
#customDrawer {
    position: fixed;
    top: 0;
    right: -400px; /* awalnya di luar layar */
    width: 400px;
    height: 100%;
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    z-index: 1050;
    transition: right 0.3s ease-in-out;
    overflow-y: auto;
  }
  
  /* Saat drawer dibuka */
  #customDrawer.open {
    right: 0;
  }
  
  /* Header */
  #customDrawer .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
    background-color: #f8f9fa;
  }
  
  /* Body */
  #customDrawer .drawer-body {
    padding: 1rem;
  }
  
  /* Tombol Close */
  #customDrawer .btn-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
  }
  

  /* Drawer Container */
#customDrawer {
    position: fixed;
    top: 0;
    right: -400px; /* awalnya di luar layar */
    width: 400px;
    height: 100%;
    background-color: #fff;
    box-shadow: -2px 0 5px rgba(0,0,0,0.2);
    z-index: 1050;
    transition: right 0.3s ease-in-out;
    overflow-y: auto;
  }
  
  /* Saat drawer dibuka */
  #customDrawer.open {
    right: 0;
  }
  
  /* Header */
  #customDrawer .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #ddd;
    background-color: #f8f9fa;
  }
  
  /* Body */
  #customDrawer .drawer-body {
    padding: 1rem;
  }
  
  /* Tombol Close */
  #customDrawer .btn-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
  }

  /* Overlay */
#drawerOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 1040;
    display: none;
  }
  
  /* Tampilkan overlay saat drawer aktif */
  #drawerOverlay.active {
    display: block;
  }

/*--------------------------------- Search Icon -----------------------------*/
    
/* Tombol icon search (trigger) */
.search-icon-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
  }
  
  /* Overlay pencarian */
  .search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(30, 30, 30, 0.8);
    z-index: 9999;
    display: none;
    justify-content: center;
    /* align-items: center; */
    align-items: flex-start; /* dari center jadi flex-start */
    padding-top: 50px; /* tambahkan padding atas */
  }
  
  /* Tombol close (pojok kanan atas) */
  .overlay-close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    background: none;
    border: none;
    font-size: 36px;
    color: white;
    cursor: pointer;
  }
  
  /* Kotak form */
  .search-box {
    position: relative;
    width: 80%;
    max-width: 600px;
  }
  
  /* Input */
  .search-input {
    width: 100%;
    padding: 15px 50px 15px 20px; /* ruang kanan buat icon */
    font-size: 18px;
    border: none;
    border-radius: 8px;
    outline: none;
    box-sizing: border-box;
  }
  
  /* Icon Search di dalam input */
  .search-submit-btn {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #333;
    font-size: 20px;
    cursor: pointer;
  }
  
  
/*--------------------------------- page shop -----------------------------*/

.breadcrumb__text h2, .breadcrumb__option a, .breadcrumb__option span {
    color: #252525;
}
.breadcrumb__option{
    margin-top: 5px;
}
.breadcrumb__option a:after {
	position: absolute;
	right: -16px;
	top: 13px;
	height: 1px;
	width: 10px;
	background: #252525;
	content: "";
}

.details{
    margin-top: 30px;
    min-height: 250px;
}

.details ol, .details ul{
    margin-left: 30px;
}

.blog__details__text h1 {
    font-size: 24px;
    margin-bottom: 20px;
}

.blog__details__text .img {
    max-height: 800px;
    overflow: hidden;
    margin: 20px auto;
}

.blog__details__text .img img.img-float {
    /* float: right; */
    /* margin-left: 30px; */
    width: 100% !important;
}

.blog__details__text p {
    font-family:unset;
    text-align: justify;
}

.modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
}
#main-image {
    /* max-width: 100%;
    border: 1px solid #ccc;
    padding: 10px; */
    cursor: zoom-in;
}

.contact-form {
    padding-top: 30px;
    padding-bottom: 30px;
}

.alert-dismissible {
    padding-right: unset;
}

.alert-dismissible .close{
    padding: 2.15rem 1.95rem;
    font-size: 2rem;
}
  
/*--------------------------------- page form -----------------------------*/

.form-select-sm {
    /* --bs-form-select-bg-img: none; */
}

.header__top__right__language div {
    color: #ffffff;
}
.header__top__right__language span {
    color: #ffffff;
    font-size: unset;
}
.header__top__right__language:after {
	background: #e9427f;
    opacity: 0.5;
}

.header__top__right__language ul{
    background : #ffffff;
    width: 220px;
}
.header__top__right__language ul li a {
    font-size: unset;
    color: #000;
}

.header__top__right__language:hover .member__menu__dropdown {
    display: block;
    margin-top: 3px;
}


.member__menu__dropdown {
    position: absolute;
    display: none;
    top: 100%;
    right: 0;
    background: #fff;
    color: #000;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    min-width: 200px;
    padding: 10px 0;
    z-index: 999;
}

/* Panah putih */
.member__menu__dropdown::before {
    content: "";
    position: absolute;
    top: -13px;
    left: var(--arrow-position, 90%);
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}

/* Border pada panah */
.member__menu__dropdown::after {
    content: "";
    position: absolute;
    top: -14px;
    left: var(--arrow-position, 90%);
    transform: translateX(-50%);
    border-width: 7px;
    border-style: solid;
    border-color: transparent transparent #ccc transparent;
    z-index: -1;
}


.member__menu__dropdown li {
    padding: 8px 10px;
}

.member__menu__dropdown li a {
    text-decoration: none;
    color: #000;
    display: block;
}

.member__menu__dropdown li a:hover {
    background-color: #f5f5f5;
}

/*--------------------------------- page product -----------------------------*/

.product__item__pic__hover li a:hover {
    background: #e9427f;

}

.product__item__text {
    flex-grow: 1;
    /* padding: 0 15px; */
}
.product__item__price {
    text-align: center;
}
.product__item__price h4 {
    color: #6f6f6f;
    font-size: 18px;
}

.product__item {
    background: white;
    border: 1px solid #ccc;
    padding: 15px;
    align-items: center;
    justify-content: space-between;
}

.product__item__price button {
    background: #e9427f;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    color: #ffffff;
    text-transform: uppercase;
    font-family: LatoBold !important;
}

/* List View */
.product__list {
    flex-direction: column;
    gap: 15px;
}


.product__list .col-lg-4, .product__list .col-lg-3 {
    width:100% !important;
    float: unset !important;
    max-width: unset !important;
    padding-right: 0px;
    padding-left: 0px;
}

.product__list .col-lg-4 .product__item, .product__list .col-lg-3 .product__item {
    display: flex;
    margin-bottom: 10px;
}

.product__list .col-lg-4 .product__item__pic, .product__list .col-lg-3 .product__item__pic  {
    height: 170px;
    top: 0px;
}

.product__list .col-lg-4 .product__item__pic img, .product__list .col-lg-3 .product__item__pic img {
    width: 200px;
    height: auto;
}

.product__list .col-lg-4 .product__item__text, .product__list .col-lg-3 .product__item__text {
    padding: 10px 0;
    text-align: left;
}

.product__list .col-lg-4 .product__item__price, .product__list .col-lg-3 .product__item__price {
    text-align: right;
}

.filter__option span:hover {
    color: #e9427f;
}

.sidebar__item {
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    font-family: 'Arial', sans-serif;
}

.sidebar__item h4 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.sidebar__item ul {
    list-style: none;
    padding-left: 0;
}

.sidebar__item ul > li {
    margin-bottom: 10px;
}

.sidebar__item a {
    text-decoration: none;
    color: #444;
    font-size: 16px;
    transition: color 0.2s ease;
}

.sidebar__item a:hover {
    color: #e91e63;
}

/* Submenu indent dan tampilan elegan */
.sidebar__item ul li ul.header__menu__dropdown_m {
    margin-left: 20px;       /* Menjorok ke dalam */
    padding-left: 15px;
    /* border-left: 2px solid #eee; */
    padding-top: 5px;
    padding-bottom: 5px;
    display: block !important;
    position: unset !important;
}

.header__menu__dropdown_mi {
    list-style: disc;        /* Buat ada bullet (opsional) */
    margin-left: 10px;       /* Tambahan indentasi per li */
    margin-bottom: 5px;
}

.header__menu__dropdown_m {
    font-size: 14px;
    color: #666;
    text-decoration: none;
    transition: color 0.2s ease;
}

.header__menu__dropdown_m:hover {
    color: #d81b60;
}

.sidebar__item ul li a {
    line-height: unset;
}

.primary-btn {
    background: #d81b60;
}

.footer__widget .footer__widget__social a:hover {
	background: #d81b60 !important;
}

.product__details__color { margin: 0 0 0 0;}

.product__details__color button {
    position: relative;
    border: 0;
    border-radius: 50%;
    box-sizing: border-box;
    height: 30px;
    width: 30px;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 2px 2px 1px rgba(0,0,0,.25);
  }

  .product__details__color button:hover {
    outline: 1px solid #e9427f; /* warna mencolok, bisa diganti */
    outline-offset: 1px;
    box-shadow: 0 0 10px rgba(233, 66, 127, 0.6); /* glow effect */
  }

  .product__details__color button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: none;
    border: 1px solid #ccc; /* optional */
  }
  .product__details__color button:hover:not(:disabled) {
    border: 1px solid #e9427f;
  }

  .product__details__color button.active {
    outline: 1px solid #e9427f; /* warna mencolok, bisa diganti */
    outline-offset: 1px;
    box-shadow: 0 0 10px rgba(233, 66, 127, 0.6); /* glow effect */
  }
  
  
  .product__details__color .green { background: linear-gradient(to bottom, #18c99d, #12977c) }
  .product__details__color .blue { background: linear-gradient(to bottom, #707b98, #283b6b) }
  
  .product__details__color .shade:before { 
    content: "";
    width: inherit;
    height: inherit;
    position: absolute;
    border-radius: inherit;
    top: 0; 
    left: 0;
    background: rgba(0, 0, 25, .25) 
  }
  
  .product__details__color .disabled { 
    opacity: .3; 
    cursor: not-allowed; 
  }

  .bg-transparent {
    background-color: rgba(0, 0, 0, 0.5); /* hitam dengan 50% transparansi */
  }

  .product__details__pic__slider {
    max-height: 165px;
    /* overflow: hidden; */
  }


  .video-thumbnail {
    position: relative;
    display: inline-block;
    cursor: pointer;
    /* width: 320px; */
    /* sesuaikan ukuran */
    /* height: 180px; */
}

.video-thumbnail img {
    width: 100%;
    height: 120px;
    display: block;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    /* transparan hitam */
    display: flex;
    justify-content: center;
    align-items: center;
}

.play-icon {
    font-size: 48px;
    color: white;
}

.owl-carousel {
    display: block !important;
}

.rating-stars {
    direction: rtl;
    unicode-bidi: bidi-override;
    font-size: 2rem;
    display: inline-block;
}

.rating-stars input {
    display: none;
}

.rating-stars label {
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s;
}

.rating-stars label:hover,
.rating-stars label:hover~label,
.rating-stars input:checked~label {
    color: #f5b301;
}


.review-container {
    /* max-width: 700px; */
    margin: 40px auto;
    background: #fff;
    /* padding: 30px; */
    /* border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); */
}

.review-container h2 {
    margin-bottom: 20px;
    font-size: 24px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.review {
    display: flex;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}

.review:last-child {
    border-bottom: none;
}

.avatar {
    flex: 0 0 60px;
    margin-right: 20px;
}

.avatar img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid #ddd;
}

.review-content {
    flex: 1;
}

.reviewer-name {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
}

.rating {
    color: #f5b301;
    font-size: 14px;
    margin-bottom: 5px;
}

.comment {
    margin-bottom: 8px;
    line-height: 1.4;
}

.time {
    font-size: 0.85em;
    color: #888;
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    height: 30px;
  }
  
  .marquee-container {
    overflow: hidden;
    white-space: nowrap;
    /* display: flex; */
    align-items: center;
    position: relative;
    text-align: right;
  }
  
  /* .marquee-track {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
  }
  
  .marquee-track span {
    display: inline-block;
    padding-right: 50px;
    font-size: 16px;
    font-weight: 600;
    color: white;
  } */
  
  .marquee-track {
    display: flex;
    flex-direction: column;
    transition: transform 0.5s ease-in-out;
}

.marquee-track span {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: white;
}
  
  
  /* Pause on hover */
  .marquee-container:hover .marquee-track {
    animation-play-state: paused;
  }
  
  

  .marquee-track a,.marquee-track a:hover,.marquee-track a:focus { color:#ffffff; }

  .marquee-container:hover .marquee-track {
    animation-play-state: paused;
  }
  
  /* @keyframes marquee {
    0%   { left: 100%; }
    100% { left: -100%; }
  }
   */

.categories__item {
    height: 390px;
    background: #ffffff;
    text-align: center;
}

.categories__item h5{ 
    padding: unset;
    position:unset;
}

.categories__item h5 a {
    background: linear-gradient(135deg, #e44180, #e44180);
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    color: #ffffff;
    text-transform: unset;
    font-family: LatoBold !important;
}

.categories__item:hover {
    background: #ffffff;
    transform: scale(1.03);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.categories__item h5 a.nonButton{
    background:unset;
    transition:unset;
    box-shadow:unset;
    color: #000;
    text-transform: uppercase;
}

.categories__item:hover a.nonButton, .categories__item h5 a.nonButton:hover {
    background:unset;
    transition:unset;
    box-shadow:unset;
    color: #e44180;
    text-transform: uppercase;
}


.blog__details__text {
    margin-bottom: 20px;
}

.blog__details__text ul, .blog__details__text ol {
    margin: 10px 0 10px 50px;
}
  
.blog__details__text h2{
    margin-bottom:30px;
}

.ptb-40 {
    padding-top: 60px;
    padding-bottom: 90px;
}

.banner-center {
    position: relative;
}

.banner-floating-text {
    position: absolute;
    top: 25%;
    left: 15%;
    /* background-color: rgba(255, 255, 255, 0.7); */
    max-width: 650px;
}
.banner-floating-text.Right {
    left: auto;
    right: 15%;
}
.banner-floating-text h1{
    color: #ffffff;
    font-size: 35px;
    margin-bottom: 20px;
}
.banner-floating-text p{
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 30px;
    max-width: 380px;
}
.banner-floating-text p a.btn-primary{
    border: 2px solid #ffffff;
    padding: 20px 40px;
    font-size: 16px;
}
.banner-floating-text p a.btn-primary:hover{
    border: 2px solid #ffffff;
}

.from-blog .categories__item {
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
    color: white;
    max-height: 239px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
}

.from-blog .categories__item .overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

.from-blog .categories__item .video-button {
    position: absolute;
    left: 6%;
    bottom: 2%;
    z-index: 2;
    font-size: 30px;
    color: white;
    text-decoration: none;
}

.f-ml-4 {
    margin-left: -5.333333% !important;
}

.f-pl-4 {
    padding-left: 11.333333% !important;
}

.f-pr-4 {
    margin-left: 4.333333% !important;
}

.filter__item {
    padding-top: unset;
    border-top: unset !important;
}
.filter__found {
    margin-top: 8px;
}

.product__details__pic__item img{
    max-width: 500px !important;
}

.product__details__text p {
    margin-bottom: unset;
}

.mt-100 {
    margin-top: 100px;
}

.mb-100 {
    margin-bottom: 100px;
}

.rating, .product__details__text .product__details__rating i, .rating-stars label:hover, .rating-stars label:hover ~ label, .rating-stars input:checked ~ label {
    color: #e9427f;
}

.product__pagination a, .blog__pagination a {
    margin-right: 0px !important;
}

.img-minus-top {
    margin-top: -39px !important;
}

.m-mobile {
    display: none;
}
.changeQuantityCart .pro-qty{
    width: 90px
}
.changeQuantityCart .pro-qty .qtybtn {
    width: 10px;
}

.shoping__discount form input {
    width: 205px;
  }

  .shoping__cart__btns {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.shoping__cart__table table tbody tr td.shoping__cart__quantity {
    width: unset;
    margin-right: 10px;
}

.shoping__cart__table table tbody tr td.shoping__cart__item__close span {
    color: #ff0000;
}

.fw-semibold {
    font-weight: normal !important;
}

/*--------------------------------- Responsive Media Quaries -----------------------------*/

@media only screen and (min-width: 1200px) and (max-width: 1579px) {
	.categories__slider.owl-carousel .owl-nav button.owl-next {
        right: 25px;
        display: none;
    }

    .header__menu ul li a {
        font-size: 13px !important;
    }
    .banner-floating-text.Right {
        right: 10%;
    }

}

/* Medium Device = 1200px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.header__menu ul li a {
        font-size: 9px !important;
    }

}

@media (min-width: 992px) {
    .categories__slider_ .col-lg-3 {
        float: left;
    }

    .banner-floating-text {
        max-width: 450px;
    }
    .banner-floating-text.Right {
        right: 10%;
    }
    .banner-floating-text h1{
        font-size: 25px;
    }
    
}

/* Tablet Device = 768px */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .humberger__menu__overlay {
        z-index: 999;
    }
    .humberger__menu__wrapper {
        z-index: 1000;
    }

    .slicknav_nav .slicknav_arrow {
        margin: 0 auto;
        float: right;
        color: #e9427f;
    }

    .header__menu__dropdown {
        position: unset;
        border: unset;
        box-shadow: unset;
        margin-left: 10px;
    }

    .humberger__menu__wrapper .slicknav_nav a {
        font-weight: unset;
    }

    .humberger__menu__wrapper .slicknav_nav ul {
        margin: 0 0 0 20px !important;
    }
    .slicknav_nav, .slicknav_nav ul {
        padding: unset;
    }

    .humberger__menu__cart ul li a span {
        background: #e9427f;
        top: -10px;
    }

    .humberger__menu__wrapper .slicknav_nav a:hover {
        color: #e9427f;
    }
    .m-mobile {
        display: block;
    }
	
}


/* Wide Mobile = 480px */
@media only screen and (max-width: 767px) {
    h4 {
        font-size: 16px;
    }

    .humberger__menu__overlay {
        z-index: 1048;
    }
    .humberger__menu__wrapper {
        overflow-y: auto;
        z-index: 1050;
    }
    .categories__slider.owl-carousel .owl-nav {
        margin-top: unset;
    }
    .categories__slider.owl-carousel .owl-nav button {
        left: -35%;
        top: -250px;
    }
    .categories__slider.owl-carousel .owl-nav button.owl-next {
        right: -35%;
    }

    .latest-product, .from-blog, .footer {
        padding-top: 20px;
    }
    .footer__about__logo {
        text-align: center;
    }

    .slicknav_nav .slicknav_arrow {
        margin: 0 auto;
        float: right;
        color: #e9427f;
    }

    .header__menu__dropdown {
        position: unset;
        border: unset;
        box-shadow: unset;
        margin-left: 10px;
    }

    .humberger__menu__wrapper .slicknav_nav a {
        font-weight: unset;
    }

    .humberger__menu__wrapper .slicknav_nav ul {
        margin: 0 0 0 20px !important;
    }
    .slicknav_nav, .slicknav_nav ul {
        padding: unset;
    }

    .humberger__menu__cart ul li a span {
        background: #e9427f;
        top: -10px;
    }

    .humberger__menu__wrapper .slicknav_nav a:hover {
        color: #e9427f;
    }

    .m-cart-show {
        display: block;
        position: fixed;
        top: 5px;         /* Jarak dari atas */
        right: 60px;       /* Jarak dari kanan */
        left: auto;        /* Pastikan tidak terpengaruh left sebelumnya */
        transform: none;   /* Matikan transform center jika sebelumnya ada */
        z-index: 99;     /* Pastikan muncul di atas */
    }
    
    .breadcrumb-section {
        padding: 25px 0 20px;
    }

    .breadcrumb__text h2 {
        font-size: 20px;
    }
    
    .product {
        padding-top: 20px;
    }

    .product__item {
        margin-bottom: 20px;
    }

    .product__item__pic {
        margin-bottom: 10px;
    }

    .product__item__price button {
        font-size: 16px;
    }

    .product__list .col-lg-4 .product__item__pic img, .product__list .col-lg-3 .product__item__pic img  {
        width: 400px;
        margin-top: 20px;
    }

    .product__list .col-lg-4, .product__list .col-lg-3 {
        padding-right: 15px;
        padding-left: 15px;
    }

    .m-filter__sort {
        width: 70%;
        /* padding-right: 0px;
        padding-left: 0px; */
    }
    .m-filter__option {
        width: 25%;
        padding-right: 0px;
        padding-left: 0px;
    }
    .filter__option {
        text-align: right;
    }

    .filter__item {
        text-align: left;
    }

    .primary-btn {
        font-size: 14px;
        letter-spacing: unset;
    }

    .product__details__text .primary-btn {
        padding: 16px 25px 14px;
    }

    .product-details {
        padding-top: 20px;
    }

    .spad {
        /* padding-top: 100px; */
        padding-bottom: 0px;
    }

    #exampleModalCenter .modal-content .modal-body {
        border-radius: .3rem;
        max-height: unset;
    }
    #exampleModalCenter .modal-content .modal-body .col-lg-4{
        height: 468px;
        overflow: hidden;
    }
    #exampleModalCenter .modal-content .modal-body .font-promo{
        font-size: 30px !important;
    }
    #exampleModalCenter .modal-content .modal-body img{
        max-width: unset;
        width: 100%;
    }

    .blog__details__text img.img-float {
        float: unset;
        margin-left: unset;
        max-width: 100%;
    }

    .blog__details__text .col-lg-4, .blog__details__text .col-lg-8{
        padding-right: 0px;
        padding-left: 0px;
    }

    .footer__widget, .footer__about {
        margin-bottom: 40px !important;
    }

    .padding5peren{
        padding: unset;
    }

    .founder .col-lg-5 img, .founder .col-lg-4 img{
        position: relative;
    }

    .header__top__right__language:after {
        background: unset !important;
    }

    .f-ml-4 {
        margin-left: unset !important;
    }
    
    .f-pl-4 {
        padding-left: unset !important;
    }
    
    .f-pr-4 {
        margin-left: unset !important;
    }

    .ptb-40 {
        padding-bottom: 40px;
    }
    .categories__item {
        height: 385px;
        margin-bottom: 20px;
    }

    .banner-floating-text {
        background: unset;
        backdrop-filter: unset;
        top: auto;
        bottom: 30%;
        right: 10%;
        max-width: 350px;
        padding: 5px;
        text-align: center;
    }
    .banner-floating-text.Right {
        right: 5%;
    }
    .banner-floating-text h1 {
        /* font-size: 12px; */
        margin-bottom: 0px;
        line-height: 1.4;
    }
    .banner-floating-text p {
        /* font-size: 12px; */
        padding: 8px;
        margin-bottom: 0px;
        line-height: 1.4;
    }
    .banner-floating-text .btn {
        /* font-size: 0.8rem; */
        padding: 8px 20px;
    }

    .banner-floating-text p a.btn-primary {
        padding: 5px 10px;
        /* font-size: 12px; */
        margin-top: 1%;
    }

    .product__details__pic__item img {
        max-width: unset !important;
        width: 100%;
    }

    .mt-100 {
        margin-top: 10px;
    }
    
    .mb-100 {
        margin-bottom: 10px;
    }

    .featured__item__pic {
        height: 180px !important;
    }

    .from-blog .categories__item {
        max-height: 205px;
    }

    .m-mobile {
        display: block;
    }

    .founder .col-lg-5 img, .founder .col-lg-4 img {
        margin-top: 0%;
    }

    .LatoItalic, .LatoReguler, .LatoRegulerDesc,.padding5peren, .blog__details__text p {
        text-align: center !important;
        margin: 0 auto;
    }
    .LatoReguler{
        margin: 15px auto !important;
        font-size: 14px;
    }

    .blog__details__text p {
        line-height: 25px;
    }

    .shoping-cart {
        padding-top: 10px;
    }

    .overlay-close-btn {
        top: -2px;
        right: 3px;
    }

    .shoping__discount form input {
        width: 150px;
    }

}

/* Small Device = 320px */
@media only screen and (max-width: 479px) {

    .m-mt-10 { margin-top: 10px; }
    .m-mt-20 { margin-top: 20px; }
    .title-header {
        font-size: 1.75rem;
        margin-top: 2rem;
    }

	.m-header-mobile {
        padding-left: unset;
    }

    .m-header-mobile .header__logo img{
        width: 100px;
        margin-left: 20% !important;
    }

    .m-hide {
        display: none;
    }

    .founder {
        padding: 0 0 40px 0;
        margin-top: 0px;
    }
    .founder .col-lg-5 img {
        max-width: 100%;
    }

    .video {
        padding: unset;
        margin-top: 40px;
    }
    .banner {
        padding: 40px 0 40px 0;
    }

    .featured {
        padding-top: 0px;
        padding-bottom: 0px;
    }

    .featured .col-lg-3{
        width: 50%;
    }

    .featured__controls ul li {
        font-size: unset;
        margin-right: 20px;
    }
    .latest-product__item__pic {
        width: 100px;
        overflow: hidden;
    }

    .offcanvas {
        z-index: 1050;
    }

    .footer__copyright {
        padding: unset;
        margin-top: unset;
    }

    #offer-box {
        bottom: 10px;
    }

    .m-mobile {
        display: block;
    }
}