/* Mobile Menu Integration for Tailwind compatibility */
#mobile-menu {
    transition: all 0.3s ease-in-out;
}

/* Ensure navbar doesn't cover content when sticky */
body {
    padding-top: 80px; /* Adjust based on your header height */
}

/* Mobile Menu Visibility Fix */
@media (max-width: 991px) {
    #navbar {
        background: #ffffff !important;
        border-bottom: 1px solid #eee;
    }
    
    #mobile-menu.hidden {
        display: none;
    }
   
    /* Force all text inside content areas to justify */
    .content-area p, 
    .content-area div, 
    .faq-answer, 
    .article-body {
        text-align: justify !important;
        text-justify: inter-word; /* Improves spacing between words */
        line-height: 1.75;       /* Essential for readability when justified */
    }

    /* Force all text inside content areas to justify */
    .content-area p, 
    .content-area div, 
    .faq-answer, 
    .article-body {
        text-align: justify !important;
        text-justify: inter-word; /* Improves spacing between words */
        line-height: 1.75;       /* Essential for readability when justified */
    }

    #mobile-menu {
        display: block;
        background: white;
        padding: 20px;
        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    }
/* Mobile Menu Integration for Tailwind compatibility */
#mobile-menu {
    transition: all 0.3s ease-in-out;
}

/* Ensure navbar doesn't cover content when sticky */
body {
    padding-top: 80px; /* Adjust based on your header height */
}

/* Mobile Menu Visibility Fix */
@media (max-width: 991px) {
    #navbar {
        background: #ffffff !important;
        border-bottom: 1px solid #eee;
    }
    
    #mobile-menu.hidden {
        display: none;
    }
    
    #mobile-menu {
        display: block;
        background: white;
        padding: 20px;
        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    }
}
.liquid-flow {
    /* Existing styles */
    background: linear-gradient(-45deg, #ffffff, #e0f2fe, #ffffff, #bae6fd);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
    backdrop-filter: blur(8px);
    
    /* ADD THESE TWO LINES */
    display: block;
    min-height: 80px; /* Or whatever your header height is */
}

    .water-flow {
        background: linear-gradient(-45deg, #ffffff, #e0f2fe, #ffffff, #bae6fd);
        background-size: 400% 400%;
        animation: gradient 10s ease infinite;
    }
    @keyframes gradient {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    .ocean-wave {
        /* This creates a light blue/white wave-like gradient */
        background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 25%, #80deea 50%, #b2ebf2 75%, #e0f7fa 100%);
        background-size: 400% 400%;
        animation: wave-move 15s ease infinite;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
.whatsapp-float {
    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.4);
}

.whatsapp-float:hover {
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.6);
}

/* Subtle bounce animation for the button */
@keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.whatsapp-float {
    animation: bounce-slow 3s infinite ease-in-out;
}
    @keyframes wave-move {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }