/* General styles */
body {
    font-family: 'Inter', sans-serif;
}

/* Floating Elements Background */
#floating-elements-container {
    position: absolute; /* Change to absolute to be relative to its parent */
    top: 0;
    left: 0;
    width: 100%; /* Take full width of parent */
    height: 100%; /* Take full height of parent */
    z-index: 1; /* Ensure it stays behind hero content but above hero background */
    overflow: hidden; /* Hide elements outside the viewport */
    pointer-events: none; /* Allow clicks to pass through to content below */
}

.floating-element {
    position: absolute;
    background-color: rgba(108, 99, 255, 0.2); /* Light purple with transparency */
    border-radius: 50%; /* Make them circular */
}

/* Utility classes for animations */
.anim-hidden {
    opacity: 0;
}

.anim-slide-up {
    transform: translateY(30px);
}

/* Specific styles for the hero section animated words */
#animated-words-container {
    /* Ensure words are centered within their container */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
}

.animated-word {
    /* Position words absolutely within their parent for overlay effect */
    position: absolute;
    top: 24px; /* Adjust as needed for top right corner */
    right: 24px; /* Adjust as needed for top right corner */
    transform: translateX(100%); /* Start off-screen to the right */
    opacity: 0; /* Start invisible */
}

.animated-group {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Start hidden */
}

.animated-group img {
    position: absolute;
    top: 0;
    left: 0; /* Changed from -50px to 0 */
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 11; /* Image on top of text */
}

.animated-group .animated-word {
    position: absolute; /* Make word absolute to its group */
    z-index: 10; /* Ensure word is behind the image */
    text-align: right; /* Align text to the right */
    max-width: calc(100% - 48px); /* Ensure it doesn't overflow, considering 24px padding on each side */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Review section specific styles */
.review-card-main {
    position: relative;
    z-index: 20;
}

.review-avatar-center {
    position: absolute;
    z-index: 10;
}

.review-avatar {
    transition: all 0.3s ease-in-out;
}

.review-avatar.active-avatar {
    border-color: #6C63FF; /* Brand purple */
    transform: scale(1.1);
    box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.5);
}

/* FAQ section styles */
details summary {
    list-style: none; /* Remove default marker */
}

details summary::-webkit-details-marker {
    display: none; /* Remove default marker for Webkit browsers */
}

details summary .plus-icon {
    transition: transform 0.3s ease;
}

details[open] summary .plus-icon {
    transform: rotate(45deg);
}

/* Mobile-specific styles */
@media (max-width: 767px) {
    /* Hide the "Yoga in Da Lat, Vietnam" chip */
    .chip {
        display: none !important;
    }

/* Reduce bottom padding in hero section */
    #hero {
        padding-top: 2rem !important; /* Reduced padding */
        padding-bottom: 1rem !important; /* Equivalent to Tailwind's pb-4, adjust as needed */
        margin-top: 2rem; /* Added vertical margin */
        margin-bottom: 2rem; /* Added vertical margin */
    }

    .hero-inner-container {
        padding-bottom: 0px !important;
        padding-top: 0px !important; /* Reduced padding */
    }

    /* Mobile menu button styling */
    #mobile-menu-button {
        display: block; /* Show on small screens */
        z-index: 50; /* Ensure it's above other content */
    }

    /* Mobile menu styling */
    #mobile-menu {
        position: absolute;
        top: 60px; /* Adjust based on header height */
        left: 0;
        width: 100%;
        background-color: white;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        padding: 1rem 0;
        z-index: 40;
    }

    #mobile-menu nav {
        padding: 0 1.5rem; /* Match header padding */
    }

    #mobile-menu a {
        display: block;
        padding: 0.75rem 0;
        font-size: 1.125rem; /* text-lg */
        font-weight: 500; /* font-medium */
        border-bottom: 1px solid #f3f4f6; /* brand-gray-light */
    }

    #mobile-menu a:last-child {
        border-bottom: none;
    }
}