body {
background: #F8F6F2;
}




.menubalk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    margin-top: 4vh;
}

.left-group {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.menu-items {
    display: flex;
    gap: 2.5rem; 
}

.menubalk a {
    margin: 0;
    color: #2E110D;
    font-family: Lato;
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.75rem;
    text-decoration: none;
}

.menubalk img {
    width: 10vw;
    height: auto;
    flex-shrink: 0;
    aspect-ratio: 267/128;
}



.button {
    border-radius: 3.75rem;
    border: 1px solid black;
    background: #DDA47B;
    width: 8.8125rem;
    height: 2.9rem;
    flex-shrink: 0;
    color: black;
    font-family: Lato;
    font-size: 1.1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.welcome {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4rem 2rem; 
    gap: 2rem;
}

.left-side {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    max-width: 50%;
    gap: 1.5rem;
}

.right-side {
    flex-shrink: 0;
}

.right-side img {
    width: 100%;
    max-width: 41.6875rem;
    height: auto;
}


.text-top h1 {
    color: #000;
font-family: "Playfair Display";
font-size: 4.375rem;
font-style: italic;
font-weight: 700;
line-height: 1.75rem;
}

.text-top h2 {
    color: #000;
font-family: Lato;
font-size: 4.375rem;
font-style: normal;
font-weight: 500;
line-height: 1.75rem; 
}

.text-bottom h1 {
    color: #000;
font-family: Lato;
font-size: 4.375rem;
font-style: normal;
font-weight: 500;
line-height: 1.75rem; 
}

.text-bottom h2 {
    color: #000;
font-family: "Playfair Display";
font-size: 4.375rem;
font-style: italic;
font-weight: 700;
line-height: 1.75rem;
}

.text-top,
.text-bottom {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    position: relative;
    left: 4rem;

}

.text-bottom {
    top: -5rem;
    position: relative;

}


.intro-text p {
    color: #000;
font-family: Lato;
font-size: 1.25rem;
font-style: normal;
font-weight: 500;
line-height: 1.75rem; 
width: 80%;
position: relative;
left: 4rem;
top: -4rem;
}

.button2 {
    border-radius: 3.75rem;
    border: 2px solid #4E342E;
    background: #DDA47B;
    color: #2E110D;
    font-family: Lato;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.75rem; 
    width: 12.75rem;
    height: 4rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    left: 4rem;
    top: -2rem;
}

.left-side img {
    width: 15rem;
height: auto;
flex-shrink: 0;
aspect-ratio: 1/1;
position: absolute;
top: 35rem;
left: 37rem;
}


.right-side img {
    width: 41.6875rem;
height: 42.5rem;
flex-shrink: 0;
position: relative;
top: -2rem;
}

.text-top h1,
.text-top h2,
.text-bottom h1,
.text-bottom h2 {
  font-size: clamp(2rem, 5vw, 4.375rem); 
}
.intro-text p {
  font-size: clamp(1rem, 2vw, 1.25rem);
}
.button2 {
  font-size: clamp(1rem, 1.5vw, 1.5rem);
}

.button:hover, .button2:hover {
background: #B6C7A7;
}

.right-side img {
  width: 100%;
  max-width: 41.6875rem;
  height: auto;
  
}

.line {
    width: 100%;
    height: 0.0625rem;
    background-color: #000; 
}

.services {
  display: flex;
  align-items: center;      
  justify-content: center; 
  gap: 1rem;  
  width: 100%;  
  margin: 0 auto;      
  max-width: 600px;       
  position: relative;
  top: 4rem;
}

.services h1 {
  color: #000;
  font-family: "Playfair Display";
  font-size: 3.375rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1.3rem; 
  margin: 0;          
}

.services img {
  width: 2.9375rem;
  height: 2.9375rem;
  flex-shrink: 0;
  aspect-ratio: 1/1;
}


.photo-container {
  display: flex;
  flex-wrap: wrap; 
  justify-content: center;
  gap: 2rem;
  margin-top: 3rem;
}

.photo, .photo2, .photo3, .photo4 {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  text-align: left;
  max-width: none;
}


.photo img, .photo2 img, .photo3 img, .photo4 img {
  width: 100%;
  height: auto;
}

.photo h1, .photo2 h1, .photo3 h1, .photo4 h1 {
  color: #000;
  font-family: "Playfair Display";
  font-size: 1.575rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1.75rem;
  margin-top: 1rem;
  text-align: left;
  margin-left: -7rem;

}

.photo h1, .photo2 h1 {
    margin-left: -11.5rem;
}


.photo p, .photo2 p, .photo3 p, .photo4 p {
  color: #000;
  font-family: Lato;
  font-size: clamp(1rem, 2vw, 1.1rem);
  font-style: normal;
  font-weight: 500;
  line-height: 1.75rem;
  margin: 0.75rem 0;
  text-align: left;
  align-items: start;
}


.button-photo, .button-photo2, .button-photo3, .button-photo4 {
  border-radius: 3.75rem;
  border: 1px solid black;
  background: #DDA47B;
  width: 8.8125rem;
  height: 3.1rem;
  color: black;
  font-family: Lato;
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2rem;
  margin-left: -12rem;
}


.button-photo,
.button-photo2,
.button-photo3,
.button-photo4,
#close-popup {
  cursor: pointer;
}

.button-photo:hover, .button-photo2:hover, .button-photo3:hover, .button-photo4:hover {

background: #B6C7A7;
}

.hidden {
  display: none;
}

/* Overlay background */
.popup {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.popup-content {
  display: flex;
  justify-content: center; 
  align-items: center;   
  flex-direction: column;  

  background-color: #DDA47B;
  padding: 40px;
  border-radius: 1.75rem;
  width: 70.4375rem;
  height: 45.8125rem;
  box-sizing: border-box;
  position: relative;
}


.popup-box {
  background-color: white;

 border-radius: 1.75rem;
width: 60.75rem;
height: 37.6875rem;
flex-shrink: 0;
  margin: 0 auto; 
  display: flex;
  gap: 20px;
}


/* Close button for pop up */
.close {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
  user-select: none;
}



.popup-text {
  flex: 1;
}


.popup-text h3 {
color: #000;
font-family: "Playfair Display";
font-size: 2.5rem;
font-style: italic;
font-weight: 700;
line-height: 1.75rem; 
position: relative;
top: 4rem;
left: 2rem;
}


.popup-text p {
color: #000;
text-align: justify;
font-family: Lato;
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: 1.7rem; 
position: relative;
left: 2rem;
top: 5rem;
}


.popup-image {
  flex: 1;
  overflow: hidden;
  border-radius: 3.75rem;
}

.popup-image img {
  width: 26rem;
  height: 38rem;
  border-radius: 3.75rem;
  display: block; 
  position: relative;
  left: 2rem;
}


.close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 28px;
  font-weight: bold;
  color: black;
  cursor: pointer;
  user-select: none;
}


.hidden {
  display: none;
}


.services-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  margin-top: 4rem;
}

.services-header h1 {
  color: #000;
  font-family: "Playfair Display";
  font-size: 3.375rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1.3rem;
  margin: 0;
}

.services-header img {
  width: 2.9375rem;
  height: 2.9375rem;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}


.photo-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
}


.photo, .photo2, .photo3, .photo4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 20.5625rem;
}

.line2 {
    width: 100%;
    height: 0.0625rem;
    background-color: #000; 
    top: 1rem;
    position: relative;
}

.quote {
  display: flex;
  align-items: left;    
  justify-content: left; 
  gap: 4rem;            
  margin-top: 4rem;    
  flex-wrap: wrap;  
}

.quote-left img {
  width: 40.6875rem;
  height: auto;
  flex-shrink: 0;
  position: relative;
  left: 2rem;
}

.quote-right p {
  color: #000;
  text-align: justify;
  font-family: "Playfair Display";
  font-size: 1.675rem;
  font-style: italic;
  font-weight: 500;
  line-height: 4.375rem;
  width: 20rem; 
  margin: 0;
  position: relative;
  top: 5rem;
}

.quote-right img {
    position: relative;
    width: 35.1875rem;
height: auto;
flex-shrink: 0;
aspect-ratio: 1/1;
right: -15rem;
top: -12rem;
}


.prices-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  margin-top: 4rem;
  position: relative;
  top: -6rem;
}

.prices-header h1 {
  color: #000;
  font-family: "Playfair Display";
  font-size: 3.375rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1.3rem;
  margin: 0;
}

.prices-header img {
  width: 2.9375rem;
  height: 2.9375rem;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.prices {
  width: 100%;
  padding: 0rem;
}

.massage {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; 
  margin-bottom: 1.5rem;
  padding: 1rem;
}

.price-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.price-left h1  {
  margin: 0.25rem 0;
  font-family: "Playfair Display", serif;
  font-style: italic;
  position: relative;
  left: 4rem;
}

.price-left h1 {
  font-size: 1.8rem;
  font-weight: 700;
}

.price-left h2 {
  font-size: 1.2rem;
  font-weight: 500;
  color: #000;
font-family: Lato;
line-height: 1.75rem; 
position: relative;
left: 4rem;
}

.price-right h1 {
  font-size: 1.2rem;
  font-weight: 500;
  color: #000;
font-family: Lato;
line-height: 1.75rem; 
position: relative;
right: 4rem;
}

.line3 {
  width: 92%;
  height: 0.0625rem;
  background-color: #000;
  position: relative;
  top: 1rem;
  margin: 0 auto; 
}

.about {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.about-left {
  max-width: 50%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.about-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  left: 4rem;
  top: 15rem;
}

.about-left img {
  width: 2.9375rem;
  height: 2.9375rem;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}

.about-left h1 {
  color: #000;
  font-family: "Playfair Display";
  font-size: 3.375rem;
  font-style: italic;
  font-weight: 700;
  line-height: 1.75rem;
  margin: 0;
}

.about-left p {
  color: #000;
  text-align: justify;
  font-family: Lato;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: 2.5rem;
  margin: 0;
  position: relative;
  left: 4rem;
  top: 16rem;
  width: 80%;
}

.about-right img {
  width: 40rem;
  height: auto;
  flex-shrink: 0;
  position: relative;
  top: 4rem;
  right: 4rem;
}

.footer {
    border: 1px solid #000;
background: #DDA47B;
width: 100%;
height: 25vh;
position: relative;
top: 6rem;
}

.info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
  position: relative;
  left: 4rem;
  top: 6rem;
}

.info {
  position: relative;
  left: 0; 
  top: 3rem;
  padding: 0 2rem;
}

.info img {
  position: relative;

  top: 0;  
  align-self: flex-start;
}


.info-text {
  display: flex;
  gap: 8rem;
  flex-wrap: wrap;
}

.info-text div {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.info h1 {
  font-family: "Playfair Display";
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  font-style: italic;
}

.info p {
  font-family: Lato;
  font-size: 1rem;
  margin: 0;
  line-height: 1.5rem;
}

.info img {
  width: 10.5rem;
  height: auto;
  align-self: flex-start;
  position: relative;
  right: 8rem;
  top: -1rem;
}










@media (max-width: 1024px) {
  .text-top,
  .text-bottom,
  .intro-text p,
  .button2 {
    left: 2rem;
  }
  .welcome {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .left-side {
    max-width: 90%;
    align-items: center;
  }
  .right-side img {
    max-width: 90%;
  }
}

@media (max-width: 600px) {
  .text-top,
  .text-bottom {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
  .intro-text p {
    width: 100%;
    font-size: 1rem;
    left: 0;
  }
  .button2 {
    width: 10rem;
    height: 3rem;
    font-size: 1rem;
    left: 0;
  }
}

@media (min-width: 1600px) {
  .left-side img {
    left: 45rem; 
    top: 35rem;  
    width: 15rem; 
  }
}