body {background-color: rgb(77, 77, 77);/*background-image: url(imgs/hotstonemassagelux.jpg);*/background-repeat: no-repeat;background-size: cover;background-position: center;}header {background-color: rgb(102, 102, 102);height: 145px;width: auto;border: 3px dashed rgb(34, 34, 34);border-radius: 24px;text-align: center;}
nav {background-color: rgba(117, 123, 134, 0.568);height: auto;width: auto;margin: 7px;margin-left: auto;margin-right: auto;border-bottom: 5px solid rgb(71, 75, 82);border-radius: 24px;text-align: center;padding-top: 7px;padding-bottom: 7px;}
nav a {text-decoration: none;color: white;font-size: 20px;padding-left: 10px;padding-right: 10px;}nav a:hover {color: rgb(62, 68, 78);cursor: pointer;}

section h1 {font-size: 32px;color: rgb(73, 88, 80);text-shadow: 1px 1px rgb(4, 5, 4);font-family: 'Apparel Bold', "Times New Roman", Arial, serif, sans-serif;text-align: center;}
.mus3{display: flex;justify-content: space-around;}section h2 {font-size: 23px;color: rgb(0, 0, 0);font-family: 'Apparel Bold', "Times New Roman", Arial, serif, sans-serif;text-align: left;/*margin-left: 21px;*/margin: 10px;}section h3 {font-size: 23px;color: rgb(0, 0, 0);font-family: 'Apparel Bold', "Times New Roman", Arial, serif, sans-serif;text-align: center;margin: 10px;/*margin-left: 21px;*/}section h4 {font-size: 23px;color: rgb(0, 0, 0);font-family: 'Apparel Bold', "Times New Roman", Arial, serif, sans-serif;text-align: right;/*margin-right: 21px;*/margin: 10px;}.img3{display: flex;justify-content: space-around;}.word {display: inline-flex;padding: 0;margin: 0;height: auto;width: 95%;color: black;font-size: 24px;font-family: 'Apparel Bold', 'Times New Roman', serif, sans-serif;list-style: none;word-wrap: break-word;}/*.word2 {height: auto;width: 230px;color: black;font-size: 24px;font-family: 'Apparel Bold', 'Times New Roman', serif, sans-serif;list-style: none;letter-spacing: 1.5px;word-wrap: break-word;}.word3 {height: auto;width: 340px;color: black;font-size: 24px;font-family: 'Apparel Bold', 'Times New Roman', serif, sans-serif;list-style: none;letter-spacing: 1.5px;word-wrap: break-word;}*/footer {border: 3px dashed rgb(54,71,119);border-radius: 17px;background-color: rgba(142, 142, 142, 0.678);padding-top: 25px;padding-bottom: 25px;width: auto;margin-top: 5px;}footer p {text-align: center;font-size: 17px;font-family: Arial, 'Times New Roman', sans-serif, serif;}#btnScrolltoTop {position: fixed;right: 10px;bottom: 10px;width: 50px;height: 50px;border-radius: 50%;background-color: rgb(243, 243, 243);box-shadow: 0 0 10px rgba(153, 50, 50, 0.25);color: rgb(61, 61, 61);border: none;outline: none;cursor: pointer;}#btnScrolltoTop:active {background-color: rgb(128, 128, 128);}

@media (max-width: 768px) {
  
  html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

 
  nav {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    padding: .75rem;
    height: auto;            
  }
  nav a {
    font-size: 18px;
    padding: .5rem .75rem;
  }

 
  main, section {
    height: auto;            
    padding: 1rem;
  }

  
  img {
    max-width: 100%;
    height: auto;
  }
  
  img#sasa-building,
  img#def\.massage {         
    display: block;
    margin: 1rem auto 0;
  }

 
  .button_1, .button_2 {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: .5rem auto;
  }


  main h1 { font-size: 36px; text-align: center; }
  main h2 { font-size: 24px; text-align: center; }
  main p  { font-size: 18px; text-align: center; }

  section h1 { font-size: 26px; text-align: center; }
  section h2 { font-size: 18px; text-align: center; }
  footer p   { font-size: 15px; }
}

header {
  background-color: rgb(102, 102, 102);
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px dashed rgb(34, 34, 34);
  border-radius: 24px;
}

header .logo {
  max-height: 100px;   
  width: auto;         
  object-fit: contain; 
}


@media (max-width: 600px) {
  header .logo {
    max-height: 70px;
  }
}


*, *::before, *::after { box-sizing: border-box; }


main, section {
  height: auto !important;   
  min-height: 0;             
  padding: 1rem;           
}


.bordered {
  border: 3px dashed #444; 
  border-radius: 16px;
  background: rgba(0,0,0,0.08); 
}


.container {
  max-width: 1100px;
  margin: 0 auto;
}


.float-right {
  float: right;
  margin: 0 0 1rem 1rem;    
  max-width: 40%;
  height: auto;
}


.clearfix::after {
  content: "";
  display: block;
  clear: both;
}


.container, main, section { overflow-wrap: anywhere; }


@media (max-width: 768px) {
  .float-right {
    float: none;
    display: block;
    margin: 0 auto 1rem;
    max-width: 100%;
  }
}

/* Services cards */
.services-section{
  max-width: 1100px;
  margin: 20px auto;
  padding: 16px;
  border: 2px solid #aab;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
}
.services-title{
  text-align: center;
  font-size: clamp(22px, 2.5vw, 28px);
  margin: 0 0 16px;
  background: #b9c5d6;
  border: 2px solid #222;
  border-radius: 8px;
  padding: 8px 12px;
}
/* 3×2 grid on desktop */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 24px;
  justify-items: stretch;
  align-items: stretch;
}

/* uniform cards */
.service-card {
  background: #d6dde7;
  border: 2px solid #222;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 160px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

/* keep your color variants */
.service-card.dark { background: #a9aaad; }
.service-card.pale { background: #cfe0ff; }
.service-card.rose { background: #dfcfcf; }

/* titles / meta */
.service-name {
  margin: 0 0 6px;
  font: 600 clamp(18px, 2.2vw, 26px)/1.2 "Times New Roman", serif;
}
.service-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: clamp(16px, 1.8vw, 20px);
}

/* mobile/tablet: flow naturally in 1–2 columns */
@media (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}


.badge {
  grid-column: 1 / -1;
  justify-self: center;
  align-self: center;
  padding: 8px 14px;
  border: 2px solid #222;
  border-radius: 10px;
  background: #e6f0ff;
  font-size: clamp(14px, 1.6vw, 18px);
  margin-top: 10px;
}

/* Force a 3×2 grid on desktop */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  grid-template-rows: auto auto;
  gap: 24px;
  justify-items: stretch;
  align-items: stretch;
}


.service-card {
  width: 100%;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Explicit placement for a clean 3×2 */
.full  { grid-column: 1; grid-row: 1; }
.deep  { grid-column: 2; grid-row: 1; }
.lymph { grid-column: 3; grid-row: 1; }
.thai  { grid-column: 1; grid-row: 2; }
.foot  { grid-column: 2; grid-row: 2; }


.service-spacer {
  grid-column: 3;
  grid-row: 2;
  visibility: hidden;     
  min-height: 160px;       
}


.badge {
  margin: 14px auto 0;
  display: inline-block;
  padding: 8px 14px;
  border: 2px solid #222;
  border-radius: 10px;
  background: #e6f0ff;
  font-size: clamp(14px, 1.6vw, 18px);
}
@media (max-width: 900px) {
  .services-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    grid-template-rows: auto;
  }
 
  .full, .deep, .lymph, .thai, .foot { grid-column: auto; grid-row: auto; }
  .service-spacer { display: none; }
}

/*thera sec*/
.therapies-section{
  max-width:1100px;
  margin:20px auto;
  padding:16px;
  border: 2px solid #aab;
  border-radius:12px;
  background: rgba(255,255,255,0.06);
}
.therapies-title{
  text-align:center;
  font-size: clamp(22px, 2.5vw, 28px);
  margin:0 0 16px;
}
.therapies-grid{
  display:grid;
  gap:16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.therapy-card{
  background:#f0f0f0;
  border:2px solid #222;
  border-radius:10px;
  padding:14px 16px;
  text-align:center;
}
.therapy-img{
  display:block;
  width:100%;
  height:auto;
  border-radius:8px;
  margin-bottom:10px;
}
.therapy-name{
  margin:0 0 6px;
  font: 600 clamp(18px, 2.2vw, 24px)/1.2 "Times New Roman", serif;
}
.therapy-list{
  list-style: disc inside;
  text-align:left;
  margin: 8px 0 0;
  padding: 0 6px;
  line-height:1.5;
  font-size: clamp(14px, 1.7vw, 18px);
}

/* mobile spacing */
@media (max-width: 768px){
  .services-section, .therapies-section{ padding:14px; }
}


/*coupon event code */
/* === Sticky Promo Banner === */
.top-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #2f4f4f;
  color: #f7f7f7;
  text-align: center;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  padding: 12px 8px;
  border-bottom: 2px solid #d9cfa5;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  z-index: 9999;
  transition: all 0.3s ease-in-out; /* smooth shrinking */
}

/* Close button */
#close-banner {
  position: absolute;
  right: 12px;
  top: 6px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
}
#close-banner:hover {
  color: #d9cfa5;
}

/* Shrunk state */
.top-banner.shrink {
  padding: 4px 8px;
  font-size: 0.85rem;
  opacity: 0.95;
}

/* Responsive tweak for mobile */
@media (max-width: 600px) {
  .top-banner {
    font-size: 0.9rem;
  }
  .top-banner.shrink {
    font-size: 0.8rem;
    padding: 3px 6px;
  }
}