body {
            font-family: 'Poppins', sans-serif;
            background-color: #F4F7F9;
            /* Subtle wave background effect on the body to mimic texture */
            background-image: radial-gradient(#F4F7F9 2px, transparent 2px);
            background-size: 40px 40px;
        }
        
        /* === Global Animations & Effects === */

        /* Keyframe for subtle 'breathing' effect on the logo/hero */
        @keyframes subtle-float {
            0% { transform: translateY(0); }
            50% { transform: translateY(-2px); }
            100% { transform: translateY(0); }
        }

        /* --- Scroll Animation Keyframes --- */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(50px); }
            to { opacity: 1; transform: translateX(0); }
        }
        @keyframes zoomIn {
            from { opacity: 0; transform: scale(0.8); }
            to { opacity: 1; transform: scale(1); }
        }

        /* Base class: Elements start invisible and without transition */
        .animate-on-scroll {
            opacity: 0;
            transition: none;
        }

        /* Specific animation classes, applied by JavaScript */
        .animate-fade-in {
            animation: fadeIn 0.8s ease-out forwards;
        }
        .animate-slide-right {
            animation: slideInRight 1s ease-out forwards;
        }
        .animate-zoom-in {
            animation: zoomIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; /* Smoother zoom curve */
        }
        /* ---------------------------------- */
        
        /* Mobile menu toggle animation */
        .mobile-menu-open {
            display: flex;
            flex-direction: column;
        }
        
        /* Style for order now button - Enhanced with stronger hover effect */
        .btn-order {
            background-image: linear-gradient(to right, #00A8E8, #00BCD4);
            box-shadow: 0 6px 15px 0 rgba(0, 168, 232, 0.4);
            transition: all 0.3s ease-out;
            border-radius: 9999px; /* Tailwind's rounded-full */
        }
        .btn-order:hover {
            transform: scale(1.08) translateY(-2px); /* Larger scale, slight lift */
            background-image: linear-gradient(to right, #00BCD4, #007ACC);
            box-shadow: 0 10px 20px 0 rgba(0, 122, 204, 0.6); /* Stronger shadow */
        }
        
        /* Navigation Links Hover Effect (Subtle border wave) */
        nav a:hover, ul a:hover {
            color: #00BCD4; /* wave-teal */
            border-bottom: 2px solid #00BCD4;
            transform: translateY(-1px);
        }
        
        /* Logo Animation */
        .logo-float {
            animation: subtle-float 4s ease-in-out infinite;
            display: inline-block;
        }

        /* Footer Social Icon Effect (Ripple/Circle Fill) */
        .social-icon {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            transition: color 0.3s ease;
        }

        .social-icon:hover {
            color: #F4F7F9; /* Change icon color to white on hover */
        }

        .social-icon::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 50%;
            background-color: #00BCD4; /* Wave-teal background fill */
            transform: scale(0);
            transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bounce/Ripple effect */
            z-index: 0;
        }

        .social-icon:hover::before {
            transform: scale(1);
        }
        
        .social-icon svg {
            position: relative; /* Ensure SVG stays above the :before element */
            z-index: 10;
        }

        /* Social icons container for spacing */
        .footer-social-container {
            display: flex;
            gap: 1rem; /* space-x-4 in tailwind */
        }

        /* Add a subtle wave-like shadow to separate header and main content */
        .wave-shadow {
            box-shadow: 0 6px 10px -4px rgba(0, 53, 84, 0.4), /* water-dark shadow */
                        0 1px 1px 0 rgba(0, 168, 232, 0.2); /* water-light highlight */
        }

        /* Inside the <style> block in base.html */

/* === Blog Content Styling (Replacing Tailwind Prose) === */
/* Target the inner content area within blog_detail.html */
.prose article h1,
.prose article h2,
.prose article h3,
.prose article h4 {
    font-weight: 700; /* Bold */
    margin-top: 1.5em; /* Space above headings */
    margin-bottom: 0.5em; /* Space below headings */
    color: #003554; /* water-dark */
}

.prose article h2 {
    font-size: 1.75rem; /* ~text-3xl */
    border-bottom: 2px solid #007ACC; /* water-blue underline */
    padding-bottom: 0.25rem;
}

.prose article p {
    margin-top: 1em;
    margin-bottom: 1em;
    line-height: 1.7;
}

.prose article ul,
.prose article ol {
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 2em; /* Indent lists */
}

.prose article ul {
    list-style-type: disc;
}

.prose article ol {
    list-style-type: decimal;
}

/* Ensure images within the content are responsive */
.prose article img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem; /* rounded-lg */
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

/* Ensure |safe filter and HTML are applied here */