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(255, 255, 255);border: 3px solid rgb(141, 151, 167);border-radius: 3px;height: 402px;width: 71%;margin-left: auto;margin-right: auto;margin-bottom: 7px;}

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


@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%;
  }
}

.slideshow{
  position: relative;
  width: min(1100px, 90vw);
  aspect-ratio: 16 / 9;     
  margin: 0 auto;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

.slideshow img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: slideFade 16s infinite;
}


.slideshow img:nth-child(1){ animation-delay: 0s;  }
.slideshow img:nth-child(2){ animation-delay: 4s;  }
.slideshow img:nth-child(3){ animation-delay: 8s;  }
.slideshow img:nth-child(4){ animation-delay: 12s; }

/* Fade in → stay → fade out → stay hidden */
@keyframes slideFade{
  0%    { opacity: 0; }
  6%    { opacity: 1; }   /* fade in */
  22%   { opacity: 1; }   /* visible */
  28%   { opacity: 0; }   /* fade out */
  100%  { opacity: 0; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .slideshow img{ animation: none; opacity: 1; }
  .slideshow img:not(:first-child){ display: none; } 
}

/* --- Gallery page container fits the viewport neatly --- */
main {
  width: min(1100px, 92vw) !important;  /* panel width */
  height: auto !important;
  padding: 12px !important;
  margin: 0 auto 12px !important;
  background: #fff;
  border: 3px solid #8d97a7;
  border-radius: 10px;
}

/* --- Slideshow fills the panel exactly --- */
.slideshow{
  position: relative;
  width: 100%;                /* <<< important: use the panel width */
  aspect-ratio: 16 / 9;       /* keep a nice shape */
  margin: 0;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

.slideshow img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: slideFade 16s infinite;
}

/* Stagger frames for 4 images (adjust delays if you add more) */
.slideshow img:nth-child(1){ animation-delay: 0s;  }
.slideshow img:nth-child(2){ animation-delay: 4s;  }
.slideshow img:nth-child(3){ animation-delay: 8s;  }
.slideshow img:nth-child(4){ animation-delay: 12s; }

/* Fade in → hold → fade out */
@keyframes slideFade{
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  22%  { opacity: 1; }
  28%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce){
  .slideshow img{ animation: none; opacity: 1; }
  .slideshow img:not(:first-child){ display:none; }
}

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