/* Full page fixed background image */
body {
    background-color: #284e03; 
    /* Using a placeholder image for a tranquil spa background */
    background-image: url('../image/wback.jpg');
    background-attachment: fixed; /* Keeps the background static when scrolling */
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    color: #284e03; 
    font-family: 'Exo 2', sans-serif;
}

body::before {
            content: "";
            position: fixed; 
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            /* Using rgba for white (255, 255, 255) with 30% opacity (0.4) */
            background-color: rgba(40, 78, 3, 0.4); 
            z-index: -1; /* This places the overlay behind all main content but over the fixed background image */
        }

/* Custom styles for the brand logo in the header */
.logo {
    /* Ensure no underline on the logo link */
    text-decoration: none; 
    transition: color 0.3s ease;
}
.logo:hover {
    /* Use the primary-green color defined in tailwind config on hover */
    color: #558201; 
}

/* Style for the Hero Section in index.html */
.hero-section {
    background-image: url('../image/hback.jpg');
    background-size: cover;
    background-position: center;
    height: 80vh; 
    min-height: 400px;
}

/* Hover effects for interactive cards in the booking section */
.step-card {
    transition: all 0.3s ease-in-out;
    transform: scale(0.98);
    cursor: pointer;
}
.step-card:hover {
    transform: scale(1.0);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}
.booking-step-container {
    min-height: 350px; 
}