*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
  margin:0;
  font-family: 'Poppins', sans-serif;
  background:#f7f3ef;
}

/* NAVBAR MAIN */
.navbar{
  position:relative;
  top:0;
  left:0;
  width:100%;
  z-index:9999; /* VERY HIGH */
  padding-top: 30px;
}

/* CONTAINER FOR THE INJECTED POPUP BUTTONS */
#dynamicDetailsBody .details-buttons {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
    width: 100%;
}

/* PREMIUM BOOK NOW BUTTON STYLING */
#dynamicDetailsBody .dynamic-popup-book-btn {
    display: inline-flex !important;
    visibility: visible !important;
    justify-content: center;
    align-items: center;
    padding: 14px 35px;
    background: #b08968 !important; /* Premium brand gold/brown accent */
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(176, 137, 104, 0.3);
    min-width: 180px;
    height: 54px;
    cursor: pointer;
}

#dynamicDetailsBody .dynamic-popup-book-btn:hover {
    background: #ff6600 !important; /* Vibrant interactive orange */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 102, 0, 0.4);
}

/* VIEW LESS BUTTON STYLING */
#dynamicDetailsBody .less-btn {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    padding: 14px 35px;
    border: none;
    border-radius: 10px;
    background: #222222;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    min-width: 180px;
    height: 54px;
    cursor: pointer;
}

#dynamicDetailsBody .less-btn:hover {
    background: #444444;
}

/* RESPONSIVE LAYOUT OPTIMIZATIONS FOR SMARTPHONES */
@media (max-width: 768px) {
    #dynamicDetailsBody .details-buttons {
        flex-direction: column-reverse; /* Places Book Now on top of View Less on mobile */
        gap: 12px;
        justify-content: center;
    }
    #dynamicDetailsBody .dynamic-popup-book-btn, 
    #dynamicDetailsBody .less-btn {
        width: 100%; /* Spans full width on small interfaces */
    }
}



/* ===============================
   SERVICE BUTTONS
================================= */

.service-buttons{
    display:flex;
    gap:10px;
    margin-top:15px;
}

.service-buttons button,
.service-buttons a{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;

    height:48px;
    padding:0 18px;

    border:none;
    border-radius:8px;

    font-size:15px;
    font-weight:700;
    text-decoration:none;

    cursor:pointer;
    transition:all .3s ease;
    box-sizing:border-box;
}

/* View More / View Process */

.view-btn,
.details-btn{
    background:#222;
    color:#fff;
}

.view-btn:hover,
.details-btn:hover{
    background:#111;
}

/* Book Now */

.book-btn{
   background: #6B8E23 !important; /* Olive Green */
    color:#fff !important;
}

.book-btn:hover{
    background:#1EBE5D !important;
    color:#fff !important;
}

.book-btn:active{
    background:#128C7E !important;
}

/* Mobile */

@media (max-width:768px){

    .service-buttons{
        gap:8px;
    }

    .service-buttons button,
    .service-buttons a{
        height:42px;
        padding:0 12px;
        font-size:14px;
        font-weight:700;
        border-radius:8px;
    }
}




/* WHITE CONTAINER */
.nav-container{
  width:90%;
  margin:auto;
  background:#d4d2d2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-radius: 20px;
  padding:15px 30px;
  box-shadow:0 8px 20px rgba(0,0,0,0.08);
  position:relative;
  z-index:2;
}

/* LOGO */
.logo{
  font-weight:600;
  font-size:25px;
  display:flex;
  align-items:center;
  font-family: "Satisfy", cursive;
  gap:8px;
  margin-left: -34px;
}

.logo img {
    width: 78px;
    height: 45px;
    object-fit: contain;
    display: block;
}



/* MENU */
.nav-links{
  display:flex;
  gap:25px;
  align-items:center;
}

.nav-links a{
  text-decoration:none;
  color:#333;
  font-size:14px;
  font-weight:500;
  transition:0.3s;
}

.nav-links a:hover{
  color:#ff6600;
}

.search{
  cursor:pointer;
}

/* ORANGE ANGLED SHAPE */
.nav-shape{
  position:absolute;
  top:0;
  right:0;
  width:45%;
  height:100%;
  background:#ff6a00;
  clip-path:polygon(25% 0, 100% 0, 100% 100%, 0% 100%);
  z-index:1;
}



/* Mobile menu only */
@media (max-width:768px){

    .nav-links{
        background:#fff !important;
        box-shadow:0 10px 25px rgba(0,0,0,0.15);
    }

    .nav-links a{
        color:#000 !important;
    }

    .nav-links a:hover{
        color:#2e7d32 !important;
    }

}







/* HERO SECTION */
.hero{
  background: transparent;
  padding: 100px 5%;
  padding-top: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* CONTAINER */
.hero-container{
  max-width: 900px;
  width: 100%;
}

/* TEXT */
.hero-text{
  opacity: 0;
  transform: translateY(50px);
  animation: fadeUp 1s ease forwards;
}

/* TAG */
.hero-text .tag{
  color: #ffffff;
   font-size: 27px;
  font-weight: 500;
  margin-bottom: 10px;
  animation-delay: 0.2s;
}

/* HEADING */
.hero-text h1{
  font-size: 48px;
  line-height: 1.2;
  color: #ffffff;
  animation-delay: 0.4s;
}

.hero-text h1 span{
  color: #71dc33;
}

/* DESCRIPTION */
.hero-text .desc{
  margin-top: 15px;
  color: #f2f2f2;
  font-size: 15px;
  animation-delay: 0.6s;
}

/* BUTTON */
.btn{
  display: inline-block;
  margin-top: 25px;
  padding: 12px 30px;
  background: #d3d3d3;
  color: #000000;
  border-radius: 30px;
  text-decoration: none;
  transition: 0.3s;
  animation-delay: 0.8s;
}

.btn:hover{
  background: #777777;
}

/* BADGE */
.badge{
  margin: 40px auto 0;
  width: fit-content;
  background: rgba(96, 52, 52, 0.9);
  backdrop-filter: blur(8px);
  padding: 15px 25px;
  border-radius: 12px;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  animation: float 3s ease-in-out infinite;
}

.badge strong{
  display: block;
  font-size: 20px;
}

.badge span{
  font-size: 12px;
}

/* ANIMATIONS */
@keyframes fadeUp{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

/* RESPONSIVE */
@media(max-width: 900px){
  .hero{
    padding: 80px 5%;
    padding-top: 70px;
  }

  .hero-text h1{
    font-size: 32px;
  }

  .badge{
    margin-top: 30px;
  }
}


/* SECTIONS */
section{
    padding:80px 20px;
    text-align:center;
    background:#f7f3ef;
}




/* ABOUT SECTION */
.about{
  padding:100px 5%;
padding-top: 100px;
  
}


/* TABLET */
@media (max-width: 1024px){
  .about{
    padding-top: 90px;
  }
}

/* MOBILE */
@media (max-width: 768px){
  .about{
    padding-top: 30px;
  }
}

/* CONTAINER */
.about-container{
  display:flex;
  align-items:center;
  gap:50px;
  flex-wrap:wrap;
}

/* IMAGE */
.about-image{
  flex:1;
}

.about-image img{
  width:100%;
  border-radius:20px;
  
}

/* CONTENT */
.about-content{
  flex:1;
}

.experience{
  font-size:14px;
  color:#666;
  margin-bottom:10px;
}

.experience span{
  background:#b08968;
  color:#fff;
  padding:3px 10px;
  border-radius:6px;
}

.about-content h2{
  font-size:42px;
  color:#1b2a1b;
  margin-bottom:20px;
}

.about-content h2 span{
  color:#b08968;
  font-size:24px;
  margin-left:10px;
}

.about-content p{
  color:#555;
  line-height:1.7;
  margin-bottom:15px;
}

/* BUTTONS */
.about-buttons{
  display:flex;
  gap:15px;
  margin-top:20px;
}

.btn{
  padding:12px 25px;
  border-radius:8px;
  text-decoration:none;
  font-size:14px;
}

.primary{
  background:#b08968;
  color:#fff;
}
.primary:hover {
  background: #ff6600; /* Darker brown */
  color: #fff;
  transform: translateY(-2px);
}
.secondary{
  border:1px solid #ccc;
  color:#ff6600;
  
}

/* RESPONSIVE */

/* TABLET */
@media(max-width:1024px){
  .about-content h2{
    font-size:32px;
  }
}

/* MOBILE */
@media(max-width:768px){

.about-container{
  flex-direction:column;
  text-align:center;
}

/* HIDE IMAGE */
.about-image{
  display:none;
}

.about-buttons{
  justify-content:center;
}

}



/* Laptop/Desktop */
@media (min-width: 992px) {
    .about-content h2 span {
        display: block;
        margin-top: 10px;
        margin-left: 0;
        font-size: 24px;
        color: #b08968;
    }
}






















/* SECTION */
.yoga{
  padding:100px 5%;
  background:#f8f5f0;
  text-align:center;
  padding-top:20px;
}

.yoga h2{
  font-size:40px;
  margin-bottom:40px;
  color:#1b2a1b;
 font-family:"Montserrat", sans-serif;
}

/* GRID */
.yoga-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    width:100%;
    max-width:100%;
    margin:0;
}

/* CARD */
.yoga-card{
  background:#ffffff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition:0.3s;
  position:relative;
}

/* IMAGE */
.yoga-card img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

/* CONTENT */
.yoga-content{
  padding:22px 20px;
  text-align:left;
}

.yoga-content h3{
  font-size:20px;
  margin-bottom:10px;
  color:#222;
}

.yoga-content p{
  font-size:15px;
  line-height:1.7;
  color:#555;
}

/* GOLD LINE */
.yoga-card::before{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:3px;
  background:#bfa14a;
  transform:scaleX(0);
  transform-origin:left;
  transition:0.3s;
}

/* HOVER */
.yoga-card:hover{
  transform:translateY(-10px);
  box-shadow:0 15px 40px rgba(0,0,0,0.15);
}

.yoga-card:hover::before{
  transform:scaleX(1);
}

/* TABLET */
@media(max-width:1024px){

  .yoga-grid{
    grid-template-columns:repeat(2,1fr);
  }

}

/* MOBILE */
@media(max-width:600px){

  .yoga{
    padding:60px 15px;
    padding-top:15px;
  }

  .yoga-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .yoga h2{
    font-size:30px;
  }

  .yoga-card img{
    height:180px;
  }

  .yoga-content{
    padding:16px;
  }

  .yoga-content h3{
    font-size:17px;
  }

  .yoga-content p{
    font-size:13px;
    line-height:1.5;
  }
}


.yoga-book-btn{
    text-align:center;
    margin-top:40px;
}

.book-now-btn{
    display:inline-block;
    padding:14px 36px;
    background:#b08968;
    color:#fff;
    text-decoration:none;
    border-radius:10px;
    font-size:16px;
    font-weight:600;
    transition:.3s ease;
}

.book-now-btn:hover{
    background:#ff6600;
    transform:translateY(-3px);
}








/* SECTION */
.testimonials{
  padding:100px 5%;
  background:#f8f5f0;
  text-align:center;
  padding-top: 10px;
  margin-top: 60px;
  margin-bottom: -40px;
}

.testimonials h2{
  font-size:40px;
  margin-bottom:40px;
  color:#1b2a1b;
}

/* WRAPPER (IMPORTANT FOR BUTTON POSITION) */
.testimonial-wrapper{
  position:relative;
  max-width:1000px;
  margin:auto;
  overflow:hidden;
}

/* SLIDER */
.testimonial-slider{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none; /* Firefox */
}

.testimonial-slider::-webkit-scrollbar{
  display:none; /* Chrome */
}

/* CARD */
.testimonial-card{
  min-width:300px;
  background:#fff;
  padding:25px;
  border-radius:15px;
 
  text-align:left;
  flex-shrink:0;
}

/* TEXT */
.testimonial-card p{
  font-size:14px;
  color:#555;
  margin-bottom:10px;
}

.stars{
  color:#bfa14a;
  margin-bottom:8px;
}

.testimonial-card h4{
  color:#1b2a1b;
}

/* NAV CONTAINER */
.testimonial-nav{
  margin-top:25px;
  display:flex;
  justify-content:center;
  gap:15px;
}

/* BUTTON */
.nav-btn{
  background:#6a994e;
  color:#fff;
  border:none;
  font-size:18px;
  padding:10px 16px;
  border-radius:50%;
  cursor:pointer;
  transition:0.3s;
}

.nav-btn:hover{
  background:#bfa14a;
}

/* MOBILE - COMPLETELY DIFFERENT LAYOUT */
@media(max-width:768px){

/* REMOVE SLIDER BEHAVIOR */
.testimonial-slider{
  display:block;
  overflow:visible;
}

/* CARD - COMPACT LIST STYLE */
.testimonial-card{
  min-width:100%;
  margin-bottom:12px;
  padding:15px 15px;
  border-radius:10px;

  display:flex;
  flex-direction:column;
  gap:6px;

  box-shadow:0 5px 15px rgba(0,0,0,0.08);
}

/* TEXT */
.testimonial-card p{
  font-size:13px;
  line-height:1.5;
  margin:0;
}

/* NAME + STARS INLINE */
.stars{
  font-size:12px;
  margin:0;
}

.testimonial-card h4{
  font-size:13px;
  margin:0;
  font-weight:500;
  color:#1b2a1b;
}

/* OPTIONAL: HIDE BUTTONS IN MOBILE */
.testimonial-nav{
  display:none;
}

}


.menu-toggle{
  display:none;
  font-size:26px;
  cursor:pointer;
}

/* MOBILE */
@media(max-width:900px){

.menu-toggle{
  display:block;
}

.nav-links{
  display:flex !important;
  position:absolute;
  top:70px;
  right:5%;
  width:260px;
  background:#0f0f1a; /* dark like sidebar */
  flex-direction:column;
  padding:20px;
  gap:10px;

  border-radius:12px;
  box-shadow:0 15px 40px rgba(0,0,0,0.2);

  opacity:0;
  visibility:hidden;
  transform:translateY(-20px) scale(0.95);
  transition:0.3s ease;
  z-index:1000;
}

/* SHOW MENU */
.nav-links.active{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
}

/* LINKS STYLE */
.nav-links a{
  color:#fff;
  padding:12px 15px;
  border-radius:10px;
  font-size:14px;
  transition:0.3s;
}

/* HOVER EFFECT */
.nav-links a:hover{
  background:#1c1c2e;
}

/* ACTIVE / SELECTED (like Messages highlight) */
.nav-links a.active{
  background:#e6e6e6;
  color:#000;
}


}





/* =========================
   FOOTER
========================= */

#contact{
  padding:60px 5% 0;
  background:#f5f5f5;
  margin-bottom:-31px;
}

/* WRAPPER */
#contact .footer-wrapper{

  max-width:1200px;
  margin:auto;

  background:#383838;

  border-radius:24px;
  overflow:hidden;

  box-shadow:0 15px 40px rgba(0,0,0,0.12);
}

/* =========================
   DESKTOP / LAPTOP
========================= */

@media(min-width:769px){

  #contact .footer-wrapper{
    display:grid;
    grid-template-columns:38% 62%;
    align-items:stretch;
  }

  /* LEFT IMAGE */
  #contact .footer-image{
    position:relative;
    height:100%;
  }

  #contact .footer-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  /* CONTENT */
  #contact .footer-content{
    padding:45px 40px;
    background:#383838;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }

}

/* =========================
   LOCATION BUTTON
========================= */

#contact .location-btn{

  position:absolute;

  bottom:30px;
  left:50%;

  transform:translateX(-50%);

  background:rgba(0,0,0,0.78);

  color:#fff;

  border:none;
  border-radius:40px;

  padding:12px 24px;

  cursor:pointer;

  font-size:15px;
  font-weight:500;

  font-family:"Montserrat", sans-serif;

  transition:0.3s ease;

  backdrop-filter:blur(5px);
}

#contact .location-btn:hover{
  background:#e9c46a;
  color:#000;
}

/* =========================
   GRID
========================= */

#contact .footer-grid{

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:40px;
}

/* HEADINGS */
#contact .footer-grid h4{

  font-size:24px;

  margin-bottom:18px;

  font-weight:600;

  color:#fff;
}

/* LINKS */
#contact .footer-grid a{

  display:block;

  color:#ddd;

  text-decoration:none;

  margin-bottom:12px;

  font-size:15px;

  line-height:1.6;

  font-family:"Montserrat", sans-serif;

  transition:0.3s ease;
}

#contact .footer-grid a:hover{
  color:#e9c46a;
}

/* TEXT */
#contact .footer-grid p{

  font-size:15px;

  line-height:1.8;

  margin-bottom:12px;

  color:#ddd;

  font-family:"Montserrat", sans-serif;
}

/* =========================
   BOTTOM
========================= */

#contact .footer-bottom{

  margin-top:40px;

  padding-top:22px;

  border-top:1px solid rgba(255,255,255,0.12);

  display:flex;

  justify-content:space-between;
  align-items:center;

  gap:20px;
}

#contact .footer-bottom p{
  color:#ddd;
  font-size:14px;
}

/* SOCIAL */
#contact .social{
  display:flex;
  align-items:center;
  gap:15px;
}

#contact .social a{
  color:#fff;
  text-decoration:none;
  transition:0.3s ease;
}

#contact .social a:hover{
  color:#e9c46a;
}

/* =========================
   TABLET
========================= */

@media(max-width:1024px){

  #contact .footer-grid{
    grid-template-columns:repeat(2,1fr);
  }

}

/* =========================
   MOBILE
========================= */

@media(max-width:768px){

  #contact{
    padding:40px 15px;
  }

  #contact .footer-wrapper{
    display:block;
  }

  /* IMAGE */
  #contact .footer-image{
    width:100%;
    height:320px;
    position:relative;
  }

  #contact .footer-image img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* CONTENT */
  #contact .footer-content{
    padding:30px 22px;
    background:#383838;
    color:#fff;
  }

  /* GRID */
  #contact .footer-grid{
    grid-template-columns:1fr;
    gap:25px;
  }

  #contact .footer-grid h4{
    font-size:20px;
    margin-bottom:12px;
  }

  #contact .footer-grid a,
  #contact .footer-grid p{
    font-size:14px;
  }

  /* BOTTOM */
  #contact .footer-bottom{
    flex-direction:column;
    text-align:center;
    gap:12px;
  }

  #contact .social{
    justify-content:center;
  }

  /* BUTTON */
  #contact .location-btn{
    padding:10px 20px;
    font-size:14px;
    bottom:20px;
  }

}



.credit-underline{
  text-align:center;
  padding:15px;
  font-size:13px;
  padding-top: 0.1px;
  color:#666;
}

.credit-underline a{
  color:#6a994e;
  text-decoration:none;
  position:relative;
}

/* ANIMATED UNDERLINE */
.credit-underline a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:0%;
  height:2px;
  background:#bfa14a;
  transition:0.3s;
}

.credit-underline a:hover::after{
  width:100%;
}







/* SERVICES */
.services{
  padding: 0 5% 40px;
  margin-top:-40px;   /* pull section upward */

}


.services p{
    max-width: 700px;
    margin: 12px auto 30px;
    font-size: 15px;
    line-height: 1.6;
    color: #666;
    text-align: center;
}



.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
}

@media(max-width:768px){
  .service-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:480px){
  .service-grid{
    grid-template-columns:1fr;
  }
}

.service-card{
  background:#fff;
  border-radius:18px;
  padding:15px;
  text-align:center;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.service-card img{
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:14px;
}

.services h2{
  margin-bottom:20px;   /* increase gap below heading */
  font-size:28px;
}
.view-btn{
  
  border:none;
  padding:10px 18px;
  border-radius:8px;
  cursor:pointer;
font-weight:600;
  font-size: 15px;
  font-family:"Montserrat", sans-serif;
}

/* DETAILS SECTION */
.treatment-details-section{
  display:none;
  padding:1px 8%;   /* reduce from 70px to 40px */
  background:#f9f6ef;
  margin-top:10px;   /* reduce from 40px to 10px */
  animation:fadeIn 0.4s ease;
  margin-bottom:35px;
}

.details-container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:50px;
  align-items:center;
}

.details-image img{
  width:100%;
  border-radius:20px;
  height:450px;
  object-fit:cover;
}

.details-content h2{
  font-size:42px;
  margin-bottom:10px;
   margin-top:-19px;
  color:#222;
}

.details-content p{
  max-width:800px;
  margin:0 auto 25px;

  font-size:17px;
  line-height:1.9;

  text-align:center;
}

.details-buttons{
  margin-top:30px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:15px;
  flex-wrap:wrap;
  width:100%;
}

.book-btn,
.less-btn{
  display:flex;
  justify-content:center;
  align-items:center;

  padding:12px 22px;
  min-width:160px;
  height:50px;

  border-radius:8px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  font-family:"Montserrat", sans-serif;
  text-align:center;

  margin:0;   /* REMOVE margin-right */
}

.book-btn{
  background:#cecece;
  color:#222;
  font-weight:600;
  font-size: 16px;
}

.less-btn{
  background:#222;
  color:#fff;
}

/* MOBILE */
@media(max-width:768px){

  .details-container{
    grid-template-columns:1fr;
  }

  .details-image img{
    height:300px;
  }

  .details-content h2{
    font-size:30px;
  }
}

@keyframes fadeIn{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.service-card{
  overflow: visible;
}

.treatment-details-section{
  margin-top:20px;
  padding:20px;
  background: white;
  width:100%;
}

/* MOBILE */
@media(max-width:1024px){

  .treatment-details-section{
    position:relative;
    transform:none;
    top:auto;
    left:auto;
    width:100%;
  }

}

/* LAPTOP */
@media(min-width:1025px){

  .treatment-details-section{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:80%;
    max-width:1000px;
    z-index:99999;
  }

}

@media (min-width:1025px){

  .treatment-details-section{
    position:fixed !important;

    top:50% !important;
    left:50% !important;

    transform:translate(-50%, -50%) !important;

    width:80%;
    max-width:1000px;

    max-height:80vh;
    overflow-y:auto;

    background:#fff;

    padding:40px 50px;

    border-radius:25px;

    z-index:999999;

    margin:0 !important;
  }


.details-buttons{
    position:relative;
    left:50%;
    transform:translateX(-50%);

    width:max-content;

    display:flex;
    gap:15px;
}



}






body{
  overflow-x:hidden;
}

@media (min-width:1025px){

  body:has(.treatment-details-section[style*="block"])::after{
    content:"";
    position:fixed;
    inset:0;

    background:rgba(0,0,0,.45);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);

    z-index:999998;
  }

}



/* FULL TOP BACKGROUND SLIDER */
/* TOP BACKGROUND (NAVBAR + HERO) */
body::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:650px;

  background-size:cover;
  background-position:center;

  z-index:-2;
  animation:bgSliderDesktop 12s infinite;
}

/* FIXED KEYFRAMES */
@keyframes bgSliderDesktop{
  0%{background-image:url('hero1.jpeg');}
  25%{background-image:url('hero2.jpeg');} /* ✅ fixed */
  50%{background-image:url('hero4.jpeg');}
  75%{background-image:url('hero2.jpeg');} /* smooth loop */
  100%{background-image:url('hero1.jpeg');}
}

body::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:650px;

  background:rgba(0,0,0,0.6);
  z-index:-1;
}

@media(max-width:768px){

  body::before{
    height:650px;
    animation:bgSliderMobile 12s infinite;
  }

  @keyframes bgSliderMobile{
    0%{background-image:url('herom2.jpeg');}
    25%{background-image:url('herom1.jpeg');}
    50%{background-image:url('herom3.jpeg');}
    75%{background-image:url('herom5.jpeg');}
    100%{background-image:url('herom2.jpeg');} /* loop fix */
  }

}



/* GALLERY TOGGLE BAR */
.gallery-toggle-bar{
  width:90%;
  max-width:900px;
  margin:5px auto 8px;
  background:#b99267;
  color:#fff;
  padding:15px 22px;
  border-radius:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  font-size:22px;
  font-weight:600;
  transition:0.3s ease;
}

.gallery-toggle-bar:hover{
  transform:translateY(-3px);
}

#galleryIcon{
  font-size:30px;
  line-height:1;
}

/* HIDDEN GALLERY */
.wellness-gallery{
  display:none;
  padding:18px 5% 0;
  background:#f5f2ed;
  margin:0;
  animation:fadeGallery 0.5s ease;
  margin-bottom: 40px;
}

/* FILTER */
.wellness-gallery .gallery-filter{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  margin-bottom:25px;
}

.wellness-gallery .gallery-filter button{
  background:none;
  border:none;
  font-size:18px;
  font-weight:600;
  cursor:pointer;
  color:#222;
  font-family:"Montserrat", sans-serif;
}

.wellness-gallery .gallery-filter button.active{
  color:#58b3e7;
}

/* GRID */
.wellness-gallery .gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
}

/* IMAGE CONTAINER */
.wellness-gallery .gallery-item{
  width:100%;
  height:280px;
  overflow:hidden;
  border-radius:18px;
  background:#ddd;
  position:relative;
}

/* IMAGE */
.wellness-gallery .gallery-item img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block;
  border-radius:18px;
  transition:0.4s ease;
}

.wellness-gallery .gallery-item:hover img{
  transform:scale(1.05);
}

/* HIDE */
.wellness-gallery .gallery-item.hide{
  display:none;
}

/* TABLET */
@media(max-width:900px){
  .wellness-gallery .gallery-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .wellness-gallery .gallery-item{
    height:240px;
  }
}

/* MOBILE - 2 IMAGES PER ROW */
@media(max-width:600px){

  .gallery-toggle-bar{
    width:92%;
    font-size:16px;
    padding:13px 16px;
    border-radius:12px;
  }

  #galleryIcon{
    font-size:26px;
  }

  .wellness-gallery{
    padding:12px 3% 0;
  }

  .wellness-gallery .gallery-filter{
    gap:14px;
    margin-bottom:18px;
  }

  .wellness-gallery .gallery-filter button{
    font-size:13px;
  }

  .wellness-gallery .gallery-grid{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }

  .wellness-gallery .gallery-item{
    height:150px;
    border-radius:12px;
  }

  .wellness-gallery .gallery-item img{
    border-radius:12px;
  }
}

/* SMALL MOBILE */
@media(max-width:380px){
  .wellness-gallery .gallery-item{
    height:130px;
  }
}

/* ANIMATION */
@keyframes fadeGallery{
  from{
    opacity:0;
    transform:translateY(30px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}



.location-btn{
  position:absolute;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  padding:12px 24px;
  background:#6D8C45;
  color:white;
  text-decoration:none;
  border-radius:30px;
  font-weight:600;
  transition:0.3s;
}

.location-btn:hover{
  transform:translateX(-50%) scale(1.05);
}




/* ========================================
   DETAILS MODAL
======================================== */

.details-modal{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,.75);
    backdrop-filter:blur(8px);

    display:flex;
    justify-content:center;
    align-items:center;

    padding:40px;

    z-index:999999;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:.35s ease;
}

.details-modal.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

/* ========================================
   MODAL CONTENT
======================================== */

.details-modal .details-content{
    width:100%;
    max-width:1000px;
    max-height:90vh;

    overflow-y:auto;

    background:#fff;
    border-radius:24px;

    padding:60px;

    position:relative;

    box-shadow:0 30px 80px rgba(0,0,0,.15);

    transform:translateY(30px);
    transition:.35s ease;
}

.details-modal.active .details-content{
    transform:translateY(0);
}

/* ========================================
   SCROLLBAR
======================================== */

.details-modal .details-content::-webkit-scrollbar{
    width:8px;
}

.details-modal .details-content::-webkit-scrollbar-thumb{
    background:#d6d6d6;
    border-radius:50px;
}

/* ========================================
   CLOSE BUTTON
======================================== */

.details-modal .close-details{
    position:absolute;
    top:25px;
    right:25px;

    width:44px;
    height:44px;

    border:none;
    border-radius:50%;

    background:#111;
    color:#fff;

    font-size:1.2rem;
    cursor:pointer;

    transition:.3s ease;
}

.details-modal .close-details:hover{
    transform:rotate(90deg);
}

/* ========================================
   TYPOGRAPHY
======================================== */

.details-modal .details-content h2{
    font-size:2.4rem;
    font-weight:700;
    color:#111;

    line-height:1.2;

    margin-bottom:25px;
    padding-right:60px;
}

.details-modal .details-content h3{
    font-size:1.4rem;
    font-weight:600;

    color:#111;

    margin-top:40px;
    margin-bottom:18px;

    padding-bottom:12px;

    border-bottom:1px solid #ececec;
}

.details-modal .details-content h4{
    font-size:1.1rem;
    font-weight:600;
    color:#111;
    margin-bottom:10px;
}

.details-modal .details-content p{
    font-size:1rem;
    line-height:1.9;

    color:#5f5f5f;

    margin-bottom:18px;

    text-align:justify;
}

.details-modal .details-content ul{
    margin:20px 0;
    padding-left:25px;
}

.details-modal .details-content li{
    margin-bottom:14px;
    line-height:1.9;
    color:#5f5f5f;
}

.details-modal .details-content strong{
    color:#111;
    font-weight:600;
}

/* ========================================
   INFO BOX
======================================== */

.details-modal .duration-box{
    margin:25px 0;

    padding:20px 24px;

    background:#fafafa;

    border-left:4px solid #111;
    border-radius:12px;
}

/* ========================================
   TABLE
======================================== */

.details-modal .details-content table{
    width:100%;
    margin-top:30px;

    border-collapse:separate;
    border-spacing:0;

    border-radius:16px;
    overflow:hidden;

    box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.details-modal .details-content th{
    background:#111;
    color:#fff;

    padding:16px;
    text-align:left;

    font-weight:600;
}

.details-modal .details-content td{
    padding:16px;

    color:#555;
    vertical-align:top;

    border-bottom:1px solid #f0f0f0;
}

.details-modal .details-content tr:nth-child(even){
    background:#fafafa;
}

.details-modal .details-content tr:last-child td{
    border-bottom:none;
}

/* ========================================
   DURATION CARDS
======================================== */

.details-modal .duration-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-top:30px;
}

.details-modal .duration-card{
    background:#fafafa;
    border:1px solid #ececec;
    border-radius:18px;

    padding:25px;

    transition:.3s ease;
}

.details-modal .duration-card:hover{
    transform:translateY(-3px);
}

.details-modal .duration-days{
    display:inline-block;

    background:#111;
    color:#fff;

    padding:8px 16px;

    border-radius:50px;

    font-size:.85rem;
    font-weight:600;

    margin-bottom:15px;
}

.details-modal .duration-card h4{
    font-size:1.05rem;
    margin-bottom:10px;
}

.details-modal .duration-card p{
    margin:0;
    line-height:1.7;
}

/* ========================================
   BODY LOCK
======================================== */

body.modal-open{
    overflow:hidden;
}

/* ========================================
   MOBILE
======================================== */

@media(max-width:768px){

    .details-modal{
        padding:15px;
    }

    .details-modal .details-content{
        padding:30px 22px;
        border-radius:18px;
    }

    .details-modal .details-content h2{
        font-size:1.8rem;
        padding-right:40px;
    }

    .details-modal .details-content h3{
        font-size:1.15rem;
    }

    .details-modal .details-content p,
    .details-modal .details-content li{
        font-size:.92rem;
        line-height:1.8;
    }

    .details-modal .details-content table{
        font-size:.72rem;
        margin-top:20px;
    }

    .details-modal .details-content th,
    .details-modal .details-content td{
        padding:8px;
        line-height:1.4;
    }

    .details-modal .duration-grid{
        grid-template-columns:1fr;
        gap:15px;
    }

    .details-modal .duration-card{
        padding:20px;
    }
}


.service-buttons{
    display:flex;
    gap:10px;
    margin-top:15px;
}

.details-btn{
    padding:12px 20px;
    font-family:"Montserrat", sans-serif;
    border:none;
    border-radius:8px;
    cursor:pointer;
    background:#222;
    color:#fff;
}


.treatment-details-section{
  grid-column:1 / -1;
}

.details-image{
    display:none;
}


/* LAPTOP & DESKTOP ONLY */
@media (min-width: 1025px){

  .treatment-details-section{
      grid-column:1 / -1;
      display:none;

      margin-top:25px;
      padding:40px;

      background:#fff;
      border-radius:20px;

      box-shadow:0 10px 30px rgba(0,0,0,.08);
  }

  .details-container{
      max-width:900px;
      margin:0 auto;

      display:flex;
      flex-direction:column;
      align-items:flex-start;
      text-align:left;
  }

  .details-content h2{
      font-size:48px;
      line-height:1.15;
      margin-bottom:20px;
      color:#222;

      max-width:700px;
  }

  .details-content p{
      font-size:18px;
      line-height:1.8;
      color:#666;

      max-width:800px;
      margin-bottom:20px;
  }

  .details-buttons{
      display:flex;
      justify-content:flex-start;
      gap:15px;
      margin-top:25px;
  }

  .book-btn,
  .less-btn{
      min-width:180px;
      height:54px;

      border-radius:10px;
      font-size:16px;
      font-weight:500;
  }

}




.service-buttons{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px; /* space between buttons */
  margin-top: 15px;
}