:root {
            /* Dark Theme (Default) */
            --bg-body: #111827;
            /* Gray-900 */
            --bg-card: #1f2937;
            /* Gray-800 */
            --bg-light: #374151;
            /* Gray-700 */
            --text-primary: #f9fafb;
            /* Gray-50 */
            --text-secondary: #d1d5db;
            /* Gray-300 */
            --accent-primary: #f59e0b;
            /* Amber-500 - Highlight */
            --accent-secondary: #3b82f6;
            /* Blue-500 - Primary color */
            /* NAV BAR UPDATE: Slightly more opaque background for frosted effect */
            --nav-bg: rgba(17, 24, 39, 0.98);
            --nav-text: #f9fafb;
        }

        /* Light Theme Overrides */
        .is-light {
            --bg-body: #f3f4f6;
            /* Gray-100 */
            --bg-card: #ffffff;
            --bg-light: #e5e7eb;
            /* Gray-200 */
            --text-primary: #1f2937;
            /* Gray-800 */
            --text-secondary: #4b5563;
            /* Gray-600 */
            --accent-primary: #f59e0b;
            --accent-secondary: #1e3a8a;
            /* NAV BAR UPDATE: Slightly more opaque background for frosted effect */
            --nav-bg: rgba(255, 255, 255, 0.98);
            --nav-text: #1f2937;
        }

        /* Applying theme variables to Tailwind classes */
        .bg-page {
            background-color: var(--bg-body);
        }

        .text-main {
            color: var(--text-primary);
        }

        .text-sub {
            color: var(--text-secondary);
        }

        .bg-card {
            background-color: var(--bg-card);
        }

        .text-accent {
            color: var(--accent-primary);
        }

        .nav-bg-color {
            background-color: var(--nav-bg);
        }

        .nav-text-color {
            color: var(--nav-text);
        }

        .font-inter {
            font-family: 'Inter', sans-serif;
        }

        /* Hero Background */
        .hero-bg {
            background-color: var(--accent-secondary);
            background-image: linear-gradient(135deg, var(--accent-secondary) 0%, #1e40af 100%);
        }

        /* Profile Image Border */

      
.floating-whatsapp {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 55; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Initial shadow */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.floating-whatsapp:hover {
    /* Scale up slightly and lift on hover */
    transform: scale(1.05) translateY(-2px);
    /* Deeper shadow on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}