@import url('https://fonts.googleapis.com/css2?family=Aboreto&family=Be+Vietnam+Pro:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
*,*::before,*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    /* prevent horizontal scrool */
    font-family: "Be Vietnam Pro", serif;
    font-weight: 100;
    font-style: normal;
    min-width: 552px;
    scroll-behavior: smooth;
}


.container {
    position: relative;
    /* ensure header is above the hero image */
    z-index: 2;
    /* place the header above the hero image */
    width: 100%;
}

/* NAVBAR default state (transparent) */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    gap: 2rem;
    /* spacing between items */
    background-color: transparent;
    transition: background-color 0.3s ease;
    padding: 1rem 5.625rem;
    padding-top: 6vh;
    padding-bottom: 3vh;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    border-bottom: 0.5px solid white;
    z-index: 1000;
    /* ensure navbar is above other content */
}

.navbar.scrolled {
    background-color: #8F8554;
    /* solid color when scrolled */
    border-bottom: 0.5px solid #8F8554;
}

.logoText img{
    display: flex;
    z-index: 1000;
    height: 3rem;
    width: auto;
    
}

.logoText {
    background: none;
    border: none;
    cursor: pointer;
    
}


.primary-list,
.secondary-list {
    display: flex;
    gap: 1.5rem;
    /* space between list items */
    list-style: none;
}

.primary-list a,
.secondary-list a {
    color: white;
    text-decoration: none;
    font-size: 1rem;
    /* relative to root font size */
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* Fade effect on hover */
.primary-list a:hover,
.secondary-list a:hover {
    opacity: 0.5; /* Adjust opacity for the fade effect */
}


/* Underline for active link */
.primary-list a.active,
.secondary-list a.active {
    position: relative; /* Required for positioning the ::after element */
    text-decoration: none; /* Remove default underline */
}

.primary-list a.active::after,
.secondary-list a.active::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px; /* Adjust this value to control the distance of the underline from the text */
    width: 100%;
    height: 0.5px; /* Thickness of the underline */
    background-color: #ffffff; /* Color of the underline */
    display: block; /* Ensure the pseudo-element is displayed */
}

.secondary-list a {
    font-weight: 500;
    font-size: large;
}

/* --------------------------------------------------------- */


.containerHero {
    display: flex;
    position: relative;
    /* required for absolute positioning of the image */
    height: 100vh;
    /* full viewport height */
    align-items: center;
    justify-content: flex-start;
    /* align the content to the left */
    color: white;
    /* text color */
    overflow: hidden;
}

.heroContent {
    position: relative;
    z-index: 1;
    text-align: left;
    padding: 1rem 5.625rem;
    margin-left: 0;
    padding-bottom: 10rem;
    width: 100%;
}


/* CURRENT PROMOTION OR MESSAGE DISPLAY */
.heroContent p,
.heroContent .line1 {
    text-align: center;      /* Center the paragraph text horizontally */
    width: 100%;             /* Ensure the p element takes the full width of the container */
    display: flex;
    justify-content: center; /* Center the paragraph content */
    font-size: 300%;
    color: rgb(255, 255, 255);
    font-weight: 500;
    transition: transform 0.4s ease;
    text-shadow: 0 0 10px rgba(238, 238, 238, 0.7), 0 0 20px rgba(255, 255, 255, 0.6), 0 0 30px rgba(255, 255, 255, 0.5); /* Light glow effect */
    animation: glowText 3s ease-in-out infinite;
}

.line1 {
    padding-top: 5rem;
    font-family: "Great Vibes";
    font-size: xx-large;
}

.heroContent .discount{
    font-size: x-large;
}

.heroContent h2 {
    text-align: center;
}

.heroContent .discount u{
    color: rgb(255, 200, 0);

}

.heroContent p:hover {
    transform: scale(1.3); /* Scale up on hover */
}

@keyframes glowText {
    0% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.5);
    }
    50% {
        text-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 30px rgba(255, 255, 255, 0.6);
    }
    100% {
        text-shadow: 0 0 5px rgba(255, 255, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.5);
    }
}

.heroContent h1 {
    font-size: 2.5rem;
    font-family: "Aboreto", serif;
    font-weight: 400;
    font-style: normal;
    margin-bottom: 1rem;
    text-align: left;
    padding-top:20vh;
}

.square-button {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    background-color: transparent;
    color: white;
    border: 0.5px solid white;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    
}

.square-button a {
    text-decoration: none;
    color: white;
}

.square-button:hover {
    background-color: #15382B;
    color: white;
    border-color: #15382B;
    
}

.tiktok-button {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    background-color: transparent;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    
}

.tiktok-button:hover {
    background-color: #8F8554;
    color: white;
    border-color: #8F8554;
    
}


.divButton {
    display: flex;
    flex-direction: column;
    position: absolute;
    gap: 10px;
}




.heroImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background-color: #000; /* Prevents white flash */
}

.heroBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1); /* Smoother easing */
    transform: translateX(100%);
}

.heroBackground.active {
    opacity: 1;
    transform: translateX(0);
    z-index: 2;
}

.heroBackground.prev {
    transform: translateX(-100%);
    z-index: 1;
}

/* Special state for the first image when looping */
.heroBackground.first-active {
    opacity: 1;
    transform: translateX(0);
    z-index: 2;
}

.heroBackground.last-prev {
    transform: translateX(-100%);
    z-index: 1;
}

/* togge Menu for mobile */
.toggleMenu {
    display: none;
    /* hide by default */
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
}



/* ------------------------------------------------ */
.services {
    font-family: "Be Vietnam Pro", serif;
    font-weight: 300;
    font-style: normal;
    font-size: 25px;
}

.serviceList {
    display: flex;
    justify-content: center;
    /* keep items centered while still can do padding */
    flex-direction: column;
    text-align: center;
    background-image: url("assets/floral11\ copy.png");
    font-size: 1.9rem;
    font-family: "Aboreto", serif;
    font-weight: 400;
    font-style: normal;
    color: white;
    padding-top: 5vh;
    align-items: center;
    z-index: 5;
    padding-bottom: 5vh;
    background-size: 30%;
    background-position: -30%;
}

h7 {
    text-align: left;
    display: block;
    width: 100%;
}

.services {
    padding: 1rem 5.625rem;
}

.service-list {
    display: flex;
    justify-content: space-between;
    list-style: none;
    text-align: center;
    color: white;
    flex-wrap: wrap;
    padding-top: 2vh;
    padding-bottom: 3vh;
    
}

.service-list li {
    padding: 1rem 4rem;
    margin: auto;
    /* keep items centered while still can do padding */
}


/* ------------------------------------------------ */

.popularServices {
    text-align: center;
    /* center the title and contents */
    padding-top: 6vh;
    padding-bottom: 10vh;
}

.header4 {
    font-size: 1.75rem;
    font-family: "Aboreto", serif;
    font-weight: 400;
    font-style: normal;
}


.services-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2vh;
    /* allow wrapping for smaller screens */
    padding-top: 6vh;
    margin: 0 auto;
    padding-left: 4rem;
    padding-right: 4rem;
}

.massageType1,
.massageType2,
.massageType3 {
    min-width: 250px;
    max-width: 100%;
    display: block;
    overflow: hidden;
    /* ensure the image is not overflow outside the div */
}



.massageType1 img, 
.massageType2 img, 
.massageType3 img {
    width: 90%;
    /* make the image fill the container */
    object-fit: cover;
    /* fix distortion of images */
    padding-bottom: 3vh;
    aspect-ratio: 1 / 1;
    /* make the images square */
}

.services-container p {
    padding-top: 3vh;
    padding-bottom: 6vh;
}

.services-container button {
    color: black;
    border: 0.5px solid black;
}

/* ------------------------------------------------ */

.story1 {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    background-color: #6B7050;
    padding: 0;
    width: 100%;
    margin: 0;
}

.storyImage1 {
    width: 80%;
    max-width: 120vh;
    height: 70vh;
    margin-top: 0;
    padding-left: 5.625rem;
    object-fit: cover;
}

.text-content {
    flex: 1;
    color: white;
    flex-direction: column;
    gap: 2rem;
    padding-left: 5.625rem;
    padding-right: 5.625rem;
    padding-top: 30vh;
}

.header5 {
    font-size: 1.75rem;
    font-family: "Aboreto", serif;
    font-weight: 400;
    font-style: normal;
    color: white;
}

.text-content p {
    padding-top: 6vh;
    padding-bottom: 6vh;
    text-align: justify;
    /* paragraph style */
}


.ourstoryContainer {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.text-content2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: auto;
    /* push the content to the right of the screen */
    overflow: hidden;
}

.text-content2 p {
    padding-top: 6vh;
    padding-bottom: 6vh;
    text-align: justify;
    /* paragraph style */
    color: black;
    font-size: clamp(1rem, 2vw, 1.5rem);
    max-width: 800px;
    line-height: 1.4;
    margin: 0;
    font-weight: 100;
}

.header6 {
    font-size: 3rem;
    font-family: "Aboreto", serif;
    font-weight: 400;
    font-style: normal;
    color: black;
    margin-bottom: 5rem;
}

.story2 {
    display: flex;
    align-items: flex-start;
    border-bottom: 0.5px solid black;
    padding-top: 10vh;
    padding-left: 5.625rem;
    padding-right: 5.625rem;
    text-align: center;
    z-index: 2;
    position: relative;
    background-color: white;
}

.storyImage2 {
    width: 40%;
    max-width: 120vh;
    height: 70vh;
    object-fit: cover;
    bottom: -20vh;
    margin-left: 5.625rem;
    border: 10px solid #BCB195;
    z-index: 3;
    display: block;
    position: absolute;
    top: 20%;
    transition: all 0.3s ease;
}


/* ------------------------------------------------ */

.customerReview {
    background-color: #EAE1D2;
    padding-left: 5.625rem;
    padding-right: 5.625rem;
    padding-top: 60vh;
    padding-bottom: 4vh;
    display: flex;
    justify-content: space-between;
}

.review-container {
    background-color: #EAE1D2;
    padding-left: 5.625rem;
    padding-right: 5.625rem;
    padding-bottom: 20vh;
    display: flex;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    gap: 10vh;
    border-bottom: 0.5px solid black;
}

.review-container h5 {
    font-size: large;
    padding-bottom: 2vh;
}

.review-container p {
    max-width: 500px;
}

.arrow img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    /* ensure the content scale without distortion */
}
/* ------------------------------------------------ */


.socialIconList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.socialIconList li {
    display: inline-block;
}

.socialIconList img {
    width: 3rem;
    height: 3rem;
    display: block;
}

.openingHours {
    padding: 5.625rem;
}


.openingHours button {
    font-size: 1rem;
    background-color: transparent;
    color: black;
    border: 0.5px solid black;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-top: 3vh;
}

.socialIcon button:hover {
    background-color: #15382B;
    color: black;
    border-color: #15382B;
}

.header6 {
    margin-bottom: 3vh;
    margin-top: 3vh;
}

.openingHours p {
    padding-bottom: 3vh;
}

.about {
    display: flex;
    justify-content: space-between;
    border-bottom: 0.5px solid black;
}

.studioImage1 {
    width: 50%;
    height: auto;
    object-fit: cover;
    position: relative;
    left: -5.625rem;
    overflow: hidden;
}

/* ------------------------------------------------ */

.information1 h6,
.information2 h6 {
    padding-bottom: 6vh;
    color: white;
    margin: 0;
}

.information1 li,
.information2 p {
    padding-left: 5.625rem;
    color: white;
}

.footer {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-top: 6vh;
    padding-bottom: 6vh;
    gap: 2rem;
    background-color: #8F8554;
    border-bottom: 0.5px solid black;
}

.bottom-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    list-style: none;
    padding: 0;
    gap: 1.5rem;
    /* space between list items */

}

.bottom-list li a {
    text-decoration: none;
    color: white;
}

.information2
.information1 {
    /* makes both column take equal space */
    min-width: 250px;
    flex-direction: column;
    align-items: flex-start;
}

.map2 {
    max-height: 450px;
}

.information3 {
    margin-left: 4rem;
}

/* Style for the links in the Explore section */
.bottom-list a {
    position: relative; /* Required for positioning the ::after element */
    text-decoration: none; /* Remove default underline */
    color: white; /* Inherit text color */
    transition: color 0.3s ease; /* Smooth transition for text color */
}

/* Underline effect on hover */
.bottom-list a::after {
    content: '';
    position: absolute;
    left: 50%; /* Start from the middle */
    bottom: -2px; /* Adjust this value to control the distance of the underline from the text */
    width: 0; /* Start with no width */
    height: 0.5px; /* Thickness of the underline */
    background-color: #ffffff; /* Color of the underline */
    transition: width 1s ease, left 1s ease; /* Smooth transition for width and position */
    transform: translateX(-50%); /* Center the underline */
}

/* Spread the underline on hover */
.bottom-list a:hover::after {
    width: 100%; /* Full width on hover */
}



/* ------------------------------------------------ */

.pageEnd {
    background-color: #8F8554;
}

.pageEndLogo {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 2vh 5.625rem;
}

.pageEndLogo a {
    color: white;
    text-decoration: none;
}

.pageEnd p {
    text-align: left;
    padding-left: 5.625rem;
    color: white;
    padding-bottom: 3vh;
}

.pageEndLogo img {
    width: 300px;
    height: auto;
}

.ending-credit {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-right: 5.625rem;
}

/* ---------------COOKIES--------------------------------- */

/* Floating right-side banner */
#cookie-consent-banner {
    
    position: fixed;
    bottom: 30px;
    right: 50px;
    width: 340px; /* Adjust width as needed */
    background: #8F8554;
    color: #fff;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: none; /* Hidden by default */
}
#cookie-consent-banner p {
    margin: 0 0 10px;
    font-size: 14px;
}
#cookie-consent-banner button {
    margin: 5px 0;
    padding: 8px 15px;
    background: transparent;
    color: #fff;
    border: 0.5px solid white;
    cursor: pointer;
    width: 50%;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#cookie-consent-banner a {
    color: white;
    font-style: italic;
    text-decoration: none;
    font-size: 13px;
}

.cookies {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

#accept-cookies:hover,
#reject-cookies:hover {
    background-color: #15382B;
    color: white;
    border-color: #15382B;
}

/* ------------------------------------------------ */
/* responsive design */
@media (max-width: 750px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 5rem;
    }

    .primary-list,
    .secondary-list {
        flex-direction: column;
        gap: 0.5rem;
        
    }

    .heroContent h1 {
        font-size: 2rem;
        /* smaller font size for mobile */
    }

    .review-container {
        background-color: #EAE1D2;
        padding-left: 5.625rem;
        padding-right: 5.625rem;
        padding-bottom: 20vh;
        display: flex;
        justify-content: center;
        text-align: center;
        align-items: center;
        flex-direction: column;
        gap: 10vh;
        border-bottom: 0.5px solid black;
    }

    .about {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        border-bottom: 0.5px solid black;
    }

    .studioImage1 {
        width: 100%;
        height: auto;
        object-fit: cover;
        position: relative;
        left: 0;
    }

    #cookie-consent-banner {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%; /* Adjust width as needed */
        background: #8F8554;
        color: #fff;
        padding: 15px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        z-index: 1000;
        display: none; /* Hidden by default */
    }

    .toggleMenu {
        display: block; /* Show the toggle menu */
        cursor: pointer;
        padding-right: 4rem;
        padding-top: 4rem;
        position: fixed;
        top: 20px; /* Adjust based on your design */
        right: 20px; /* Adjust based on your design */
        z-index: 1000;
    }

    /* Burger Icon Styles */
    .burger-icon {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 2rem;
        height: 1.5rem;
    }

    .burger-icon span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: white; /* Color of the burger icon */
        transition: all 0.3s ease-in-out;
    }


    .primary-list {
        display: flex; /* Keep it flex for smooth transitions */
        flex-direction: column;
        position: absolute; /* Position absolutely */
        top: 100%; /* Align directly below the header */
        left: 0;
        width: 100%;
        height: 100%;
        gap: 8px;
        background-color: #8F8554; /* Background color of the navbar */
        z-index: 100; /* Ensure it's above other content */
        padding: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow */
        overflow: hidden; /* Hide overflow content */
        transition: max-height 0.6s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; /* Smooth transition */
        opacity: 0; /* Start hidden */
        visibility: hidden; /* Start hidden */
        max-height: 0; /* Start hidden */
        border-bottom: 0.5px solid #ffffff;
    }

    .primary-list li a {
        margin-left: 4.7rem;
        font-size: x-large;
    }


    /* Optional: Add animation to the burger icon when active */
    .toggleMenu.active .burger-icon span:nth-child(1) {
        transform: rotate(45deg) translate(10px, 5px);
    }

    .toggleMenu.active .burger-icon span:nth-child(2) {
        opacity: 0;
    }

    .toggleMenu.active .burger-icon span:nth-child(3) {
        transform: rotate(-45deg) translate(10px, -5px);
    }

    .primary-list a.active {
        padding: 0;
        
    }
    

    .primary-list a.active::after,
    .secondary-list a.active::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px; /* Adjust this value to control the distance of the underline from the text */
        width: 100%;
        height: 0.5px; /* Thickness of the underline */
        background-color: #ffffff; /* Color of the underline */
        display: block; /* Ensure the pseudo-element is displayed */
    }

    .image-wrapper {
        width: 100%; /* Make the wrapper fill the available width */
        display: flex; /* Use flexbox for centering the image */
        justify-content: center; /* Horizontally center the image */
        align-items: center; /* Vertically center the image (if needed) */
        position: relative;
    }
    
    .storyImage2 {
        max-width: 100%; /* Make the image responsive, it will fit inside its container */
        height: auto; /* Maintain the aspect ratio */
        display: block; /* Remove any inline spacing below the image */
    }

    .information3 {
        margin: 3rem;
    }

    .map2 {
        width: 100%;
        margin: 0;
        max-height: fit-content;
    }
    
    .containerHero {
        display: flex;
        position: relative;
        /* required for absolute positioning of the image */
        height: 100%;
        min-height: 100vh;
        /* full viewport height */
        align-items: center;
        justify-content: flex-start;
        /* align the content to the left */
        color: white;
        /* text color */
        overflow: hidden;
    }

    .heroContent h1 {
        padding-top:20vh;
    }

    .heroContent p {
        animation: glowText 1.5s ease-in-out infinite;
    }

    .line1 {
        padding-top: 13rem;
    }

    @keyframes glowText {
        0% {
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.5);
        }
        50% {
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.9), 0 0 30px rgba(255, 255, 255, 0.6);
        }
        100% {
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.5);
        }
    }

    .notice {
        padding: 1rem 5.625rem;
    }
    
    .notice p {
        display: flex;
        justify-content: center;
        text-align: center;
        font-size: large;
        font-weight: 500;
    }

    .serviceList {
        display: flex;
        justify-content: center;
        /* keep items centered while still can do padding */
        flex-direction: column;
        text-align: center;
        background-image: url("assets/floral11\ copy.png");
        font-size: 1.9rem;
        font-family: "Aboreto", serif;
        font-weight: 400;
        font-style: normal;
        color: white;
        padding-top: 5vh;
        align-items: center;
        z-index: 5;
        padding-bottom: 5vh;
        background-size: cover;
        background-position-x: 0;
    }
}

@media (max-width: 1800px) {
    .story2 {
        flex-direction: column; /* Stack text and image vertically on smaller screens */
        align-items: center;
        padding-left: 5.625rem;
        padding-right: 5.625rem;
        background-color: white;
    }

    .text-content2 {
        width: 100%; /* Full width for text on smaller screens */
    }

    .storyImage2 {
        width: 80%; /* Adjust image width for smaller screens */
        height: auto; /* Adjust height automatically */
        position: relative; /* Reset absolute positioning */
        right: 5vh;
        bottom: auto;
    }

    .image-wrapper {
        background-color: #EAE1D2;
    }

    .customerReview {
        background-color: #EAE1D2;
        padding: 5.625rem;
        padding-top: 10vh;
    }

    

}