/* Custom Palette Variables */
:root {
    --green-wellness: #00B64C;   /* Wellness/Growth */
    --emergency-red: #FF0000;    /* High Contrast Action */
    --peach-warmth: #d66000;     /* Community/Support */
    --slate-authority: #002c2c;  /* Professional medical tone */
    --navy-deep: #1d3557;
}

/* Base Setup */
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background-color: #f8fafc; color: #334155; }
h1, h2, h5 { font-family: 'Playfair Display', serif; }

/* Fixed White Navbar */
.navbar { background-color: #ffffff !important; border-bottom: 1px solid #eee; }
.nav-logo-fixed { height: 50px; width: auto; object-fit: contain; }

/* Hero Section with Parallax BACKGROUND.png */
.hero-wrap { position: relative; height: 100vh; overflow: hidden; }

.hero-parallax-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Dark gradient ensures white text is readable */
    background: linear-gradient(to right, rgba(29, 53, 87, 0.8), rgba(29, 53, 87, 0.3)), 
                url('images/BACKGROUND.png') no-repeat center center;
    background-size: cover;
    background-attachment: fixed; /* Creates the scrolling effect */
    z-index: 1;
}

.z-content { z-index: 2 !important; position: relative; }

/* Right Side Floating Dashboard */
.glass-dashboard {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

/* Service Containers - THE POP EFFECT */
.service-container {
    background: #ffffff;
    border-radius: 30px;
    padding: 2rem;
    border: 1px solid #f1f5f9 !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy pop effect */
}

.service-container:hover {
    transform: translateY(-15px) scale(1.03); /* Pops up and slightly grows */
    box-shadow: 0 25px 50px rgba(0,0,0,0.1) !important;
}

/* Custom Icons */
.icon-shape {
    width: 65px; height: 65px;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto;
    font-size: 1.6rem;
}

/* Mapping Colors from your Palette Maker image */
.bg-soft-peach { background-color: #fff3e0; color: var(--peach-warmth); }
.bg-soft-green { background-color: #e8f5e9; color: var(--green-wellness); }
.bg-soft-slate { background-color: #f1f5f9; color: var(--slate-authority); }
.bg-soft-red { background-color: #ffebee; color: var(--emergency-red); }

/* Customized Palette Buttons */
.btn-wellness {
    font-weight: 600;
    padding: 12px 20px;
    border: none;
    color: white;
    transition: 0.3s ease;
}

.btn-peach { background-color: var(--peach-warmth); }
.btn-peach:hover { background-color: #ff5100; transform: scale(1.05); color: white; }

.btn-green { background-color: var(--green-wellness); }
.btn-green:hover { background-color: #009c41; transform: scale(1.05); color: white; }

.btn-slate { background-color: var(--slate-authority); }
.btn-slate:hover { background-color: #4f7373; transform: scale(1.05); color: white; }

.btn-red { background-color: var(--emergency-red); }
.btn-red:hover { background-color: #d60000; transform: scale(1.05); color: white; }

.text-green-wellness { color: var(--green-wellness) !important; }
.btn-main-action { background-color: var(--green-wellness); color: white; border: none; }
/* Fixed Music Section Styles */
.bg-soft-aura {
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
}

.music-art-wrap {
    position: relative;
    width: 280px;
    height: 280px;
    border-radius: 40px;
    overflow: hidden;
    background: #e2e8f0; /* Fallback color */
}

.play-main {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border: none;
    background-color: var(--green-wellness);
    color: white;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.play-main:hover {
    transform: scale(1.15);
    background-color: #009c41;
}

/* Correcting the Prefix Order Error from your VS Code */
.glass-dashboard {
    background: rgba(255, 255, 255, 0.9);
-webkit-backdrop-filter: blur(10px); /* Add this line */
    backdrop-filter: blur(15px);
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

@keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}
:root {
    --green-wellness: #00B64C;
    --peach-warmth: #ff5100;
    --slate-authority: #003a3a;
    --global-navy: #0f172a;
}

/* 1. Global Dark Theme */
.bg-global-slate {
    background: radial-gradient(circle at top right, #1e293b, #0f172a);
}

/* 2. Fix for Ln 33 Error: Webkit Prefix First */
.global-glass-card {
    background: rgba(255, 255, 255, 0.03);
-webkit-backdrop-filter: blur(10px); /* Add this line */
    backdrop-filter: blur(20px);
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 3. Fixing Ln 128/129 Inline Style Warnings */
.chart-line-green { height: 4px; width: 75%; background: var(--green-wellness); border-radius: 10px; margin-top: 8px; }
.chart-line-peach { height: 4px; width: 45%; background: var(--peach-warmth); border-radius: 10px; margin-top: 8px; }

.bg-white-10 { background: rgba(255, 255, 255, 0.08); }


/* Final Footer Styling */
.bg-slate-authority {
    background-color: var(--slate-authority) !important;
}

.footer-logo {
    height: 45px;
    filter: brightness(0) invert(1); /* Turns your logo white for the dark footer */
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.3s;
}

.footer-links a:hover {
    color: var(--green-wellness);
    padding-left: 5px;
}

.social-link {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.3s;
}

.social-link:hover {
    background: var(--green-wellness);
    color: white;
    transform: translateY(-3px);
}

.newsletter-group {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    padding: 5px;
}

.newsletter-group .form-control {
    border: none;
    box-shadow: none;
}

.newsletter-group .form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.smaller { font-size: 0.75rem; }
/* Compact Section Length Fixes */
.bg-soft-sanctuary {
    background-color: #f3f0ff; 
}

/* Reduces length by capping image height */
.compact-img {
    max-height: 750px; /* Reduced from 500px to make section smaller */
    width: auto;
    object-fit: contain;
}

/* Red Button Styling */
.btn-red-action {
    background-color: var(--emergency-red);
    color: white;
    border: none;
    font-weight: 800;
    transition: transform 0.3s ease;
}

/* Ensures text remains sharp in a smaller section */
.display-5 {
    font-size: 2.8rem;
    line-height: 1.3;
}
/* Palette Mapping */
:root {
    --emergency-red: #FF0000;
}

/* Background Color - Alternating from the lavender section */
.bg-soft-aura {
    background-color: #f8fafc; 
}

/* Fixed Error: Ln 33 Prefix Order */
.brand-image-wrap {
    background: transparent;
    -webkit-backdrop-filter: blur(5px); 
    backdrop-filter: blur(5px);
}

/* Fix for Ln 128/129: Sizing moved to CSS */
.compact-img {
    max-height: 340px; /* Kept short to maintain the compact section length */
    width: auto;
    object-fit: contain;
}

.text-red-emergency {
    color: var(--emergency-red) !important;
}

/* Red Button Styling */
.btn-red-action {
    background-color: var(--emergency-red);
    color: white;
    border: none;
    font-weight: 600;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-red-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 0, 0, 0.15);
    color: white;
}
/* 1. Background Color Transition */
/* As you scroll, the background shifts from clean white to a soft wellness teal */
body {
    transition: background-color 0.8s ease;
    background-color: hsl(210, 20%, calc(100% - (var(--scroll) * 10%)));
}

/* 2. The 'Reveal' Effect */
/* Add the class "reveal" to any section or image you want to animate */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-active {
    opacity: 1;
    transform: translateY(0);
}

/* 3. Parallax for Background Images */
/* This makes your BACKGROUND.png move slower than the text, creating depth */
.hero-parallax-bg {
    transform: translateY(calc(var(--scroll) * 200px));
    will-change: transform;
}

/* 4. Smooth Scrolling (The Browser "Feel") */
html {
    scroll-behavior: smooth;
}