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, 117, 117, 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;}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(129, 129, 129);}
/* ===================== */
/* Mobile-only overrides */
/* ===================== */
@media (max-width: 768px) {
  /* stop horizontal scrolling */
  html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  /* nav: let links wrap and fit */
  nav {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    padding: .75rem;
    height: auto;            /* no fixed 24px bar on phones */
  }
  nav a {
    font-size: 18px;
    padding: .5rem .75rem;
  }

  /* main/section: don't force fixed heights on phones */
  main, section {
    height: auto;            /* overrides your fixed heights */
    padding: 1rem;
  }

  /* images: stack and scale */
  img {
    max-width: 100%;
    height: auto;
  }
  /* your two specific images */
  img#sasa-building,
  img#def\.massage {         /* escapes the dot in the id */
    display: block;
    margin: 1rem auto 0;
  }

  /* buttons: easy taps, centered */
  .button_1, .button_2 {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: .5rem auto;
  }

  /* friendlier type sizes on phones */
  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; }
}
/* --- 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;   /* controls how tall your logo can be */
  width: auto;         /* keeps proportions correct */
  object-fit: contain; /* makes sure it doesn’t stretch */
}

/* Responsive tweak for mobile */
@media (max-width: 600px) {
  header .logo {
    max-height: 70px;
  }
}
#booking {
  background-color: #f6f6f6;
  padding: 40px;
  text-align: center;
  border-radius: 16px;
  margin: 40px auto;
  max-width: 900px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

#booking h1 {
  color: #365c4f;
  font-family: 'Oliver', serif;
  margin-bottom: 10px;
}

#booking p {
  font-size: 1.1rem;
  color: #444;
  margin-bottom: 20px;
}

#square-embed {
  margin-top: 20px;
}

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

/* let content boxes grow with text */
main, section {
  height: auto !important;   /* overrides any fixed height like 312px */
  min-height: 0;             /* avoid weird min-heights */
  padding: 1rem;             /* space inside the border */
}

/* a reusable bordered container */
.bordered {
  border: 3px dashed #444;   /* your style */
  border-radius: 16px;
  background: rgba(0,0,0,0.08); /* optional, keep or remove */
}

/* keep content centered and narrow for readability */
.container {
  max-width: 1100px;
  margin: 0 auto;
}

/* floated image helper (replace align="right") */
.float-right {
  float: right;
  margin: 0 0 1rem 1rem;     /* space around image */
  max-width: 40%;
  height: auto;
}

/* make parent wrap around floated children */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* prevent long words from pushing past the border */
.container, main, section { overflow-wrap: anywhere; }

/* mobile: stack image above text */
@media (max-width: 768px) {
  .float-right {
    float: none;
    display: block;
    margin: 0 auto 1rem;
    max-width: 100%;
  }
}


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