/* Base styles */
body {
   background-color: #6a2e6b; /* Light neutral */
   margin: 0;
   font-family: 'Open Sans', sans-serif;
   color: #333;
   line-height: 1.7;
 }
 
 .heading {
   text-align: center;
   background-color: #6a2e6b; /* Deep plum */
   padding: 3rem 1rem;
   max-width: 64rem;
   margin: 0 auto;
 }
 
 h1 {
   font-family: 'Great Vibes', cursive;
   font-size: 4rem;
   color: #d4c76f; /* Warm gold */
   margin: 0;
 }
 
 h2 {
   font-family: 'Hepta Slab', serif;
   font-size: 2rem;
   margin-bottom: 1rem;
   color: #6a2e6b; /* Brand purple for headings */
 }
 
 p {
   font-size: 1.1rem;
   color: #555;
 }
 
 .navbar-links {
   display: flex;
   gap: 2rem;
   margin-top: 1.5rem;
   justify-content: center;
 }
 
 .navbar-links a {
   text-decoration: none;
   color: #d4c76f; /* Warm gold */
   font-weight: bold;
   font-family:'Courier New', Courier, monospace;
   position: relative;
 }
 
 .navbar-links a::after {
   content: '';
   display: block;
   height: 2px;
   width: 0%;
   background: #fff;
   transition: width 0.3s ease;
   position: absolute;
   bottom: -4px;
   left: 0;
 }
 
 .navbar-links a:hover::after {
   width: 100%;
 }

.price-button {
  max-width: 64rem;
  margin: 0 auto;
  margin-bottom: 10px;  /* gap between button and container01 */
}
.back-button {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  background-color: #d4c76f; 
  color: #501f52;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  
  border: 2px solid transparent; /* Reserve border space */
  box-sizing: border-box;        /* Make sure border included in size */
}

.back-button:hover {
  background-color: #501f52;
  color: #fff;
  border-color: #d4c76f;         /* Just change border color on hover */
}



 
 /* Containers */
 .container01,
 .container02,
 .container03 {
   display: flex;
   justify-content: space-between;
   align-items: center;
   max-width: 64rem;
   width: 100%;
   margin: 2rem auto;
   padding: 2rem;
   box-sizing: border-box;
   border-radius: 16px;
   background-color: #d4c76f; 
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
 .left-text, .right-text,
 .left-image, .right-image {
   flex: 1;
 }
 
 .left-text, .right-text {
   padding: 0 2rem;
 }
 
 .right-image img,
 .left-image img {
   width: 100%;
   height: auto;
   border-radius: 12px;
   object-fit: cover;
 }
 

 
 /* Read More Button */
 .read-more {
   display: inline-block;
   margin-top: 1rem;
   padding: 0.5rem 1.5rem;
   background-color: #6a2e6b; /* Brand purple */
   color: #fff;
   text-decoration: none;
   border-radius: 4px;
   font-weight: 600;
   transition: background 0.3s ease;
 }
 

 
 /* Responsive */
 @media (max-width: 768px) {
   .container01,
   .container02,
   .container03 {
     flex-direction: column;
     text-align: center;
   }
 
   .left-text, .right-text {
     padding: 1rem 0;
   }
 
   .left-image, .right-image {
     margin-top: 1rem;
   }
 }

 .go-back {
   display: inline-block;
   margin-bottom: 1rem; /* Better than big margin all around */
   padding: 0.5rem 1.2rem;
   background-color: #d4c76f; 
   color: #501f52;
   text-decoration: none;
   border-radius: 4px;
   font-weight: 600;
   transition: background 0.3s ease;
 }
 


 html {
   overflow-y: scroll;
 }

 .treatments {
   list-style-type: none;
   padding: 0;
 }
 
 .treatments > li {
   margin-bottom: 1rem;
   font-weight: 800;
 }
 
 .sub-treatments {
   list-style-type: disc;  /* bullet points for sub items */
   margin-left: 2rem;
   font-weight: normal;
 }
 
 .price {
   display: block;
   color: #6a2e6b;
   font-weight: bold;
   margin-top: 0.25rem;
 }

 .welcome-box {
  max-width: 64rem;        /* Same max width as containers */
  width: 100%;             /* Full width within max */
  margin: 2rem auto;
  padding: 2rem 3rem;
  background-color: #f0e289;  /* Soft, warm background */
  color: #501f52;             /* Dark plum text */
  border-left: 12px solid #a39010; /* Thicker gold accent border */
  border-radius: 16px;          /* Match containers' border radius */
  box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* Same shadow as containers */
  font-size: 1.1rem;
  line-height: 1.8;
  box-sizing: border-box;       /* Make sure padding and border included in width */
}

.welcome-box p {
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  font-style: italic;
}

.welcome-box strong {
  font-family: 'Great Vibes', cursive;
  font-size: 1.5rem;
  color: #6a2e6b; /* Brand purple for NAMASTE */
}


 .navbar-links {
  position: sticky;
  top: 1rem;
  z-index: 1000;
  background-color: #6a2e6b;  /* Or whatever color you want */
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 0.75rem 2rem;      /* More padding for the bubble look */
  border-radius: 2rem;         /* Makes it pill-shaped */
  margin: 0 auto;           /* Centered with some margin */
  width: fit-content;          /* So it wraps tight around the links */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Subtle shadow for lift */
}


.heading {
  /* Remove position sticky/fixed if you added it earlier */
  position: static;
}