@media (min-width: 769px) {
     .floating-button {
         display: none;
    }
}
 .floating-button {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100%;
     z-index: 1000;
}
 .floating-button .btn {
     padding-top: 10px;
    /* Adjusted padding */
     padding-bottom: 15px;
    /* Adjusted padding */
}
 @media (max-width: 768px) {
     .footer-padding {
         padding-bottom: 30px;
    }
}

 .anchor-adjust {
     padding-top: 80px;
    /* The height of your fixed header */
     margin-top: -80px;
    /* Negative value of the above */
     display: block;
    /* Ensures the item is displayed correctly */
     visibility: hidden;
    /* Hides the adjusted block element */
}
 .hero-image {
     max-width: 1200px;
     margin: 0 auto;
     background: url('https://www.xinyunwellness.com/images/best-johor-massage-and-spa.jpg') no-repeat center center;
     background-size: cover;
     position: relative;
     top: 56px;
    /* Added top to account for the menu height */
}
 .hero-image::before {
     content: "";
     display: block;
     padding-top: 52.5%;
    /* (10 / 19) * 100% = 52.63%, approximated to 52.5% for simplicity */
}
 #intro {
     margin-top: 80px;
    /* Or you may need a larger value like 100px or 120px */
}
 .section-spacer {
     margin-bottom: 30px;
}
 .bg-alt-1 {
     background-color: #ffffff;
}
 .bg-alt-2 {
     background-color: #ffffff;
}
 .btn-primary {
     background-color: #4ed83c;
     border-color: #4ed83c;
}
 .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
     background-color: #075e54;
     border-color: #075e54;
}
 h1 {
     font-size: 1.8rem;
     line-height: 2.3rem;
}
 h2 {
     font-size: 1.5rem;
}
 h3 {
     font-size: 1.3rem;
}
 h4 {
     font-size: 1.1rem;
}
 h5 {
     font-size: 1rem;
}
 p {
     line-height: 1.8rem;
}
 .summary-box {
     border: 1px solid #ccc;
     padding: 1rem;
     margin-top: 1rem;
     border-radius: 8px;
     background-color: #f9f9f9;
     width: 100%;
     box-sizing: border-box;
     line-height:2rem;
}
 @media (min-width: 768px) {
    /* Tablets and desktops */
     .summary-box {
         max-width: 500px;
    }
}
 .button-container {
     display: flex;
     justify-content: flex-start;
    /* Adjusted from space-between to flex-start */
     margin-top: 1rem;
}
 .button-container button {
     padding: 0.5rem 1rem;
     border: none;
     border-radius: 4px;
     background-color: #008CBA;
    /* Blue */
     color: white;
     cursor: pointer;
     margin-right: 1rem;
    /* Added margin-right for spacing between buttons */
}

.lightbox-promo {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Lightbox promo styling start */

.lightbox-promo {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.lightbox-promo-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    max-width: 400px; /* Limiting the maximum width */
    width: 90%; /* Ensure it takes up full width for smaller screens */
    box-sizing: border-box; /* This ensures padding doesn't affect the width */
}

.lightbox-promo-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
}

.lightbox-promo-button-container {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

.lightbox-promo-dismiss-container {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.lightbox-promo-dismiss-container a {
    text-decoration: none;
    color: #007BFF; /* You can choose a different color */
    cursor: pointer;
}

.lightbox-promo-dismiss-container a:hover {
    text-decoration: underline;
}

.lightbox-promo-img {
    width: 200px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.promo-offer {
    font-weight: 800;
    font-size: 2.3em;
}

.promo-description {
    font-size: 1.1em;
    line-height: 1.4em;
}


.lightbox-promo-button {
    padding: 26px 34px;
    background-color: #E39C54;
    border: none;  /* This removes the border */
    border-radius: 30px;
    line-height: 19px;
    color: white;  /* This sets the font color to white */
    font-weight: 800;  /* This sets the font weight to 800 */
    cursor: pointer;  /* This changes the cursor to a hand when hovering over the button */
    text-align: center;  /* This centers the text */
    text-decoration: none; 
}

/* Lightbox promo styling end */


/* Gallery styling start */
 .gallery {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
    /* 2x2 grid on mobile */
     gap: 10px;
}
 .gallery div {
     position: relative;
     width: 100%;
     padding-bottom: 100%;
    /* 1:1 aspect ratio */
     overflow: hidden;
    /* Hide anything outside of the container */
}
 .gallery img {
     position: absolute;
    /* Positioning context to the parent div */
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
    /* Cover the entire element box */
     cursor: pointer;
}
 .lightbox {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.8);
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 9998;
}
 .lightbox img {
     max-width: 80%;
     max-height: 80%;
}
 .close-button {
     position: absolute;
     top: 20px;
     right: 20px;
     background: white;
     border: none;
     padding: 10px;
     cursor: pointer;
     font-size: 1.5rem;
     line-height: 1;
     color: #333;
     border-radius: 50%;
     width: 30px;
     height: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     margin-top: -2px;
    /* Adjust this value to move the "X" up or down */
}

.close-photo-link {
        color: #fff;  /* Adjust color */
        text-decoration: none;
        position: absolute;
        bottom: 100px;  /* Adjust position */
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0,0,0,0.5);  /* Optional background */
        padding: 10px 30px 15px 30px;
        border-radius: 3px;
    }
    .close-photo-link:hover {
        text-decoration: underline;
    }
 @media (min-width: 768px) {
     .gallery {
         grid-template-columns: repeat(4, 1fr);
        /* 4x1 grid on desktop */
    }
}
/* Gallery styling end */
 .toc-box {
     padding: 20px;
    /* Adjust padding to your liking */
     background-color: #f0f0f0;
    /* Slightly gray background */
     border-radius: 10px;
    /* Slightly rounded edges */
     border: 1px solid #ccc;
    /* Thin line border */
     max-width: 600px;
    /* Limit the width to 600px */
     margin-left: auto;
    /* Center the box */
     margin-right: auto;
    /* Center the box */
}
 .toc-list {
     padding-left: 20px;
    /* Adjust padding to your liking */
     margin-top: 10px;
    /* Adjust margin to your liking */
     list-style-type: none;
    /* This line hides the bullet points */
}
 .toc-list li {
     margin-bottom: 10px;
    /* Adjust margin to your liking */
}
 .toc-list a {
     text-decoration: none;
    /* Removes underline from links */
     color: #008CBA;
    /* Adjust color to your liking, here it's set to match your button color */
}
 .toc-list a:hover {
     text-decoration: underline;
    /* Underlines link on hover */
}

.promo-button {
    display: inline-flex; /* This will ensure the button is displayed inline with other elements */
    position: fixed;
    bottom: 20px;
    right: calc(20px + 100px + 20px); /* This calculates the right position by adding the width of the existing button plus some space */
    background-color: transparent; /* Assuming you don't want a background color since it's a graphic button */
    border: none; /* Assuming no border */
    cursor: pointer;
}

 .toc-button {
     display: none;
    /* Hide by default */
     position: fixed;
     bottom: 20px;
     right: 20px;
     background-color: #4ed83c;
     color: #fff;
     border: none;
     border-radius: 25px;
     padding: 10px 20px;
     font-size: 16px;
     cursor: pointer;
}
 @media (max-width: 768px) {
     .toc-button {
         display: block;
        /* Show on mobile */
    }
}
 .map-container {
     position: relative;
     overflow: hidden;
     width: 100%;
     padding-top: 100%;
    /* 1:1 Aspect Ratio */
}
 .map-container iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
 @media (min-width: 768px) {
     .map-container {
         padding-top: 0;
         height: 400px;
         max-width: 500px;
        /* This line limits the maximum width to 500px */
    }
}