/* ---------- Palette ---------- */
:root{
  --champagne-gold: #d9c091;
  --champagne-cream: #e8dab8;
  --off-white: #faf8f3;
  --brown-dark: #5a4634;
  --brown-soft: #7b6a57;
  --muted: #888686;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--brown-dark);
  background: var(--off-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Header */
.header{
  width: 100%;
  background: rgba(255,255,255,1);
  border-bottom: 1px solid rgba(90,70,52,0.06);
  padding: 10px 0px;
  transition: 0.7s;
}

.fixedtop{
  position: fixed;
  padding: 5px 0px;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 999;
  border-bottom: solid 1px #cecece;
  box-shadow: 0px 1px 2px #cecece;
}

.img-logo-mobile{
  width: 50px;
  border-radius: 50%;
}

.logo{
  display: none;
  justify-content: start;/*prataan objek scra horizon rata kiri*/
  align-items: center;/*perataan objek scara vertikal rata tengah*/
}

/*smua img yg ada di dlm class logo*/
.logo img{
  width: 60px;
  border-radius: 50%;
  border: solid 2px #fff;
  margin-right: 10PX;
}

.logo h2{
  color: #5a4634;
  font-family: 'Playfair Display';
  font-size: 20px;
}

.fixedtop.logo h2{
  color: #5a4634;
  font-family: 'Playfair Display';
}

.showhide{}

.brand-text h1{
  font-family: "Playfair Display", serif;
  font-size: 18px;
  color: var(--brown-dark);
  margin:0;
  line-height:1;
}
.brand-text small{
  color: var(--brown-soft);
  font-size:12px;
}


.btn-gold{
  background: linear-gradient(180deg, var(--champagne-gold), #cdb076);
  border: none;
  color:#fff;
  box-shadow: 0 6px 18px rgba(209,183,142,0.12);
}
.btn-gold:focus{outline:none; box-shadow:none}


.title-info{
  border-bottom: solid 1px #6a6a6a;
  padding-bottom: 12px;
  color: #3993ac;
  margin-bottom: 15px;
}
  .title-info span{
    border-bottom: solid 2px #3993ac;
    padding-bottom: 10px;
  }

/* HERO */
.hero{
   /* header height */
  position:relative;
  min-height:620px;
  display:flex;
  align-items: center;
  overflow:hidden;
  border-bottom: 1px solid rgba(90,70,52,0.03);
}
.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:contrast(0.9) saturate(0.9) brightness(0.6);
  transform: scale(1.05);
}
.hero-panel{
  position: relative;
  z-index:2;
  max-width:720px;
  background: rgba(250,248,243,0.5);
  padding:28px;
  border-radius:10px;
  box-shadow: 0 12px 40px rgba(84,62,45,0.8);
}
.hero-panel h2{
  font-family: "Playfair Display", serif;
  color: var(--brown-dark);
  margin-bottom:10px;
}
.hero-panel p{
  color: var(--brown-soft);
  margin-bottom:16px;
  font-size: 12px;
}

/* Sections */
.section-title{
  font-family: "Playfair Display", serif;
  color: var(--brown-dark);
  font-size:28px;
  margin-bottom:18px;
  text-align:center;
}
.section-subtitle{
  color: var(--brown-dark);
  font-weight:600;
  margin-bottom:8px;
}
.section-lead{
  color: var(--muted);
  font-size:16px;
}

.section-lead  strong{font-weight: normal;}
.section-lead  a{color:var(--muted); text-decoration: none;}

/* cards & lists */
.treatment-title{
  color: var(--brown-dark);
  font-weight:700;
}
.treatment-list{
  list-style: none;
  padding-left:0;
  color: var(--brown-soft);
  line-height:1.8;
}

/* gallery */
.bg-soft{background:transparent}
.carousel-inner img{height:550px; width: 100%; object-fit:contain; background: white;}

/* reviews */
.review-card{background: #fff}
.review-img{width:64px;height:64px;object-fit:cover}

/* contact panel */
.contact-panel a{color:var(--brown-dark); text-decoration:none}

/* footer */
.footer{
  background:linear-gradient(180deg, rgba(90,70,52,0.02), rgba(90,70,52,0.04));
  color:var(--brown-soft);
}
.footer-logo-img{
  width:84px;
  opacity:0.8;
  filter:grayscale(60%);
  border-radius:50%;
}


/* utility color blocks */
.bg-light-cream{background:var(--champagne-cream)}

.btn-gold.w-100 {
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  padding: 12px 16px;
}

.btn-outline-dark.w-100 {
  border-color: var(--brown-dark);
  color: var(--brown-dark);
  font-weight: 600;
  text-transform: uppercase;
  padding: 12px 16px;
}

.btn-outline-dark.w-100:hover {
  background: var(--brown-dark);
  color: #fff;
}

.contact-card div{
border: solid1px #cecece;
padding: 10px;
background-color: #FFF6DA;
border-radius: 10px;
margin-bottom: 15px;
}

.contact-card p, .contact-card a {
  color: var(--brown-dark);
  font-size: 15px;
}

.contact-card i {
  color: var(--champagne-gold);
}

.footer {
  background: var(--off-white);
  padding-top: 60px;
  padding-bottom: 40px;
}

.footer-title {
  font-family: "Playfair Display", serif;
  font-size: 15px;
  color: var(--brown-dark);
  margin-bottom: 8px;
}

/*.footer-logo-img {
  width: 110px;
  opacity: 0.14;
  filter: grayscale(100%);
  user-select: none;
}*/

.copyright {
  color: var(--brown-soft);
  opacity: 0.75;
}

.copyright a{
  color: var(--brown-soft); text-decoration: none;}}

/* Treatments Tab Switcher */
.treatment-tabs button {
  background: transparent;
  border: 1px solid var(--champagne-gold);
  color: var(--brown-soft);
  padding: 10px 20px;
  margin: 0 8px;
  border-radius: 6px;
  font-weight: 500;
  transition: 0.3s;
}

.treatment-tabs button.active,
.treatment-tabs button:hover {
  background: var(--champagne-gold);
  color: #fff;
}

/*.treatment-content {display: none;}
.treatment-content.show {display: block;}*/

.box-content{
  position: relative;
  height: 100%;
}

.box-content p{
  margin-bottom: 80px;
  font-size: 14px;
}

.box-image{
  position: relative;

}
  .box-image h3{
    position: absolute;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    padding: 10px;
    bottom: 0px;
    margin: 0px;
    font-size: 16px;
  }

  .best-selling {
    width: 99px;
    height: 97px;
    position: absolute;
    top: -4px;
    left: -4px;
  }

.to-top{
  width: 60px;
  height: 60px;
  /*background-color: #f00;*/
  position: fixed;
  bottom: 20px;
  right: 20px;
  cursor: pointer;
  display: none;
}

.btn-custom{
  padding: 0.2rem 0.5rem;
 font-size: 1rem;
 border-radius: 0.5rem;
}

/* small screens tweaks */
@media (max-width: 767px){
  .hero{
    min-height:360px;
  }
  .hero-panel{padding:18px; margin:18px}
  .carousel-inner img{height:220px}
}


@media(min-width: 768px)
{
  .logo{display: flex;}
  .slide-desc{display: block;}
  .feature-info{padding: 0px 150px!important;}
  .hero-panel{
  background: rgba(250,248,243,0.8);
  }
  .hero-panel p{
    font-size: normal;
  }

  .btn-custom{
    padding: 0.5rem 1rem;
   font-size: 1.25rem;
   border-radius: 0.5rem;
  }

  .box-content p{
  font-size: normal;
  }

    .box-image h3{
      font-size: normal;
    }
}


.full-text {
  display: none;
}

.read-more {
  color: #007bff;
  font-style: italic;
  cursor: pointer;
  text-decoration: none;
}

.read-more:hover {
  text-decoration: underline;
}

/* tombol treatment saja */
#treatments button{
  padding:12px 28px;
  margin:5px;
  border:none;
  border-radius:30px;
  background: linear-gradient(135deg,#d4af37,#f5e6a7);
  color:#4a3b1f;
  font-weight:600;
  letter-spacing:0.5px;
  cursor:pointer;
  transition: all 0.3s ease;
}

/* efek hover */
#treatments button:hover{
  background: linear-gradient(135deg,#c9a227,#e8d48a);
  transform: translateY(-2px);
  box-shadow:0 6px 15px rgba(0,0,0,0.15);
}