html {height: 100%; display:auto}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;}main {background-color: rgb(160, 160, 160);height: auto;width: auto;}main h1 {font-size: 60px;text-shadow: 2px 2px rgb(58, 58, 58);color: white;font-family: 'Apparel Black', 'Apparel Bold', 'Times New Roman', Times, arial, serif;margin: 0}img#sasa-building {border: 4.5px solid rgb(255, 255, 255);}.solid-line{border: none;border-top: 4px solid rgb(112, 112, 112);width: 200px;background: none;height: none} main h2 {font-size: 35px;color: black;font-family: 'Autumn in November Regular', 'Signerica Fat Regular', 'Segoe Print', 'Lucida Calligraphy Italic', serif;margin: none}main p {font-size: 20px;color: black;font-family: 'Apparel Black', 'Comic Sans MS', 'times new roman', arial, 'Baby Fox Regular', 'Times New Roman', serif;margin: none}main a {color: white;font-family: 'Apparel Black', 'Comic Sans MS', 'Times New Roman', serif;}.button_1 {width: 250px;height: 50px;border: none;color: white;border-radius: 17px;transition: ease-out 0.2s;font-size: 18.34px;outline: none;border: 3px solid rgb(92, 92, 92);background-color: rgba(185, 185, 185, 0.897);position: relative;z-index: 1;text-align: center;display: inline-flex;align-items: center;justify-content: center;text-decoration: none;}.button_1:hover {color: rgb(167, 167, 167);cursor: pointer;}.button_1:before {transition: 0.4s all ease;position: absolute;top: 0;left: 50%;right: 50%;bottom: 0%;opacity: 0;content: "";background-color: rgb(238, 238, 238);}.button_1:hover:before {border-radius: 17px;transition: 0.5s all ease;left: 0;right: 0;opacity: 1;z-index: -1;}.button_2 {width: 250px;height: 50px;border: none;
  
  color: rgb(255, 255, 255);
border-radius: 17px;transition: ease-out 0.2s;font-size: 18.34px;outline: none;border: 3px solid rgb(97, 97, 97);background-color: rgba(185, 185, 185, 0.897);position: relative;z-index: 1;text-align: center;display: inline-flex;align-items: center;justify-content: center;text-decoration: none;}.button_2:hover {color: rgb(170, 170, 184);cursor: pointer;}.button_2:before {transition: 0.4s all ease;position: absolute;top: 0;left: 50%;right: 50%;bottom: 0%;opacity: 0;content: "";background-color: rgb(228, 228, 228);}.button_2:hover:before {border-radius: 17px;transition: 0.5s all ease;left: 0;right: 0;opacity: 1;z-index: -1;}section {background-color: rgb(238, 238, 238);height: auto;width: auto;margin: 7px;margin-top: 0px;}section h1 {font-size: 32px;color: black;font-family: 'Apparel Black', 'Times New Roman', Sans-Serif;}section .solid-line2 {border: none;border-top: 4px solid rgb(59, 59, 59);width: 150px;background: none;height: none} section h2 {font-size: 20px;color: grey;font-family: 'Times New Roman', Arial, Helvetica, sans-serif;}section a {font-size: 17px;font-family: Arial, Helvetica, sans-serif;color: rgb(202, 161, 161);}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: none}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);}
/* --- Logo sizing and header layout --- */
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; 
}

/* tweak for mobile */
@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;
}


.container {
  max-width: 1100px;
  margin: 0 auto;
}
.bordered {
  border: 3px dashed #444;       
  border-radius: 16px;
  background: rgba(0,0,0,0.08);  
}


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


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


img { max-width: 100%; height: auto; }


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


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


@media (max-width: 768px) {
  nav { width: 95%; height: auto; padding: 8px; }
}


.container { 
  max-width: 960px;        
  margin: 16px auto;        
  padding: 24px;
}

.bordered {
  border: 2px dashed #5a5a5a;     
  border-radius: 14px;
  background: rgba(255,255,255,0.06); 
}

/* Title & divider spacing */
main h1, section h1 { margin: 0 0 8px; line-height: 1.1; }
.solid-line, .solid-line2 { 
  margin: 12px 0 24px; 
  width: 160px; 
  border: 0; 
  border-top: 4px solid #9aa0a6; 
}


.float-right {
  float: right;
  max-width: 34%;           
  height: auto;
  margin: 0 0 12px 16px;    
  border-radius: 8px;
}


.buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.button_1, .button_2 {
  border: 1px solid #8b8b8b;           /* softer edge */
  background: #e0e0e0;
  color: #2f2f2f;
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
}


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


@media (max-width: 900px) {
  .float-right { max-width: 45%; }
}
@media (max-width: 768px) {
  .float-right { float: none; max-width: 100%; margin: 0 0 12px; }
  .buttons { justify-content: center; }
  .container { padding: 16px; }
}

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

main.container.bordered,
section.container.bordered {
  height: auto !important;
  min-height: 0 !important;
  padding: 24px !important;
  border: 2px dashed #5a5a5a !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.06) !important;
  max-width: 960px !important;
  margin: 16px auto !important;
}

img.float-right {
  float: right !important;
  max-width: 34% !important;
  height: auto !important;
  margin: 0 0 12px 16px !important;
  display: block !important;
  border-radius: 8px !important;
}

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

img { max-width: 100%; height: auto; }

.solid-line, .solid-line2 {
  margin: 12px 0 24px !important;
  width: 160px !important;
  border: 0 !important;
  border-top: 4px solid #9aa0a6 !important;
}

/* Mobile */
@media (max-width: 768px){
  img.float-right { float: none !important; max-width: 100% !important; margin: 0 0 12px !important; }
}




.container {
  max-width: 940px;
  margin: 20px auto;
  padding: 24px;
}

/* lighter border, softer background */
.bordered {
  border: 2px dashed #6a6a6a;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
}

/* titles & dividers */
main h1, section h1 { 
  margin: 0 0 8px;
  line-height: 1.1;
}
.solid-line, .solid-line2 {
  margin: 12px 0 24px;
  width: 160px;
  border: 0;
  border-top: 4px solid #a6adb4;
}


.float-right {
  float: right;
  max-width: 36%;
  height: auto;
  margin: 0 0 12px 16px;
  border-radius: 10px;
}


.container p { 
  line-height: 1.6; 
  font-size: 1.05rem;
}

/* buttons row */
.buttons { 
  display: flex; 
  gap: 12px; 
  flex-wrap: wrap; 
  margin-top: 8px; 
}
.button_1, .button_2 {
  border: 1px solid #8f8f8f;
  background: #e0e0e0;
  color: #2f2f2f;
  box-shadow: 0 2px 0 rgba(0,0,0,.15);
}


@media (max-width: 900px) {
  nav {
    width: 95%;
    height: auto;
    padding: 8px 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
}


@media (max-width: 768px) {
  .float-right { float: none; max-width: 100%; margin: 0 0 12px; }
  .container { padding: 16px; }
  .buttons { justify-content: center; }
}

/* Coming Soon modal */
/*
.cs-modal{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: none;               /* hidden until JS opens it */
  /*align-items: center; justify-content: center;
  z-index: 9999;}
.cs-modal.cs-open{ display: flex; } 

.cs-dialog{
  width: min(520px, 92vw);
  background: rgba(255,255,255,.95);
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  animation: cs-pop .18s ease-out;
}
@keyframes cs-pop{ from{ transform: scale(.96); opacity: 0; } to{ transform: scale(1); opacity: 1; } }

.cs-close{
  position: absolute; right: 14px; top: 10px;
  border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer;
}

.cs-logo{ max-height: 70px; width: auto; margin-bottom: 10px; object-fit: contain; }
.cs-dialog h2{ margin: 8px 0 4px; font-size: clamp(20px, 3.5vw, 26px); }
.cs-dialog p{ margin: 8px 0 16px; font-size: clamp(15px, 2.5vw, 17px); color: #444; }

.cs-actions{ display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cs-btn{
  border-radius: 10px; padding: 10px 14px; font-size: 16px; cursor: pointer;
  border: 2px solid #3b5a50; background: transparent; color: #3b5a50;
}
.cs-btn--primary{ background: #3b5a50; color: #fff; }
.cs-btn:hover{ filter: brightness(.95); }

/* Small screens */
/*@media (max-width: 520px){
  .cs-dialog{ padding: 18px 16px; }
  .cs-close{ right: 10px; top: 8px; }
}*/

/* === 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;
  }
}